marco/intro-next-auth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
7 commits 1 branch 0 tags 316 KiB
  • TypeScript 86.9%
  • CSS 11.4%
  • JavaScript 1.7%
Find a file
Exact
Marco Andrade d1bd45b202 Add form handling with validation using react-hook-form and Zod
2025-11-10 19:15:43 -04:00
public Initial commit 2025-10-23 13:48:38 -04:00
src Add form handling with validation using react-hook-form and Zod 2025-11-10 19:15:43 -04:00
.env.example Add .env.example file with environment variable configurations 2025-10-23 19:29:36 -04:00
.gitignore Add .env.example file with environment variable configurations 2025-10-23 19:29:36 -04:00
components.json Initial commit 2025-10-23 13:48:38 -04:00
eslint.config.mjs Initial commit 2025-10-23 13:48:38 -04:00
next.config.ts Initial commit 2025-10-23 13:48:38 -04:00
package-lock.json Add form handling with validation using react-hook-form and Zod 2025-11-10 19:15:43 -04:00
package.json Add form handling with validation using react-hook-form and Zod 2025-11-10 19:15:43 -04:00
postcss.config.mjs Initial commit 2025-10-23 13:48:38 -04:00
README.md Update README.md for consistency and clarity in project setup instructions 2025-10-23 19:42:18 -04:00
tsconfig.json Initial commit 2025-10-23 13:48:38 -04:00

README.md

Tutorial para autenticação em uma API REST JWT com Nextjs 15 e Next-auth

Criar o projeto Nextjs 15:

npx create-next-app@15 intro-next-auth

Instalar next-auth:

npm install next-auth

Gerar o secret no arquivo .env.local:

npx auth secret

Configurar o .env.local:

AUTH_SECRET=""
NEXTAUTH_SECRET=""

# Para uso em Client Side
NEXT_PUBLIC_API_URL=https://rad3-api.app.fslab.dev

# Para uso em Server Side (em produção deve ser o nome do container)
API_URL_SERVER_SIDED=https://rad3-api.app.fslab.dev

O arquivo app/auth/[...nextauth]/route.ts é responsável pela autenticação (usa o Server Side).

Tela de login: app/(no-auth)/login/page.tsx:

  1. O usuário acessa /login e preenche SIAPE e senha.
  2. O formulário chama signIn("credentials", ...) do NextAuth, que faz POST para a API /login definida em API_URL_SERVER_SIDED.
  3. Se as credenciais estiverem corretas, o backend retorna os dados do usuário e um token JWT.
  4. O NextAuth salva os dados no token JWT e compartilha via contexto de sessão.
  5. O usuário é redirecionado para /dashboard.
  6. Para sair, basta usar signOut e retorna para /login.
  7. Veja src/types/next-auth.d.ts para o tipo do retorno do usuário completo.

Exemplo de logout (pode ser usado no menu, por exemplo):

useEffect(() => {
	signOut({ callbackUrl: "/login" });
}, []);

Crie pastas src/app/(auth)/... para páginas protegidas e src/app/(no-auth)/... para páginas não protegidas.

As páginas que estão em src/app/(auth)/... serão protegidas a partir do src/app/(auth)/layout.tsx.

As páginas que estão em src/app/(no-auth)/... serão de acesso público e não precisam de proteção.

Crie o componente SessionWrapper (components/SessionWrapper.tsx) para compartilhar sessão, use-o no arquivo src/app/layout.tsx, assim todas as páginas podem ter acesso aos dados da sessão.

Exemplo de captura de dados da sessão:

import { useSession } from "next-auth/react";
export default function DashboardPage() {
	const { data: session } = useSession();
	return <div>Bem-vindo, {session?.user?.nome}!</div>;
}

Crie um arquivo centralizado para as requisições, com configuração opcional para uso do token da sessão. O exemplo está em src/lib/fetchData.ts. Em src/app/(auth)/dashboard/page.tsx temos um exemplo de uso.

Lidando com Refresh token

O exemplo já lida com refresh token. Ao capturar dados da sessão com useSession() o Next-auth verifica se o acesstoken é válido, e caso contrário faz a renovação.

Dicas

  • Use o Toast para feedback de login/logout.
  • Use um componente de loading para indicar o carregamento de dados e páginas.
  • Consulte o arquivo app/auth/[...nextauth]/route.ts e src/types/next-auth.d.ts para ajustar os campos do usuário conforme sua API.

Referências