O que é fluxo de autenticação?

O fluxo de autenticação é o processo de confirmação da identidade de um usuário e gerenciamento de seu acesso a determinadas partes de um aplicativo. Quando você trabalha com um aplicativo da web (como um site de mídia social), isso envolve verificar se o usuário é quem diz ser (login) e, em seguida, conceder-lhe acesso a determinados recursos.

Como funciona no React?

No React, quando você deseja lidar com a autenticação do usuário, geralmente interage com um servidor back-end que cuida do trabalho pesado. Veja como normalmente funciona:

1. Pontos finais de registro e login

• Ponto final de registro: Quando um novo usuário se inscreve, ele envia seus dados (como nome de usuário, e-mail, senha) para o servidor. O servidor então cria uma conta para eles.
• Endpoint de login: Quando um usuário existente faz login, ele envia seu nome de usuário e senha ao servidor. O servidor verifica se esses detalhes estão corretos.

2. Tokens: token de acesso e token de atualização

Após um login bem-sucedido, o servidor envia de volta dois tokens importantes:

• Token de acesso:

  • É como um passe de curto prazo que permite ao usuário acessar determinados recursos do aplicativo. Geralmente tem uma vida útil curta (neste caso, 5 minutos).
  • Toda vez que o usuário faz uma solicitação (como visualizar seu perfil ou postar algo), esse token é enviado ao servidor para provar que ele está logado.

• Token de atualização:

  • Isso é como um passe de backup usado quando o token de acesso expira. É mais duradouro.
  • Quando o token de acesso expirar (após 5 minutos), em vez de fazer o usuário fazer login novamente, o aplicativo pode usar o token de atualização para obter um novo token de acesso.

3. Armazenamento de tokens no navegador

Depois que o usuário faz login e recebe esses tokens, o aplicativo precisa armazená-los em algum lugar do dispositivo do usuário. É aqui que entra o localStorage:

• localStorage: Este é um recurso dos navegadores da web que permite armazenar dados (como tokens) no navegador do usuário.
  • Método setItem(): É usado para armazenar dados. Por exemplo, você armazena o token de acesso e o token de atualização com algo como localStorage.setItem('accessToken', tokenValue).
  • Método getItem(): Isso é usado para recuperar dados armazenados. Por exemplo, você obtém o token de acesso armazenado com algo como localStorage.getItem('accessToken').

4. Fazer solicitações com o token de acesso

Cada vez que o usuário faz algo que requer interação com o servidor (como postar um status ou visualizar suas mensagens), o aplicativo envia uma solicitação ao servidor com o token de acesso anexado no cabeçalho de autorização. Isso informa ao servidor que o usuário está logado e tem permissão para executar a ação.

5. Tratamento de tokens expirados

• Expiração do token de acesso: Se o servidor responder com um erro 401, significa que o token de acesso expirou. O aplicativo usará então o token de atualização para solicitar um novo token de acesso.

• Expiração do token de atualização: Se o token de atualização também expirou (o que pode acontecer depois de um longo tempo), o servidor responderá novamente com um erro 401. Neste ponto, o aplicativo redirecionará o usuário para a página de login, solicitando que ele faça login novamente para obter novos tokens.

6. Reenviando a solicitação com falha

Depois que o aplicativo obtiver um novo token de acesso usando o token de atualização, ele reenviará a solicitação original que falhou devido ao token expirado. Dessa forma, o usuário não sofre nenhuma interrupção.

Resumo

• Fluxo de autenticação: É assim que o aplicativo confirma quem você é e lhe dá acesso aos recursos.
• Token de acesso: Uma chave de curto prazo para acessar recursos no aplicativo. Expira rapidamente.
• Token de atualização: Uma chave de backup de longo prazo para obter um novo token de acesso quando o antigo expirar.
• localStorage: A maneira como o navegador armazena esses tokens no dispositivo do usuário.
• Cabeçalho de autorização: Onde o token de acesso é incluído nas solicitações ao servidor.
• Erro 401: Um sinal de que o token expirou e que o aplicativo precisa tomar uma ação (atualizar o token ou pedir ao usuário para fazer login novamente).

Esse fluxo garante que o usuário possa permanecer conectado e usar o aplicativo com segurança, sem precisar inserir novamente suas credenciais o tempo todo.