Configure custom social login

¶ Fill in the basic application information

Go to GenAuth console > Connect identity source > Social login, find "Connect custom social login" at the bottom, and click the plus sign on the right.

In the pop-up drawer, first fill in some basic connection information, connection identifier, display name, you can upload an application logo.

¶ Fill in the basic identity source information

Next, fill in some basic information of the external social login provider. You can find the relevant URL endpoints from the documentation of the external OAuth2.0 identity provider, including Authorization endpoint, Token endpoint, Scope optional value. You also need to fill in the Application ID and Application Secret of the external OAuth2.0 social login identity source. You can find this information at the external OAuth2.0 social login identity source.

Authorization link template is a string template. You can use macros such as ${authEndPoint}, ${tokenEndPoint}, ${scope}, ${clientId}, and ${clientSecret}.

The correspondence between macros and form items is as follows:

Example:

If the authorization link template is filled in:

${authEndPoint}?client_id=${clientId}&response_type=code&state=4634641&scope=${scope}&redirect_uri=https://core.genauth.ai/connections/oauth2/5fa91b0f50315451dc86086d/callback

The following authorization will be generated in the future URL:

https://login.microsoftonline.com/8f909eb1-99fe-4f75-b4e0-2f7ab37815c6/oauth2/v2.0/authorize?client_id=fc52a7ab-4172-4db3-9292-e51f85a1576e&response_type=code&state=4634641&scope=openid profile&redirect_uri=https://core.genauth.ai/connections/oauth2/5fa91b0f50315451dc86086d/callback

¶ Upload custom code snippet

Finally, and most importantly, you need to upload custom code snippets to complete the functions of Code to Token and Token to User Information and Field Alignment.

GenAuth has provided you with template code:

You can use the request-promise (opens new window) library in the function to send network requests.

¶ codeToToken function

The following is the template code of the codeToToken function. The first parameter of the function code is the authorization code. You need to use this code to exchange the AccessToken from the Token endpoint of the external OAuth2.0 social login identity provider.

async function codeToToken(code, connection) {
  const options = {
    method: "POST",
    uri: "External OAuth2.0 IdP Token endpoint",
    form: {
      client_id: "External OAuth2.0 IdP application ID",
      client_secret: "External OAuth2.0 IdP application secret",
      grant_type: "authorization_code",
      redirect_uri:
        "https://core.genauth.ai/connections/oauth2/{connection ID}/callback",
      code,
    },
    json: true,
  };
  const resp = await request(options);

  // Return the string value of AccessToken here
  return resp.access_token;
}

¶ tokenToUserInfo function

The following is the template code of the tokenToUserInfo function. The first parameter of the function, accessToken, is the return value of the previous function codeToToken (in this case, resp.access_token), you need to use accessToken to exchange user information from user information endpoint of external OAuth2.0 social login identity provider and complete field alignment. The return value is an object, the content must be user information fields that conform to the GenAuth data format, and must contain userIdInIdp field, which is the unique identifier of the user in the external identity provider, that is, the user ID.

async function tokenToUserInfo(accessToken, connection) {
  const options = {
    method: "POST",
    uri: "External OAuth2.0 IdP user information endpoint",
    form: {
      access_token: accessToken,
    },
    json: true,
  };
  const resp = await request(options);

  // Align fields
  const profile = {
    // Must include userIdInIdp field
    userIdInIdp: resp.sub,
    name: resp.name,
    familyName: resp.family_name,
    givenName: resp.given_name,
    photo: resp.picture,
  };
  return profile;
}

Please align user information to the following fields, that is, the content returned by the tokenToUserInfo function must be an object, and the key in this object must exist in the field name in the following table, GenAuth user information field meaning table:

Finally, click "Save". At this point, the settings for custom external social login are all completed. Next, let's experience using custom social login connection for authentication.