Implementasi Google SSO dengan Auth.js v5 di Next.js

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

1. Buka Google Cloud Console
2. Buat project baru atau pilih yang existing
3. Enable Google+ API
4. Buat OAuth 2.0 Client ID
5. 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();
}