Auth.js (dulunya NextAuth.js) v5 membawa banyak perubahan dari versi sebelumnya. Artikel ini membahas cara implementasi Google SSO yang benar di Next.js App Router.
Install Dependencies
npm install next-auth@beta
Setup Google OAuth
- Buka Google Cloud Console
- Buat project baru atau pilih yang existing
- Enable Google+ API
- Buat OAuth 2.0 Client ID
- Set authorized redirect URI:
https://yourdomain.com/api/auth/callback/google
Konfigurasi Auth.js
Buat file src/lib/auth.ts:
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
Google({
clientId: process.env.AUTH_GOOGLE_ID!,
clientSecret: process.env.AUTH_GOOGLE_SECRET!,
}),
],
callbacks: {
session({ session, token }) {
if (token.sub) session.user.id = token.sub;
return session;
},
},
});
API Route
Buat src/app/api/auth/[...nextauth]/route.ts:
import { handlers } from "@/lib/auth";
export const { GET, POST } = handlers;
Middleware
Penting: Di Auth.js v5, middleware TIDAK bisa mengakses database karena berjalan di Edge Runtime. Gunakan cookie-based check saja:
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const token = request.cookies.get("authjs.session-token");
if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
return NextResponse.redirect(new URL("/login", request.url));
}
return NextResponse.next();
}