Authenticate existing React application users by using Amazon Cognito and AWS Amplify UI

Create a user pool.

Create an Amazon Cognito user pool. Configure the user pool’s sign-in options and security requirements to fit your use case.

Add an app client.

Configure a user pool app client. This client is required for your application to interact with the Amazon Cognito user pool.

Install dependencies.

To install the aws-amplify and @aws-amplify/ui-react packages, run the following command from your application’s root directory:

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

Configure the user pool.

Based on the following example, create an aws-exports.js file and save in the src folder. The file should include the following information:

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;

Import and configure the Amplify service.

Add the Authenticator UI component.

To display the Authenticator UI component, add the following lines of code to the application’s entry point file (App.js):

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

Note: The example code snippet imports the Authenticator UI component and the Amplify UI styles.css file, which is required when using the component’s prebuilt themes.

The Authenticator UI component provides two return values:

See the following example component:

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

Note: For an example App.js file, see the Additional information section of this pattern.

(Optional) Retrieve session information.

After a user is authenticated, you can retrieve data from the Amplify client about their session. For example, you can retrieve the JSON web token (JWT) from a user’s session so that you can authenticate the requests from their session to a backend API.

See the following example of a request header that includes a JWT:

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();