Lo que aprenderas en este tutorial
✓ Funcionamiento de OAuth
✓ Configuracion de NextAuth.js
✓ Configuracion del proveedor de Google
✓ Gestion de sesiones
✓ Rutas protegidas
Step 1: Configuracion
npx create-next-app@latest oauth-demo --typescript
cd oauth-demo
npm install next-auth
Step 2: Obtener credenciales de Google
1. Google Cloud Console (console.cloud.google.com)
2. Crear nuevo proyecto
3. APIs y servicios → Credenciales
4. Crear ID de cliente OAuth 2.0
5. URI de redireccion autorizado: http://localhost:3000/api/auth/callback/google
Step 3: Configuracion de 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: Variables de entorno
# .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: Boton de inicio de sesion
// 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>Bienvenido, {session.user?.name}</p>
<button onClick={() => signOut()}>Cerrar sesion</button>
</div>
);
}
return <button onClick={() => signIn('google')}>Iniciar sesion con 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>Bienvenido, {session.user?.name}</h1>;
}
Resumen
NextAuth.js permite implementar autenticacion OAuth facilmente. Ademas de Google, es compatible con muchos proveedores como GitHub, Twitter y mas.
← Volver a la lista