Skip to content

šŸ” Fluxo completo de autenticação com React, utilizando Firebase Auth, React Hook Form, Yup, React Router e Styled Components. Estrutura limpa, responsiva e reutilizĆ”vel — ideal para projetos com cadastro e login de usuĆ”rios.

Notifications You must be signed in to change notification settings

dig-ie/react-firebase-auth-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Ā 

History

60 Commits
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 

Repository files navigation

šŸ“˜ Cadastro, Login e PĆ”gina do UsuĆ”rio - Aplicação React

Fluxo completo de autenticação de usuÔrios utilizando React, Firebase Auth, React Router Dom e Styled Components, com base em um protótipo visual do Figma da DIO.

🌐 Deploy da aplicação:
https://react-registration-login-user-home-home.vercel.app/


šŸ“„ PĆ”ginas

  • Home
  • Cadastro
  • Login
  • PĆ”gina do UsuĆ”rio

Essas pÔginas implementam formulÔrios, validações e navegação utilizando:

  • react-hook-form para controle de formulĆ”rios
  • yup para validação dos dados
  • react-router-dom para rotas
  • firebase para autenticação na nuvem
  • styled-components para estilização baseada no protótipo Figma

āš™ļø Funcionalidades

  • āœ… Cadastro de usuĆ”rios
  • šŸ” Login com Firebase Authentication
  • šŸ”„ Navegação entre rotas com react-router-dom
  • 🧪 Validação de campos com yup

šŸ–¼ļø Exemplo de Validação:

image

🧾 UsuÔrio Cadastrado com Sucesso (Firebase):

usuƔrio adicionado

šŸ™Œ Após o Login (UsuĆ”rio Autenticado):

image


šŸ“š Aprendizados

āœ… FormulĆ”rios com React Hook Form

  • Controle eficiente do estado dos inputs

āœ… Validação com Yup

  • Validação baseada em esquemas de dados

āœ… Autenticação com Firebase

  • Cadastro e login via Firebase Authentication

āœ… Navegação com React Router Dom

  • Rotas declarativas entre pĆ”ginas

āœ… Reutilização de Componentes

  • Criação e reaproveitamento de componentes com styled-components

šŸš€ Instalação e Execução

Clone o repositório ou baixe os arquivos do projeto.

1. Instale as dependĆŖncias:

yarn

šŸ”— Desenvolvido por dig-ie

About

šŸ” Fluxo completo de autenticação com React, utilizando Firebase Auth, React Hook Form, Yup, React Router e Styled Components. Estrutura limpa, responsiva e reutilizĆ”vel — ideal para projetos com cadastro e login de usuĆ”rios.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published