Este artigo apresenta um tutorial de como implementar um fluxo de rotas protegidas em uma aplicação React Native utilizando o Expo Router. O processo inclui a criação de um projeto, a configuração da estrutura de pastas, a implementação da autenticação e a persistência do estado do usuário.
Introdução
Neste artigo, abordaremos como implementar um fluxo de rotas protegidas em uma aplicação React Native usando o Expo Router. O objetivo é criar um contexto de autenticação, persistir o estado do usuário no dispositivo e criar uma estrutura pronta para ser utilizada em projetos futuros.
Configuração do Projeto
Primeiro, é necessário criar o projeto. No terminal, navegue até a pasta desejada e execute o comando:npx create-expo-app@latest --template navigation. Isso abrirá opções para escolher a configuração. Selecione a opção 'navigation(TypeScript)', que já vem com o Expo Router e TypeScript configurados.
Após a criação, abra o projeto no VS Code e organize a estrutura de pastas. Remova as pastas não utilizadas e crie uma nova pasta chamada 'src'. Dentro dela, adicione uma pasta 'app', que será onde o Expo Router buscará as rotas.
Estruturação das Rotas
Crie uma pasta chamada 'protected' dentro da pasta 'app' para agrupar as rotas protegidas. Dentro dela, crie um arquivo 'index.tsx' que será a porta de entrada para a rota protegida. Nesta rota, adicione um botão para 'sair'.
Em seguida, crie um arquivo 'signin.tsx' para permitir que o usuário faça o login, adicionando um botão com o título 'entrar'. Se o usuário não estiver autenticado, deverá ser redirecionado para a tela de login.
Gerenciamento de Layouts e Autenticação
Para gerenciar as rotas, crie um arquivo de layout de protegido com a função 'ProtectedLayout', que utiliza o stack do Expo Router. Esta função deve verificar se o usuário está logado. Use uma constante 'isLoging' para simular o estado de autenticação e redirecionar o usuário de acordo.
Implemente um contexto de autenticação criando uma nova pasta chamada 'contexts'. Dentro dela, adicione um arquivo 'alfContext.tsx', onde o estado de autenticação será gerenciado, assim como as funções de 'sign in' e 'sign out'.
Persistência do Estado
Utilize o Async Storage para garantir que as informações de autenticação do usuário sejam persistidas no dispositivo. Instale a biblioteca usando expo install @react-native-async-storage/async-storage. Crie funções para armazenar e recuperar o estado de autenticação do usuário no 'alfContext.tsx'.
Adicione um estado para verificar se a aplicação está pronta para exibir o conteúdo visual. Use o 'useEffect' para chamar a função de carregamento do estado de autenticação no início da aplicação.
Conclusão
Com isso, você terá um fluxo de autenticação totalmente funcional com rotas protegidas e persitência de estado. A estrutura que criamos é adaptável e poderá ser utilizada em futuros projetos. Pergunte-se sobre os maiores desafios que enfrentou em autenticação e, se necessário, solicite o código completo do projeto!