Skip to main content

When configuring the backend as serverless, the following implementations are required:

  • Store the token (JWT), which is the authentication information for the SaaSus Platform, in the browser's local storage.
  • SaaS Platform users authenticate themselves using the JWT.
  • The frontend is implemented with React, Vue.js, etc.
  • The backend is implemented using serverless services such as Lambda.

Flow (JWT Acquisition ~ Tenant Onboarding)

Implementation Samples

1. Frontend Implementation​

1.1. Explanation of the Implementation Sample​

1.1.1. Post-Authentication Transition Destination Screen​

After logging in from the login screen generated by SaaSus, the URL set as the post-authentication redirect will be called.

To test using this implementation sample, please set the redirect to http://localhost:3000/callback.

After authentication, a temporary code (code=xxxxx) necessary for retrieving authentication information is passed in the query parameters of the redirect URL. Please implement a process to retrieve the JWT using this temporary code and save the JWT to local storage.

1.1.2. Tenant Onboarding Screen​

It is necessary to check if the user is logged in. Therefore, implement as follows: Set jwttoken to the JWT stored in local storage. You can confirm that the user is logged in if data is retrievable.

After login confirmation, implement the screen according to whether self-signup is used or not.

  • With self-signup: Implement a screen for tenant onboarding.
  • Without self-signup: Implement a screen to display after login.
try {
  const jwtToken = window.localStorage.getItem('SaaSusIdToken');
  const apiConfig = new Configuration({
    accessToken: jwtToken || 'dummyToken',
    basePath: 'https://xxxxx.lambda-url.ap-northeast-1.on.aws',
  });

  const userInfoApi = new UserInfoApi(apiConfig);
  const { data } = await userInfoApi.getLoginUser();
  return data;
} catch (e: any) {
  return thunkAPI.rejectWithValue(e);
}

1.1.3. User List Screen (Top Page)​

1.2. How to Use the Implementation Sample​

2. Backend Implementation​

2.1. Explanation of the Implementation Sample​

2.1.1. JWT Retrieval API​

import { AuthClient } from "saasus-sdk";

export const handler = async (event: any): Promise<any> => {
  const authClient = new AuthClient();

  const code = event.queryStringParameters.code;

  const res = await authClient.credentialApi.getAuthCredentials(code);
  const token = res.data.id_token;

  return {
    statusCode: res.status,
    body: JSON.stringify({
      id_token: await token,
    }),
  };
};

2.1.2. User Information Retrieval API​

import { AuthClient } from "saasus-sdk";

export const handler = async (event: any): Promise<any> => {
  const authClient = new AuthClient();

  const token = event.headers.authorization.replace("Bearer ", "");
  const userinfo = await authClient.userInfoApi.getUserInfo(token);

  let response = "";
  if (userinfo.data.tenants.length == 0) {
    response = JSON.stringify({
      id: await userinfo.data.id,
      email: await userinfo.data.email,
      completed_sign_up: false,
    });
  } else {
    response = JSON.stringify({
      completed_sign_up: true,
    });
  }

  return {
    statusCode: userinfo.status,
    body: response,
  };
};

2.1.3. Tenant Onboarding API​

To confirm that the API request comes from a user logged into the SaaSus Platform, always confirm login by retrieving user information.

The self-signup process is as follows:

Prerequisite) The self-signup user becomes the administrator of the new tenant: a. Create a tenant. b. Link the logged-in user to the created tenant. c. Set the logged-in user as the administrator of the tenant.

import { AuthClient } from "saasus-sdk";

export const handler = async (event: any): Promise<any> => {
  const body = JSON.parse(event.body);

  const authClient = new AuthClient();

  const token = event.headers.authorization.replace("Bearer ", "");
  const userinfo = await authClient.userInfoApi.getUserInfo(token);

  // Create tenant
  // Tenant name: Tenant name entered on screen
  // Back office staff email: Email of the person logged in
  // Connect instance ID: Connect instance ID entered on screen
  // AWS account ID: AWS account ID entered on screen
  // IAM role ARN: IAM role ARN entered on screen
  const tenantProps: TenantProps = {
    name: body.tenant_name,
    back_office_staff_email: userinfo.data.email,
    attributes: {
      connect_instance_id: body.connect_instance_id,
      aws_account_id: body.aws_account_id,
      iam_role_arn_for_cdk: body.iam_role_arn_for_cdk,
    },
  };
  const createTenant = await authClient.tenantApi.createTenant(tenantProps);

  // Link tenant to user
  // Connect user ID: Connect user ID entered on screen
  const createTenantUserParam: CreateTenantUserParam = {
    attributes: { connect_user_id: body.connect_user_id },
    email: userinfo.data.email,
  };
  await authClient.tenantUserApi.createTenantUser(
    createTenant.data.id,
    createTenantUserParam
  );

  // Set roles
  const createTenantUserRolesParam: CreateTenantUserRolesParam = {
    role_names: ["admin"],
  };
  await authClient.tenantUserApi.createTenantUserRoles(
    createTenant.data.id,
    userinfo.data.id,
    3,
    createTenantUserRolesParam
  );

  return {
    statusCode: userinfo.status,
    body: "",
  };
};

2.1.4. User List Retrieval API​

To confirm that the API request is from a user logged into the SaaSus Platform,
please always perform a login check by retrieving user information.

  • React Implementation Sample (In Preparation)

2.2. Implementation Sample​

  • React (In Preparation)