CODEWITHSUNDEEP
amazon-web-servicesamazon-cognitoaws-amplifyaws-amplify-sdk-js
ahmetovicajdin
ahmetovicajdin

Reputation: 364

Customize email verification page AWS Cognito

I am using Amazon Cognito for user authentication. After the user is registered verification email is sent to his email address. After clicking on the email link he is prompted with this in his browser.

Aws verification page

How can I customize this page in order to insert a script that will trigger deep links within the mobile application, and also make the page look bit nicer?

Upvotes: 10

Views: 4216

Answers (2)

VieraB
VieraB

Reputation: 103

I was not able to customize the verification page provided by AWS. I created my own UI on my page, which sent the generated code to cognito for verification. For that I needed to:

  1. trigger custom email upon registration
  2. put custom link to verification in the email using the codes provided for the lambda
  3. process the codes on my page
  4. send the codes and username through aws package

Step 1. In AWS Cognito User Pool, customize workflow with triggers, choose "Custom Message". The triggerSource for verification that I check for are:

event.triggerSource === 'CustomMessage_SignUp' || event.triggerSource === 'CustomMessage_ResendCode'

You can see other trigger sources for CustomMessage here: https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-custom-message.html

Step 2. The lambda provides parameters for verification for my users: event.request.userAttributes.sub and event.request.codeParameter. Using these to I constructed a link to my page like so: https://mypage.com?user_name=${event.request.userAttributes.sub}&confirmation_code=${event.request.codeParameter}

Step 3. On my page, I check if the url params for user_name and confirmation_code are present, and display a modal which is supposed to inform the user if the verification went correctly or not.

  1. Using a package "amazon-cognito-identity-js" I process the code and user_name. First I create the user pool:
import { CognitoUserPool } from 'amazon-cognito-identity-js';
//Aws-cognito credentials
const poolData = {
  UserPoolId: YOUR_USERPOOL_ID,
  ClientId: YOUR_CLIENT_ID,
};

export default new CognitoUserPool(poolData);

Then to process the code I create a user instance:

import { CognitoUser } from 'amazon-cognito-identity-js';
import UserPool from 'utils/UserPool';

const getUser = () => {
    return new CognitoUser({
      Username: user_name.toLowerCase(),
      Pool: UserPool,
    });
  };


// After that you can process the code:



getUser().confirmRegistration(code, false, function (err, result) {
   if (err) {
      if (
        err.message === 'User cannot be confirmed. Current status is CONFIRMED'
      ) {
        // Handle already confirmed error
      } else {
        // Handle other errors you want
      }
    }
   // Handle successful verification
});

The account is verified and you can guide the user to the login page or any other.

Upvotes: 0

dfranca
dfranca

Reputation: 5322

You can do that using Cognito triggers.

You can configure a trigger template to define a message with a link to a page you control. The assets will be stored at: amplify/backend/auth/<your-resource-name>CustomMessage/assets

The documentation has more details

Cognito allows you to configure your User Pool to send an email to your users when they attempt to register an account. You can configure this email to contain a link to Cognito’s Hosted UI where the user’s account will be marked as confirmed.

This trigger template allows you to define an email message with a link to a static S3 bucket that you control, where the user’s account will be confirmed and they can then be redirected to a URL of your choice (presumably your application). The URL will automatically contain the username as a query string parameters.

Please note that this trigger template will create an S3 resource. The files that populate the static site are available for edit in amplify/backend/auth/CustomMessage/assets. They consist of:

index.html
spinner.js (controls the spinner that appears on the page while users are awaiting confirmation)
style.css
verify.js (the script which performs the verification request)

Upvotes: 1

Related Questions