O que voce vai aprender neste tutorial
✓ Como funciona o OAuth
✓ Configuracao do NextAuth.js
✓ Configuracao do provedor Google
✓ Gerenciamento de sessao
✓ Rotas protegidas
Step 1: Configuracao
npx create-next-app@latest oauth-demo --typescript
cd oauth-demo
npm install next-auth
Step 2: Obtendo credenciais do Google
1. Google Cloud Console (console.cloud.google.com)
2. Criar novo projeto
3. APIs e Servicos → Credenciais
4. Criar ID do cliente OAuth 2.0
5. URI de redirecionamento autorizado: http://localhost:3000/api/auth/callback/google
Step 3: Configuracao do NextAuth
// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
const handler = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
callbacks: {
async session({ session, token }) {
session.user.id = token.sub;
return session;
},
},
});
export { handler as GET, handler as POST };
Step 4: Variaveis de ambiente
# .env.local
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key
Step 5: SessionProvider
// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return (
<html>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
Step 6: Botao de login
// components/AuthButton.tsx
'use client';
import { signIn, signOut, useSession } from 'next-auth/react';
export function AuthButton() {
const { data: session } = useSession();
if (session) {
return (
<div>
<p>Bem-vindo, {session.user?.name}</p>
<button onClick={() => signOut()}>Sair</button>
</div>
);
}
return <button onClick={() => signIn('google')}>Entrar com Google</button>;
}
Step 7: Pagina protegida
// app/dashboard/page.tsx
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';
export default async function Dashboard() {
const session = await getServerSession();
if (!session) {
redirect('/api/auth/signin');
}
return <h1>Bem-vindo, {session.user?.name}</h1>;
}
Resumo
Com NextAuth.js voce pode implementar autenticacao OAuth facilmente. Alem do Google, suporta muitos outros provedores como GitHub, Twitter e mais.
← Voltar para a lista