NextAuth.js: Authentication untuk Next.js

# Instal NextAuth.js
npm install next-auth

# Untuk database adapter (opsional, jika menggunakan database)
npm install @prisma/client prisma @auth/prisma-adapter

# Untuk Next.js App Router (v13+)
# Sudah termasuk dalam next-auth@latest

# NextAuth.js
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=rahasia-super-panjang-dan-acak-untuk-produksi

# Google OAuth (dapatkan dari console.cloud.google.com)
GOOGLE_CLIENT_ID=xxxxxxxxxxxx-xxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxxxxxxxxxx

# GitHub OAuth (dapatkan dari github.com/settings/developers)
GITHUB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxx
GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Database URL (jika menggunakan Prisma)
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import CredentialsProvider from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
import bcrypt from 'bcryptjs';

const handler = NextAuth({
  // Adapter untuk menyimpan user/session di database
  adapter: PrismaAdapter(prisma),

  // Authentication providers
  providers: [
    // Google OAuth
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          prompt: 'consent',
          access_type: 'offline',
          response_type: 'code',
        },
      },
    }),

    // GitHub OAuth
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),

    // Credentials (username/password)
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'email',
          placeholder: 'email@kamu.com',
        },
        password: {
          label: 'Password',
          type: 'password',
        },
      },
      async authorize(credentials) {
        // Cari user di database
        const user = await prisma.user.findUnique({
          where: { email: credentials.email },
        });

        if (!user || !user.hashedPassword) {
          throw new Error('Email atau password salah');
        }

        // Verifikasi password
        const isValid = await bcrypt.compare(
          credentials.password,
          user.hashedPassword
        );

        if (!isValid) {
          throw new Error('Email atau password salah');
        }

        // Kembalikan user object (akan masuk ke jwt callback)
        return {
          id: user.id,
          name: user.name,
          email: user.email,
          image: user.image,
          role: user.role,
        };
      },
    }),
  ],

  // Session strategy
  session: {
    strategy: 'jwt', // 'jwt' atau 'database'
    maxAge: 30 * 24 * 60 * 60, // 30 hari
    updateAge: 24 * 60 * 60, // 24 jam
  },

  // Halaman custom
  pages: {
    signIn: '/auth/login',       // Custom login page
    signOut: '/auth/logout',     // Custom logout page
    error: '/auth/error',        // Error page
    newUser: '/auth/register',   // Redirect new user setelah sign up
  },

  // Callbacks
  callbacks: {
    // 1. Sign In Callback — kontrol apakah user boleh login
    async signIn({ user, account, profile }) {
      if (account.provider === 'google') {
        // Contoh: hanya izinkan email tertentu
        // return profile.email.endsWith('@beebane.com');
        return true;
      }
      if (account.provider === 'credentials') {
        return !!user; // Pastikan authorize() mengembalikan user
      }
      return true;
    },

    // 2. JWT Callback — kustomisasi isi JWT token
    async jwt({ token, user, account, profile, trigger }) {
      // Saat pertama kali sign in
      if (user) {
        token.id = user.id;
        token.role = user.role || 'user';
      }

      // Refresh token saat session di-update
      if (trigger === 'update') {
        const refreshedUser = await prisma.user.findUnique({
          where: { id: token.id },
        });
        token.role = refreshedUser.role;
      }

      return token;
    },

    // 3. Session Callback — kustomisasi data yang dikirim ke client
    async session({ session, token }) {
      if (token) {
        session.user.id = token.id;
        session.user.role = token.role;
      }
      return session;
    },

    // 4. Redirect Callback — kustomisasi URL redirect
    async redirect({ url, baseUrl }) {
      // Redirect ke halaman yang diminta setelah login
      if (url.startsWith('/')) return `${baseUrl}${url}`;
      if (new URL(url).origin === baseUrl) return url;
      return baseUrl;
    },
  },

  // Events — hook untuk berbagai tahap autentikasi
  events: {
    async signIn({ user, account, profile }) {
      console.log(`User ${user.email} logged in via ${account.provider}`);
    },
    async signOut({ token }) {
      console.log(`User ${token.email} logged out`);
    },
    async createUser({ user }) {
      console.log(`New user created: ${user.email}`);
      // Kirim email selamat datang, dll.
    },
    async linkAccount({ user, account }) {
      console.log(`Account ${account.provider} linked to ${user.email}`);
    },
  },

  // Debug mode (matikan di production!)
  debug: process.env.NODE_ENV === 'development',
});

