npm i @aws-amplify/ui-react aws-amplify| Desenvolvedor de aplicativos | | Configure o grupo de usuários. | Com base no exemplo a seguir, crie um arquivo `aws-exports.js` e salve-o na pasta `src`. O arquivo deve incluir as seguintes informações:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| Desenvolvedor de aplicativos | | Importe e configure o serviço Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | Desenvolvedor de aplicativos | | Adicione o componente Authenticator UI. | Para exibir o componente `Authenticator` UI, adicione as seguintes linhas de código ao arquivo do ponto de entrada do aplicativo (`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';O trecho de código de exemplo importa o componente `Authenticator` UI e o arquivo “styles.css” do Amplify UI, que é necessário ao usar os temas desenvolvidos previamente do componente.O componente `Authenticator` UI fornece dois valores de retorno:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)Veja o componente do exemplo a seguir:function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}Para obter um arquivo `App.js` de exemplo, consulte a seção [Informações adicionais](#authenticate-react-app-users-cognito-amplify-ui-additional) deste padrão. | Desenvolvedor de aplicativos |
| (Opcional) Recupere as informações da sessão. | Depois que um usuário é autenticado, você pode recuperar dados do cliente Amplify sobre sua sessão. Por exemplo, você pode recuperar o token web JSON (JWT) da sessão de um usuário para autenticar as solicitações da sessão em uma API de backend.Veja o exemplo a seguir de um cabeçalho de solicitação que inclui um JWT:import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString(); | Desenvolvedor de aplicativos |
## Solução de problemas
| Problema | Solução |
| --- | --- |
| Novos usuários não podem se cadastrar no aplicativo. | Conforme indicado a seguir, certifique-se de que o grupo de usuários do Amazon Cognito esteja configurado para permitir que os usuários se registrem no próprio grupo de usuários:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| O componente Auth parou de funcionar após a atualização da versão 5 para a 6. | Na versão 6 do Amplify, a categoria `Auth` passou a utilizar uma abordagem funcional e parâmetros nomeados. Agora você deve importar o funcional APIs diretamente do `aws-amplify/auth` caminho. Para obter mais informações, consulte [Migrate from v5 to v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) na documentação do Amplify. |
## Recursos relacionados
+ [Introdução ao Amazon Cognito (site](https://aws.amazon.com/cognito/getting-started/))AWS
+ [Crie um novo aplicativo React](https://reactjs.org/docs/create-a-new-react-app.html) (documentação do React)
+ [O que é o Amazon Cognito?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (documentação do Amazon Cognito)
+ [Amplify UI library](https://ui.docs.amplify.aws/) (documentação do Amplify)
## Mais informações
O arquivo `App.js` deve conter o seguinte código:
```
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}