Como Construir Rotas Protegidas no React Native com Expo Router
implementar rotas privadas, controle de autenticação e persistência de sessão sem libs externas usando Expo Router. Estrutura fácil, dicas de quem cria apps reais e tudo pronto para
Por que isso é importante
Auth no React: estados primeiro — lib sem modelo mental vira incidente.
Leitura relacionada: Curso Supabase · Curso Next.js · Curso React · Cursos CrazyStack.
Controle total das rotas do seu app
Poucos sabem — mas proteger rotas nunca foi tão simples! Você pode criar rotas públicas, privadas e fluxo de login e logout no React Native usando só Expo Router, com persistência salva direto no dispositivo do usuário. Isso significa: segurança e experiência de usuário melhores, e uma estrutura pronta para escalar.
Motivo nº 1 que provoca falhas em apps: falta de proteção
Deixar telas sensíveis abertas a qualquer um é o problema oculto de muitos apps mobile. Se um usuário não autenticado acessa informações dos outros, seu projeto perde confiança imediato.
Atenção
Não basta esconder um botão ou tirar links do menu: em apps React Native, só bloquear a UI ainda deixa rotas expostas para quem conhece os caminhos internos.
O que você vai construir (e como!)
Você vai criar um contexto de autenticação do zero, que controla se o usuário está logado ou não, sem precisar instalar pacotes externos. O login e o estado de autenticação serão salvos (persistidos) localmente, garantindo boas práticas de UX na retomada e navegação entre telas protegidas.
Passo fundamental
Todo o fluxo é baseado em hooks nativos, contextos, bloqueio de rotas dinâmico via layouts e um padrão de pasta simples que facilita manutenção e expansão do app.
Estrutura enxuta de pastas: só o essencial
Uma estrutura clara deixa tudo prático. Separe só três pastas: contexts (para autenticação), app (rotas públicas e privadas) e utils (helpers para storage). Evite complexidade: quanto menos camadas, mais fácil de manter e adaptar para apps maiores.
Contexto de Autenticação feito à mão
Crie um arquivo <code>AuthContext.tsx</code> que exporta o contexto, provider e hooks. Esse provider lida com o estado do usuário, login, logout e checa o token salvo. Você ganha controle real e consegue personalizar para login social, biometria ou padrões de segurança do seu app.
Atenção
Não use bibliotecas de autenticação pronta: dominar o contexto da autenticação te prepara para qualquer demanda futura (e reduz bugs misteriosos).
Persistência de usuário: salve a sessão
Sempre que um usuário logar, salve a sessão com <code>AsyncStorage</code> ou <code>expo-secure-store</code> . Assim, ao fechar e abrir o app, a sessão é restaurada com segurança.
Evite perda de login!
Ignorar persistência frustra o usuário e pode causar bugs estranhos de navegação ou logout repentino. Faça disso um hábito.
Controle dinâmico de rotas: layouts protegidos
Use os layouts do Expo Router para checar o contexto de autenticação antes de renderizar rotas privadas. Se não tiver login, redirecione direto pro login e bloqueie qualquer tentativa de navegar "por fora".
Exemplo prático
No layout da área privada, coloque um <code>useEffect</code> monitorando se o usuário está autenticado. Caso não esteja, aplique <code>router.replace('/login')</code> .
Macete: loading antes de liberar rotas
Exiba uma tela de loading enquanto verifica o estado de autenticação. Isso impede piscar telas erradas em dispositivos lentos.
Cuidado
Renderize a árvore de rotas só depois de terminar a verificação de sessão. Caso contrário, dados privados podem vazar por poucos milissegundos!
Login, logout, registro: facilidade absoluta
Os métodos de login/logout ficam centralizados no contexto. Em qualquer tela, basta chamar <code>signIn</code> , <code>signOut</code> ou <code>register</code> do contexto — navegação e persistência já são resolvidas juntos.
O que NÃO usar (e por quê)
Evite bibliotecas como Redux ou react-query só para guardar estado de login. Isso atrapalha performance, aumenta a curva de aprendizado e dificulta debugging. O contexto é leve, flexível e tem performance real mesmo em apps grandes.
Dica técnica
Use Redux apenas quando o estado global for indispensável para muitos módulos e micro-features — na maioria dos apps, o contexto já resolve tudo.
Testando o fluxo: simule hackeamentos
Teste o app tentando acessar rotas privadas sem login. Use link direto, reinicie o app, force navegação... se tudo ficou certo, o usuário nunca pula o login!
Macete de segurança
Nunca armazene o token de autenticação em variáveis JS simples — use sempre storage seguro.
Pronto para escalar: padrões reutilizáveis
Esse setup serve para qualquer app em React Native. Bastam ajustes pequenos para login social, múltiplos papéis de usuário ou autenticação por biometria, sem mudar toda a base.
Conselho de projeto
Roles, permissões e validações podem ser encapsulados no mesmo contexto — mantenha tudo organizado para não duplicar lógica entre telas.
Desafios e alternativas
Precisa de MFA, log de auditoria ou integração com provedores externos? Basta adaptar o provider e seguir o mesmo padrão, usando hooks extras ou middlewares na navegação.
Seu próximo app pronto para produção
Com esse fluxo, você pode lançar projetos profissionais e seguros, com experiência fluida, estado persistente e controle zero “gambiarras”. Essa estrutura está pronta para copiar, personalizar e aplicar agora!
Aprenda sempre além do tutorial
Quer aprender com exemplos reais, códigos comentados e macetes exclusivos? Assista ao vídeo no canal Dev Doido e acompanhe séries semanais para deixar seu portfólio “aprovado” em qualquer vaga de mobile!
Perguntas frequentes
Fluxo de auth no React: checklist?
Login, sessão, refresh, logout, erros. Desenhe estados antes do código.
JWT onde?
Com ciência de revogação e storage.
Libs?
Ajudam. Entendimento não é opcional.
Testes?
Happy path + expiração + logout.
Continue explorando
Continue: Curso Supabase · Curso Next.js · Curso React · Cursos CrazyStack.