Skip to content
By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post
About re:Post

Amplify UI React Authenticator Freezes After Verification Code on Next.js

0

Service: AWS Amplify SDK: @aws-amplify/ui-react (v6)

Question Details: I'm using aws-amplify v6 with next.js and the @aws-amplify/ui-react Authenticator component. The authentication flow gets stuck.

The User Experience:

  • The user enters their username and password.
  • They are correctly prompted for a verification code (from their authenticator app).
  • They enter the code and click "Confirm."
  • The UI shows a loading spinner and freezes indefinitely. The application never redirects.

What I've Found So Far:

Network Tab: The ConfirmSignIn call to Cognito (https://cognito-idp.us-east-2.amazonaws.com/) returns a 400 Bad Request. And I also see the Cognito's API call for verifying the code is successfull 200. But the UI is stuck.

Configuration: My Amplify configuration is loaded from environment variables. I've discovered that my configuration does not include the oauth block. I suspect this might be the cause.

import ENV from '@/envConfig';

const awsExports: any = {
  aws_project_region: ENV.APP_AWS_REGION,
  aws_cognito_identity_pool_id: ENV.APP_IDENTITY_POOL_ID,
  aws_cognito_region: ENV.APP_AWS_REGION,
  aws_user_pools_id: ENV.APP_USER_POOL_ID,
  aws_user_pools_web_client_id: ENV.APP_USER_POOL_WEB_CLIENT_ID,
};

export default awsExports;

// Some code...

Amplify.configure({
  ...awsExports,
  Auth: {
    Cognito: {
      userPoolId: awsExports.aws_user_pools_id,
      userPoolWebClientId: awsExports.aws_user_pools_web_client_id,
      signUpVerificationMethod: 'code',
      identityPoolId: awsExports.aws_cognito_identity_pool_id,
      region: awsExports.aws_cognito_region,
    },
  },
});

// Some code.
// @aws-amplify/ui-react's Authernticator component

Step1: Login Step2: Verification Authenticator component stuck after verification step

Topics
Security, Identity, & Compliance
Tags
Amazon Cognito
Language
English

asked a year ago219 views

1 Answer
0

This issue with the Amplify UI React Authenticator freezing after verification code entry is a common challenge with Amplify Gen 2 and Cognito integration. Based on your description, there are a few potential causes and solutions:

  1. Configuration Issue: The most likely cause is incomplete Amplify configuration. You mentioned your configuration doesn't include the OAuth block, which could be contributing to the problem. However, the core issue might be related to how Amplify is configured in your application.

  2. Missing Amplify.configure in Component: A critical step is ensuring that Amplify.configure(outputs) is properly called both at the top level of your component file and within the constructor if you're using a class component. This is essential for the proper functioning of Amplify's authentication flow.

  3. Post-Verification Handling: By default, Cognito doesn't automatically redirect users after account confirmation or verification. The UI freezes because there's no defined behavior after the verification step completes.

Here are some solutions:

  1. Fix Configuration: Ensure your Amplify configuration is complete and correctly set up. Double-check that all required parameters are included.

  2. Add Proper Amplify Configuration: Make sure you have Amplify.configure(outputs) both at the component level and in the constructor if applicable.

  3. Custom Verification Handler: Implement a custom handler for the verification step:

<Authenticator
services={{
async handleVerifyUser(params) {
try {
// Handle normal verification
const result = await params.handleVerifyUser(params);

// After verification, attempt auto-login
if (result.username && params.password) {
await Auth.signIn(result.username, params.password);
}
return result;
} catch (error) {
console.error('Verification error:', error);
throw error;
}
}
}}
>
{/* Your app content */}
</Authenticator>

  1. Check for Version Compatibility: Ensure that the versions of aws-amplify and @aws-amplify/ui-react you're using are compatible with each other. Sometimes version mismatches can cause unexpected errors.

  2. Clear Dependencies: If you've recently updated packages, try clearing your node_modules folder and reinstalling dependencies.

If these solutions don't resolve the issue, you might need to enable more detailed logging to get more information about the specific error occurring during the verification process.
Sources
Authenticator is not redirecting user to login page after account verification code is entered | AWS re:Post
Amplify gen 2, amplify-authenticator "There is already a signed in user." | AWS re:Post
Amplify AUTH - reat native - "An unknown error has occurred" | AWS re:Post
I have a react project that tried to switch to AWS Amplify Authenticator, but got errors: Unhandled Rejection (Error): register failed, invalid key $$typeof from plugin /src/app.tsx. | AWS re:Post

answered a year ago

  • Vivek S
    a year ago

    Tried with oauth but didnt work. same behaviour is occuring.

    const awsExports: any = {
  aws_project_region: ENV.APP_AWS_REGION,
  aws_cognito_identity_pool_id: ENV.APP_IDENTITY_POOL_ID,
  aws_cognito_region: ENV.APP_AWS_REGION,
  aws_user_pools_id: ENV.APP_USER_POOL_ID,
  aws_user_pools_web_client_id: ENV.APP_USER_POOL_WEB_CLIENT_ID,
  oauth: {
    domain: ENV.APP_COGNITO_DOMAIN_URL,
    scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'],
    redirectSignIn: `http://${window?.location?.hostname}/`,
    redirectSignOut: `http://${window?.location?.hostname}/`,
    responseType: 'code',
  },
};

    And this didnt work either

    <Authenticator
      hideSignUp
      services={{
        // Object literal may only specify known properties, and 'handleVerifyUser' does not exist in type 'Partial<...>'
        async handleConfirmSignIn(
          formData: ConfirmSignInInput
        ): Promise<ConfirmSignInOutput> {
          try {
            console.log('Intercepting handleConfirmSignIn with:', formData);
            const output = await confirmSignIn(formData);

            console.log('Confirmation successful, returning output:', output);

            return output;
          } catch (error) {
            console.error('Custom handleConfirmSignIn error:', error);
            throw error;
          }
        },
      }}
    >

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Relevant content