How to implement Email verification flow with Authenticator component from '@aws-amplify/ui-react' package?

Question

So I'm using Authenticator component to implement my login flow. For new users after logging in with the temporary password it asks to change the password. After changing the password the user is directly logged in. But I want the user to verify his email before logging in for the first time.

So previously I was using Authenticator from this package. In that package we had that flow where you have to verify your email before logging in.. So I'm trying to get the same flow from this new Authenticator. Any idea on how to achieve that..?

Answer 1

This Authenticator should follow the work-flow of allowing the user to confirm their email before signing in. You should not need to provide them with a temporary password.

If you have issues sending them their confirmation code, use this example:

import { Auth } from 'aws-amplify';

async function resendConfirmationCode() {
    try {
        await Auth.resendSignUp(username);
        console.log('code resent successfully');
    } catch (err) {
        console.log('error resending code: ', err);
    }
}

Note: this example also allows you to have a completely customised registration flow.

To ensure your authentication is setup correct, follow these steps:

1. Go to your terminal
2. Write amplify update auth
3. Go through the whole "walkthrough" until you enable the settings you desire