Como criar rotas protegidas em React Native com Expo Router

Ter controle total do fluxo de autenticação é poder

O verdadeiro diferencial de apps profissionais está em dominar a arquitetura do login, logout e das permissões. Aqui você aprende a estruturar rotas protegidas, a persistir o estado do usuário após autenticação e a criar seu próprio contexto, tornando o código limpo, manutenível e escalável – pronto para projetos profissionais.

Organize o projeto: estrutura de pastas enxuta e eficiente

Separe o que importa desde o começo

Inicie com npx create-expo-app usando o template com Navigation (TypeScript), garantindo que o Expo Router já venha configurado. Limpe a raiz do projeto: remova as pastas “components”, “constants” e arquivos desnecessários em assets, deixando apenas o que realmente será usado.

Centralize a lógica dentro da pasta src

Crie uma pasta “src” na raiz e direcione o tsconfig.json para reconhecer imports relatvos nela (“@/”). Isso deixa claro: tudo que você cria fica em “src”, tudo que configura fica na raiz. Dentro de “src”, crie a pasta “app”. O nome é obrigatório para o Expo Router funcionar corretamente.

Primeiras rotas: criando públicas e privadas

Como estruturar suas telas

Dentro de src/app , crie duas entradas: uma pasta (protected) agrupando as rotas privadas e um arquivo signin.tsx que servirá como tela de login. O Expo Router usa a convenção de pastas entre parênteses para agrupar rotas, mas não altera o path visível da URL, deixando a navegação mais limpa.

Faça o login funcionar: lógica de acesso básica

Testando o fluxo manualmente

Simule o comportamento protegendo as rotas: crie um arquivo _layout.tsx tanto em src/app (controle geral) quanto em src/app/(protected) (controle das privadas). Use o componente Stack de Expo Router para definir a hierarquia, e implemente verificações de autenticação usando constantes (isLoggedIn) para redirecionar usuários não autenticados via redirect() .

Use contextos e hooks para autenticação global

Zero dependência, mais poder ao seu código

Crie a pasta contexts para seu contexto de autenticação. No AuthContext : use createContext e useState para guardar e distribuir isLoggedIn, signIn, signOut. Depois, crie um hook useAuth (dentro de hooks ) para consumir esse contexto em qualquer lugar do app sem repetição de import.

Envolva todos os layouts internos com AuthProvider

Assim a autenticação funciona em toda a árvore de rotas

Na raiz do seu layout (src/app/_layout.tsx), adicione <AuthProvider> ao redor do Stack ou Slot do router. Isso torna o contexto disponível para todas as rotas do app, privadas ou não.

Implemente navegação condicional: redirecionando com segurança

No _layout.tsx de rotas protegidas, use useAuth() e faça o redirect('/signin') se isLoggedIn for falso. Isso impede acessos não autorizados e mantém o fluxo protegido sem gambiarras.

Personalize suas telas: foco total no fluxo de autenticação

Crie as telas index (rota protegida) e signin (rota pública) com componentes básicos como Button e View , simplificando para manter o foco na navegação e não nos detalhes visuais neste início.

Faça login e logout: métodos claros e sem mistério

No AuthContext , implemente as funções signIn() (define isLoggedIn para true) e signOut() (volta para false). Use-as nos botões das telas correspondentes para acionar mudanças de usuário logado e deslogado.

Persista o estado de login: mesmo após fechar o app

Nenhum usuário quer logar toda hora

Leve a UX para outro nível salvando o estado de login localmente. Use AsyncStorage do React Native para guardar o token de autenticação. Ao iniciar o AuthProvider, verifique se o token existe e acione isLoggedIn conforme apropriado.

Otimize atualizações: evite renders desnecessários

Use React.memo , useMemo ou useCallback nos componentes e funções expostas pelo contexto. Assim, mudanças de autenticação não causam renders em toda a árvore, mantendo performance e usabilidade.

Teste local e no emulador: bugs se escondem no básico

Sempre rode sua aplicação com npx expo start e teste tanto no simulador iOS quanto Android. Verifique se o fluxo está intuitivo: sem login, só signin visível; logou, redireciona; deslogou, volta ao signin instantâneo.

Pronto para produção: padronize e documente

Com toda a estrutura pronta, registre os fluxos, crie testes unitários nos hooks e gere documentação da arquitetura para garantir onboarding de novos devs no projeto.

Resumo final: o que você ganhou neste guia

Agora você domina: (1) organização prática de pastas e arquivos no Expo Router, (2) contexto e hooks próprios para autenticação, (3) redirecionamento seguro e eficiente, (4) persistência do estado do usuário no dispositivo e (5) método universal para proteger qualquer rota React Native por anos sem depender de bibliotecas externas.

Vá além: conecte-se com a comunidade e compartilhe

Para não perder dicas e guias práticos como esse, inscreva-se no canal de referência em React Native no Youtube: <a href="https://www.youtube.com/@DevDoido">/DevDoido</a> e faça parte do universo de desenvolvedores profissionais que criam apps transparentes, seguros e prontos para produção.

Perguntas frequentes

Fluxo de autenticação prático: por onde?

Login → sessão → refresh → logout → erros. Desenhe estados antes do código.

OAuth social?

Depois do email/senha estável, se o ICP pedir.

Supabase Auth?

Bom atalho com entendimento do fluxo.

Segurança mínima?

HTTPS, cookies seguros, rate limit.

Continue explorando