export { handler as GET, handler as POST };

import { SessionProvider } from '@/components/SessionProvider';
import './globals.css';

export const metadata = {
  title: 'Aplikasi Saya',
  description: 'Dengan NextAuth.js authentication',
};

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

'use client';

import { SessionProvider as NextAuthSessionProvider } from 'next-auth/react';

export function SessionProvider({ children }) {
  return (
    <NextAuthSessionProvider>
      {children}
    </NextAuthSessionProvider>
  );
}

Langkah-langkah setup Google OAuth:

1. Buka https://console.cloud.google.com
2. Buat project baru atau pilih project yang ada
3. Aktifkan "Google+ API" di Library
4. Buka "Credentials" → "Create Credentials" → "OAuth client ID"
5. Pilih "Web application"
6. Tambahkan Authorized redirect URIs:
   - http://localhost:3000/api/auth/callback/google
   - https://domain-anda.com/api/auth/callback/google
7. Salin Client ID dan Client Secret ke .env.local

Langkah-langkah setup GitHub OAuth:

1. Buka https://github.com/settings/developers
2. Klik "New OAuth App"
3. Isi form:
   - Application name: Nama aplikasi Anda
   - Homepage URL: http://localhost:3000
   - Authorization callback URL: http://localhost:3000/api/auth/callback/github
4. Klik "Register application"
5. Generate Client Secret
6. Salin Client ID dan Client Secret ke .env.local

import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import FacebookProvider from 'next-auth/providers/facebook';
import TwitterProvider from 'next-auth/providers/twitter';
import AppleProvider from 'next-auth/providers/apple';
import DiscordProvider from 'next-auth/providers/discord';
import EmailProvider from 'next-auth/providers/email';

// Di dalam NextAuth config:
providers: [
  // OAuth Providers
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  }),

  GitHubProvider({
    clientId: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    // Scope tambahan untuk mengakses data lebih banyak
    // profile(profile) {
    //   return {
    //     id: profile.id.toString(),
    //     name: profile.name || profile.login,
    //     email: profile.email,
    //     image: profile.avatar_url,
    //   };
    // },
  }),

  FacebookProvider({
    clientId: process.env.FACEBOOK_CLIENT_ID,
    clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
  }),

  TwitterProvider({
    clientId: process.env.TWITTER_CLIENT_ID,
    clientSecret: process.env.TWITTER_CLIENT_SECRET,
    version: '2.0',
  }),

  AppleProvider({
    clientId: process.env.APPLE_CLIENT_ID,
    clientSecret: process.env.APPLE_CLIENT_SECRET,
  }),

  DiscordProvider({
    clientId: process.env.DISCORD_CLIENT_ID,
    clientSecret: process.env.DISCORD_CLIENT_SECRET,
  }),

  // Magic Link / Passwordless
  EmailProvider({
    server: {
      host: process.env.EMAIL_SERVER_HOST,
      port: process.env.EMAIL_SERVER_PORT,
      auth: {
        user: process.env.EMAIL_SERVER_USER,
        pass: process.env.EMAIL_SERVER_PASSWORD,
      },
    },
    from: process.env.EMAIL_FROM,
    // maxAge: 24 * 60 * 60, // Token berlaku 24 jam
  }),
],

'use client';

import { signIn } from 'next-auth/react';

