When the Authenticator component is dynamically imported, it can't find the amplify configuration.

[ajhool]

Describe the bug

If the Authenticator component is dynamically imported, it is unable to find the amplify configuration that was set using Amplify.configure(aws-exports);

To Reproduce
Please see the "Sample Code" section for a reproduction.

1. Add the Sample Code to a React Amplify webapp
2. Change awsConfig to include real cognito information
3. Host the webapp and navigate to the Sample Code in your browser.
4. Type in a username and password.
5. Click Sign In
6. Inspect the console/log information. There should also be a toast that says No userPool

Expected behavior
I expect to be able to dynamically import the Authenticator component and instantiate it.
[x] A flash of text that says: "WAITING FOR DYNAMIC IMPORT"
[x] The Amplify SignIn panel to be displayed
[ ] Sign in should work correctly. What actually happens is that sign in says "No userPool", with the log error: AuthClass - Cannot get the current user because the user pool is missing. Please make sure the Auth module is configured with a valid Cognito User Pool ID

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• "@aws-amplify/auth": "^1.2.20",

Additional context
Add any other context about the problem here.

I am using Next.js for server-side rendering. Importing the Amplify Authenticator component breaks server-side-rendering, which is why I am attempting to dynamically import it in componentDidMount; to force the import on the client. There is no debug information about why the component breaks SSR.

Sample code
Include additional sample code or a sample repository to help us reproduce the issue. (Be sure to remove any sensitive data)

// secure-page.tsx
import React from 'react';
import Amplify from 'aws-amplify';

const awsConfig = {
     "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "XXX",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_XXX",
    "aws_user_pools_web_client_id": "XXX",
}

Amplify.configure(awsConfig);

// Initially, the placeholder component is just a div that will not display the children.
let DynamicComponent = () => (<div>WAITING FOR DYNAMIC IMPORT</div>);

class SecurePage extends React.Component {

  constructor(props) {
    super(props);

    this._dynamicImport = this._dynamicImport.bind(this);
  }

   // Dynamically imports the amplify component and extracts the Authenticator package.
  _dynamicImport = async () => {
    DynamicComponent = await import('aws-amplify-react').then(package => package.Authenticator); 

    // We could set a flag in the state, but for simplicity, we just force a rerender.
    this.forceUpdate();
  }
  
  // Import the component once the component has mounted.
  //  This forces an import on the client side.
  componentDidMount() {
    _this.dynamicImport();
  }

  render(){
    <DynamicAuthenticator>Inside Authenticator</DynamicAuthenticator>
  }
}

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

This is an attempt at a workaround for Auth breaking SSR, as illustrated in these issues:

#3201

#2054

#3015

[manueliglesias]

Hi @ajhool

This is known to happen when you have multiple versions of amplify in your project.

Can you confirm this by running

yarn list --pattern amplify # or npm ls | grep amplify

[ajhool]

yarn list v1.12.3
├─ @aws-amplify/analytics@1.2.14
├─ @aws-amplify/api@1.0.31
├─ @aws-amplify/auth@1.2.20
├─ @aws-amplify/cache@1.0.25
├─ @aws-amplify/core@1.0.25
├─ @aws-amplify/interactions@1.0.28
├─ @aws-amplify/pubsub@1.0.26
├─ @aws-amplify/storage@1.0.28
├─ @aws-amplify/ui@1.0.18
├─ @aws-amplify/xr@0.1.15
├─ aws-amplify-react@2.3.4
└─ aws-amplify@1.1.25
   ├─ @aws-amplify/api@1.0.32
   └─ @aws-amplify/auth@1.2.21

[haverchuck]

@ajhool So it looks like you do have multiple versions of the auth module in your project? Perhaps try removing your node modules and reinstalling latest?

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.