williamjayjay/nextjs14-auth-sign-signup-password-mailprovider-middleware

Utilizo NextJS, onde nesse projeto faço todo o fluxo de autenticação, proteção de rotas e acesso não autorizado, também é criado serviço de email autenticado e restauração de senha

Fluxo completo de login, cadastro, ativar email e resetar senha - Next14 (NextJS, Prisma, Hookform, Zod, JWT, Nodemailer, Toastify and more... )

Vamos construir juntos um fluxo de login,cadastro, reset de senha e ativação de email utilizando NextJS tanto no front quanto no back.
Está é apenas uma POC de um fluxo completo de autenticação usando nextjs.

🥶 Sobre o projeto

Desenvolvi esse projeto para reforçar meu conhecimento no fluxo de autenticação e proteção de rotas no nextjs.

Página Web:

Web: O front desenvolvido com NextJS, utiliza estilos com tailwind e os componentes com a biblioteca nextui.

🚀 Tecnologias

Principais tecnologias que utilizei para desenvolver esta aplicação

• NextAuth
• TailwindCSS
• Heroicons
• NextUI
• Prisma
• Check-Password-Strength
• HandlebarsJS
• JsonWebtToken
• Nodemailer
• Zod
• React-Hook-Form
• React Toastify

Guia de inicialização

Para instalar e configurar uma cópia local, siga estas etapas simples:

Prerequisitos

Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:

1. Clone o repositório:

   git clone https://github.com/williamjayjay/nextjs14-auth-sign-signup-password-mailprovider-middleware

2. Rodar a migration: Rode a migration do sqlite para gerar o schema do banco.

   bunx prisma migrate dev --name first migration

3. Instale os módulos:

bun i

4. Copie o .env de exemplo:

5. Gerar credênciais mailtrap: Gere o USER e PASS no exemplo com mailtrap através deste link aqui

6. Gere ou crie os tokens NEXTAUTH_SECRET e JWT_USER_ID_SECRET

7. Rodar a aplicação:

bun dev

Roadmap

• Cadastrar usuário.

  • Autenticar no email(no nosso exemplo com mailtrap).

• Fazer login.

• Resetar a senha.

• Proteger a rota /profile para permitir acesso apenas usuários com sessão ativa.

• Funcionamento do middleware para forçar o direcionamento á rota de login, quando a rota profile for acessada sem sessão ativa.

• Manter sessão ativa.

• Permitir deslogar usuário.

• Senha e Token do email criptografados.

WEB UX

UI e UX feita de forma simplista, foco da aplicação consiste em si na regra e no fluxo da api em NEXTJS.

Página de Entrada (SignIn)	Página de Cadastro (SignUp)

Página de Recuperação de Senha (Forgot Password)	Página de Redefinição de Senha (Reset Password)

Página de Perfil (Profile)	Email de Ativação

Email de Redefinição de Senha - MailTrap	Email de Ativação - MailTrap