Amazon Web Services Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – Unable to get the user email id from AWS cognito

I am facing an issue, i am not getting the user email id at all after the authentication is done by using AWS cognito.

// import './App.css';
import React from 'react';
import {Amplify} from 'aws-amplify';
import awsmobile from './aws-exports';
import {withAuthenticator, Authenticator} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css'
// import SignIn from './SignIn';

Amplify.configure(awsmobile)

// console.log(Authenticator.SignIn())
// console.log(aoihe)


function App() {
  return (
    <Authenticator>
    {({ signOut, user }) => (
      <div className="App">
      {/* <SignIn SignInComponent={Authenticator.SignIn} /> */}
        <p>
          Hey {user.username}, welcome to my channel, with auth!
        </p>
        {user.attributes && user.attributes.email ?
        <h2>{user.attributes.email}</h2> :
        <h2>Email not available</h2>  
      }
        {/* You can enable this after ensuring user attributes are available */}
        {/* <h2>{user.attributes?.email || "Email not available"}</h2> */}
        <button onClick={signOut}>Sign Out</button>
      </div>
    )}
  </Authenticator>
  );
}

export default withAuthenticator(App);

First of all, i am not able to import Auth from ‘aws-amplify’. Auth is not at all available in ‘aws-amplify’, only Amplify is available. Eg., import {Amplify} from ‘aws-amplify’; So, instead of Auth, what is the module/library i can use to get the user email id and user phone number. Thank you so much in advance for providing the solution.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
                import './App.css';
            import React from 'react';
            import {Amplify} from 'aws-amplify';
            import awsmobile from './aws-exports';
            import {withAuthenticator, Authenticator} from '@aws-amplify/ui-react';
            import '@aws-amplify/ui-react/styles.css'

            Amplify.configure(awsmobile)


            function App() {
              return (
                <Authenticator>
                {({ signOut, user }) => (
                  <div className="App">
                    <p>
                      Hey {user.username}, welcome to my channel, with auth!
                    </p>
                    <p>
                      {user.signInDetails.loginId}
                    </p>
                    {user.attributes && user.attributes.email ?
                    <h2>{user.attributes.email}</h2> :
                    <h2>Email not available</h2>  
                  }
                    <button onClick={signOut}>Sign Out</button>
                  </div>
                )}
              </Authenticator>
              );
            }

            export default withAuthenticator(App);

    Guys, after much struggle i got the answer.

    I got the user email id by using user.signInDetails.loginId.

    user is the component of Authenticator and this Authenticator comes from '@aws-amplify/ui-react'


  2. 0

    You can get the user email and phone number attributes using AWS Amplify’s Authenticator component directly, which you already have in your code. It looks like you are on the right track with accessing user.attributes.email. Here’s how you can address your issues:

    1. Importing Auth:
    If you’re not able to import Auth from ‘aws-amplify’, it’s possible that your AWS Amplify version is missing some dependencies, or the installation might have been incomplete. You can try reinstalling Amplify and its UI components:

    npm install aws-amplify @aws-amplify/ui-react

    2. Retrieving user email and phone:
    Since you’re already using the Authenticator component, you don’t necessarily need Auth to get the user’s email or phone number. The user object provided in the Authenticator already contains the necessary attributes, including email and phone_number, if they are available.

    3. Check if attributes exist:
    Ensure that the Cognito User Pool is configured to return the email and phone number as attributes. You can double-check this in the AWS Cognito console under Attributes and App client settings.

    Here’s an updated version of your component to include both email and phone number:

    function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div className="App">
          <p>Hey {user.username}, welcome to my channel, with auth!</p>
          {user.attributes && user.attributes.email ? (
            <h2>Email: {user.attributes.email}</h2>
          ) : (
            <h2>Email not available</h2>
          )}
          {user.attributes && user.attributes.phone_number ? (
            <h2>Phone: {user.attributes.phone_number}</h2>
          ) : (
            <h2>Phone number not available</h2>
          )}
          <button onClick={signOut}>Sign Out</button>
        </div>
      )}
    </Authenticator>
  );
}

export default withAuthenticator(App);

    This should work as long as the user has provided their email and phone number during registration. If they are missing, it might be due to the Cognito settings.

    Also, if you want to manually manage user attributes later, then re-try importing Auth after reinstalling the packages:

    import { Auth } from 'aws-amplify';

    Let me know if this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search