Como criar rotas protegidas em React Native com Expo Router
A proteger rotas, criar contexto de autenticação e estruturar pastas no seu App React Native usando Expo Router. Guia prático, rápido e definitivo.
Por que isso é importante
Guia prático de auth: estados primeiro — OAuth social antes do básico é teatro.
Leitura relacionada: Supabase tutorial · Curso Supabase · Curso Next.js · Cursos CrazyStack.
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.
Atenção
Pasta bagunçada resulta em código caótico. Defina a pasta src como coração do projeto para manter lógica, contextos e hooks separados dos arquivos de configuração.
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.
Dica ninja
Defina aliases de importação no tsconfig: aumente produtividade ao permitir “@/minhapasta”.
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.
Atenção
Apenas arquivos index.tsx são reconhecidos como entrada de rota em cada grupo; nunca erre o nome!
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() .
Importante
A lógica só faz sentido se o usuário for redirecionado para signin quando não estiver autenticado — não ignore o retorno do 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.
Evite erro crítico
Jamais atualize o estado de autenticação diretamente de múltiplos componentes; use sempre o contexto para evitar bugs e inconsistência.
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
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.
Alerta
Se o redirect não ocorrer no return do layout, usuários podem ver flashes da tela protegida antes de serem redirecionados — sempre condicione a renderização ao estado!
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.
Dica rápida
Use estilização inline rápida apenas nos protótipos; depois, migre para estilos reusáveis conforme o app cresce.
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.
Atenção
Tokens em AsyncStorage não são infalíveis — evite guardar dados sensíveis em texto puro. Use sempre tokens, nunca usuários inteiros!
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.
Erros comuns
Não se esqueça de reiniciar o app após alterar persistência de autenticação; cache e hot reload podem camuflar bugs!
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.
Próximo passo
Experimente a estrutura neste ou em futuros projetos! E se quiser dominar totalmente React e Node no mundo real, veja nosso curso completo.
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: /DevDoido 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
Continue: Supabase tutorial · Curso Supabase · Curso Next.js · Cursos CrazyStack.
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.