function LoginButtons() {
  return (
    <div className="login-buttons">
      <button
        onClick={() => signIn('google', { callbackUrl: '/dashboard' })}
        className="btn-google"
      >
        🔵 Masuk dengan Google
      </button>

      <button
        onClick={() => signIn('github', { callbackUrl: '/dashboard' })}
        className="btn-github"
      >
        ⚫ Masuk dengan GitHub
      </button>

      <button
        onClick={() => signIn('facebook', { callbackUrl: '/dashboard' })}
        className="btn-facebook"
      >
        🔷 Masuk dengan Facebook
      </button>

      <div className="divider">atau</div>

      <a href="/auth/login" className="btn-credentials">
        📧 Masuk dengan Email & Password
      </a>
    </div>
  );
}

export default LoginButtons;

'use client';

import { useSession, signIn, signOut } from 'next-auth/react';

function Navbar() {
  const { data: session, status } = useSession();
  // status: 'loading' | 'authenticated' | 'unauthenticated'

  return (
    <nav className="navbar">
      <a href="/" className="logo">BeebaneLabs</a>

      <div className="nav-right">
        {status === 'loading' && (
          <span className="loading-text">Memuat...</span>
        )}

        {status === 'unauthenticated' && (
          <button onClick={() => signIn()}>
            Masuk
          </button>
        )}

        {status === 'authenticated' && session && (
          <div className="user-menu">
            <img
              src={session.user.image || '/default-avatar.png'}
              alt={session.user.name}
              className="avatar"
            />
            <span>{session.user.name}</span>
            {session.user.role === 'admin' && (
              <span className="badge-admin">Admin</span>
            )}
            <button onClick={() => signOut({ callbackUrl: '/' })}>
              Keluar
            </button>
          </div>
        )}
      </div>
    </nav>
  );
}

export default Navbar;

// Server Component — mendapatkan session di server
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);

  // Redirect jika belum login
  if (!session) {
    redirect('/auth/login');
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Selamat datang, {session.user.name}!</p>
      <p>Role: {session.user.role}</p>
      <img src={session.user.image} alt="Avatar" />
    </div>
  );
}

// API Route — proteksi API endpoint
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { NextResponse } from 'next/server';

export async function GET() {
  const session = await getServerSession(authOptions);

  if (!session) {
    return NextResponse.json(
      { error: 'Tidak terautentikasi' },
      { status: 401 }
    );
  }

  // Hanya admin yang boleh akses
  if (session.user.role !== 'admin') {
    return NextResponse.json(
      { error: 'Akses ditolak' },
      { status: 403 }
    );
  }

  // Lanjutkan proses...
  return NextResponse.json({ data: 'Data rahasia admin' });
}

