npm i @aws-amplify/ui-react aws-amplify| App developer | | 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:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| App developer | | Import and configure the Amplify service. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | App developer | | 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`):
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 { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';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 AWS documentation website for more details\]](http://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)See the following example component:function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}For an example `App.js` file, see the [Additional information](#authenticate-react-app-users-cognito-amplify-ui-additional) section of this pattern. | App developer |
| (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(); | App developer |
## Troubleshooting
| Issue | Solution |
| --- | --- |
| New users can’t sign up for the application. | As follows, make sure that your Amazon Cognito user pool is configured to allow users to sign themselves up to be in the user pool:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| Auth component stopped working after upgrading from v5 to v6. | The `Auth` category has moved to a functional approach and named parameters in Amplify v6. You must now import the functional APIs directly from the `aws-amplify/auth` path. For more information, see [Migrate from v5 to v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) in the Amplify documentation. |
## Related resources
+ [Getting started with Amazon Cognito](https://aws.amazon.com/cognito/getting-started/) (AWS website)
+ [Create a new React app](https://reactjs.org/docs/create-a-new-react-app.html) (React documentation)
+ [What is Amazon Cognito?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Amazon Cognito documentation)
+ [Amplify UI library](https://ui.docs.amplify.aws/) (Amplify documentation)
## Additional information
The `App.js` file should contain the following code:
```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
return (
Welcome {user.username}
Your token is: {token}