CODEWITHSUNDEEP
reactjsamazon-web-servicesauthenticationamazon-cognito
Romeo Joseph
Romeo Joseph

Reputation: 11

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.

Upvotes: 0

Views: 49

Answers (1)

Romeo Joseph
Romeo Joseph

Reputation: 11

            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'

Upvotes: 1

Related Questions