callbacks: {
  // ═══════════════════════════════════════════════
  // 1. signIn — kontrol apakah user boleh login
  // Dipanggil saat user mencoba sign in
  // Return true = izinkan, false/error = tolak
  // ═══════════════════════════════════════════════
  async signIn({ user, account, profile, email, credentials }) {
    // user: data user dari provider atau authorize()
    // account: info provider (provider, type, accessToken)
    // profile: profil dari provider OAuth
    // email: info verifikasi email (untuk Email provider)
    // credentials: data dari Credentials provider

    // Contoh: blacklist email tertentu
    const blacklist = ['spam@example.com'];
    if (blacklist.includes(user.email)) {
      return false; // Tolak login
    }

    // Contoh: hanya izinkan email verified dari Google
    if (account.provider === 'google' && !profile.email_verified) {
      return '/auth/error?error=EmailNotVerified';
    }

    return true; // Izinkan login
  },

  // ═══════════════════════════════════════════════
  // 2. redirect — kustomisasi URL setelah sign in/out
  // ═══════════════════════════════════════════════
  async redirect({ url, baseUrl }) {
    // url: URL yang diminta (dari callbackUrl parameter)
    // baseUrl: URL dasar aplikasi (NEXTAUTH_URL)

    // Default: redirect ke halaman yang diminta
    if (url.startsWith('/')) return `${baseUrl}${url}`;

    // Pastikan hanya redirect ke domain sendiri
    if (new URL(url).origin === baseUrl) return url;

    // Fallback ke homepage
    return baseUrl;
  },

  // ═══════════════════════════════════════════════
  // 3. jwt — kustomisasi isi JWT token
  // Hanya dipanggil jika strategy: 'jwt'
  // ═══════════════════════════════════════════════
  async jwt({ token, user, account, profile, trigger, isNewUser, session }) {
    // token: JWT token saat ini (persisted antar requests)
    // user: data user (hanya ada saat sign in pertama)
    // account: info provider (hanya ada saat sign in)
    // trigger: 'signIn', 'update', atau 'signUp'

    // Saat pertama kali sign in, tambahkan data ke token
    if (user) {
      token.id = user.id;
      token.role = user.role || 'user';
      token.provider = account?.provider;
    }

    // Saat session.update() dipanggil dari client
    if (trigger === 'update' && session) {
      token.name = session.name;
      token.image = session.image;
    }

    return token;
  },

  // ═══════════════════════════════════════════════
  // 4. session — kustomisasi data yang dikirim ke client
  // Dipanggil setiap kali useSession() atau getServerSession()
  // ═══════════════════════════════════════════════
  async session({ session, token, user }) {
    // session: objek session yang akan dikirim ke client
    // token: JWT token (jika strategy: 'jwt')
    // user: data user dari database (jika strategy: 'database')

    // Tambahkan data dari token ke session
    if (token) {
      session.user.id = token.id;
      session.user.role = token.role;
      session.user.provider = token.provider;
    }

    // Bisa juga tambahkan data dari database
    // const dbUser = await prisma.user.findUnique({
    //   where: { id: token.id }
    // });
    // session.user.subscription = dbUser.subscription;

    return session;
  },
},

'use client';

import { useSession } from 'next-auth/react';

function EditProfil() {
  const { data: session, update } = useSession();

  const handleUpdateNama = async (newName) => {
    // Update session — trigger jwt callback dengan trigger: 'update'
    await update({
      ...session,
      user: {
        ...session.user,
        name: newName,
      },
    });
    // Session akan di-refresh dengan data baru
  };

  return (
    <div>
      <p>Nama: {session?.user?.name}</p>
      <button onClick={() => handleUpdateNama('Nama Baru')}>
        Ubah Nama
      </button>
    </div>
  );
}

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// Tabel ini dibuat otomatis oleh Prisma Adapter
model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id             String    @id @default(cuid())
  name           String?
  email          String?   @unique
  emailVerified  DateTime?
  image          String?
  hashedPassword String?   // Untuk credentials provider
  role           String    @default("user")
  createdAt      DateTime  @default(now())

  accounts Account[]
  sessions Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

import { PrismaClient } from '@prisma/client';

// Prevent multiple instances in development
const globalForPrisma = globalThis;

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = prisma;
}

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

function RegisterPage() {
  const [formData, setFormData] = useState({
    name: '', email: '', password: '', confirmPassword: '',
  });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (formData.password !== formData.confirmPassword) {
      setError('Password tidak cocok');
      return;
    }

    if (formData.password.length < 8) {
      setError('Password minimal 8 karakter');
      return;
    }

    setLoading(true);
    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          password: formData.password,
        }),
      });

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || 'Gagal mendaftar');
      }

      // Redirect ke login setelah berhasil
      router.push('/auth/login?registered=true');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <h1>Daftar Akun Baru</h1>

      {error && <p className="error">{error}</p>}

      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Nama Lengkap</label>
          <input
            type="text"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
          />
        </div>

        <div className="form-group">
          <label>Email</label>
          <input
            type="email"
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
            required
          />
        </div>

        <div className="form-group">
          <label>Password</label>
          <input
            type="password"
            value={formData.password}
            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
            required
            minLength={8}
          />
        </div>

        <div className="form-group">
          <label>Konfirmasi Password</label>
          <input
            type="password"
            value={formData.confirmPassword}
            onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
            required
          />
        </div>

        <button type="submit" disabled={loading}>
          {loading ? 'Mendaftar...' : '📝 Daftar'}
        </button>
      </form>

      <p className="auth-link">
        Sudah punya akun? <a href="/auth/login">Masuk di sini</a>
      </p>
    </div>
  );
}

export default RegisterPage;

import { NextResponse } from 'next/server';
import bcrypt from 'bcryptjs';
import { prisma } from '@/lib/prisma';

export async function POST(request) {
  try {
    const { name, email, password } = await request.json();

    // Validasi input
    if (!name || !email || !password) {
      return NextResponse.json(
        { error: 'Semua field wajib diisi' },
        { status: 400 }
      );
    }

    if (password.length < 8) {
      return NextResponse.json(
        { error: 'Password minimal 8 karakter' },
        { status: 400 }
      );
    }

    // Cek apakah email sudah terdaftar
    const existingUser = await prisma.user.findUnique({
      where: { email },
    });

    if (existingUser) {
      return NextResponse.json(
        { error: 'Email sudah terdaftar' },
        { status: 409 }
      );
    }

    // Hash password
    const hashedPassword = await bcrypt.hash(password, 12);

    // Buat user baru
    const user = await prisma.user.create({
      data: {
        name,
        email,
        hashedPassword,
        role: 'user',
      },
    });

    return NextResponse.json(
      {
        message: 'Registrasi berhasil',
        user: { id: user.id, name: user.name, email: user.email },
      },
      { status: 201 }
    );
  } catch (error) {
    console.error('Register error:', error);
    return NextResponse.json(
      { error: 'Terjadi kesalahan server' },
      { status: 500 }
    );
  }
}

import { withAuth } from 'next-auth/middleware';
import { NextResponse } from 'next/server';

// Proteksi semua route yang cocok dengan matcher
export default withAuth(
  function middleware(req) {
    const { token } = req.nextauth;
    const { pathname } = req.nextUrl;

    // Proteksi route admin — hanya untuk role admin
    if (pathname.startsWith('/admin') && token?.role !== 'admin') {
      return NextResponse.redirect(new URL('/unauthorized', req.url));
    }

    // Proteksi route premium — untuk role premium atau admin
    if (pathname.startsWith('/premium') &&
        !['admin', 'premium'].includes(token?.role)) {
      return NextResponse.redirect(new URL('/upgrade', req.url));
    }

    return NextResponse.next();
  },
  {
    callbacks: {
      // Return true = izinkan akses, false = redirect ke signIn
      authorized: ({ token }) => {
        return !!token; // User harus terautentikasi
      },
    },
  }
);

// Tentukan route mana yang dilindungi
export const config = {
  matcher: [
    '/dashboard/:path*',
    '/admin/:path*',
    '/premium/:path*',
    '/settings/:path*',
    '/api/protected/:path*',
  ],
};

'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

// Higher-Order Component untuk proteksi halaman
export function withAuth(WrappedComponent, requiredRole = null) {
  return function ProtectedComponent(props) {
    const { data: session, status } = useSession();
    const router = useRouter();

    useEffect(() => {
      if (status === 'unauthenticated') {
        router.push('/auth/login');
      }

      if (status === 'authenticated' && requiredRole) {
        if (session.user.role !== requiredRole &&
            session.user.role !== 'admin') {
          router.push('/unauthorized');
        }
      }
    }, [status, session, router]);

    if (status === 'loading') {
      return <div className="loading">Memuat...</div>;
    }

    if (!session) return null;

    return <WrappedComponent {...props} session={session} />;
  };
}

// Penggunaan:
// const ProtectedDashboard = withAuth(DashboardPage);
// const AdminPage = withAuth(AdminPanel, 'admin');