NextAuth

NextAuth adalah library yang digunakan untuk mengatur autentikasi pada aplikasi Next.js. Library ini menyediakan berbagai macam provider autentikasi seperti Google, Facebook, Twitter, GitHub, dan lain-lain. Selain itu, NextAuth juga menyediakan autentikasi dengan email dan password.

Instalasi

pnpm install next-auth

Konfigurasi

// app/api/auth/[...nextauth].js
 
import NextAuth from 'next-auth/next';
 
import { options } from '@/utils/nextauth/option';
 
const handler = NextAuth({
    providers: [
        Credentials({
            name: 'Credentials',
            credentials: {
                email: { label: 'Email', type: 'email', placeholder: 'Email' },
                password: { label: 'Password', type: 'password' },
            },
            authorize: async (credentials) => {
                return null;
            },
        }),
        GithubProvider({
            clientId: process.env.GITHUB_ID as string,
            clientSecret: process.env.GITHUB_SECRET as string,
        }),
        ];
    });
 
export { handler as GET, handler as POST };

Penggunaan

// login/page.tsx
 
"use client";
 
import { signIn, signOut, useSession } from "next-auth/react";
import { useState } from "react";
 
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
 
export default function Page() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { status } = useSession();
 
  return (
    <div>
      {status === "authenticated" ? (
        <Button onClick={() => signOut()}>Logout</Button>
      ) : (
        <div>
          <Input value={email} onChange={(e) => setEmail(e.target.value)} />
          <Input
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <Button
            onClick={() =>
              signIn("credentials", {
                email,
                password,
                redirect: false,
              })
            }
          >
            Login
          </Button>
        </div>
      )}
    </div>
  );
}

Autentikasi dengan Email dan Password

Untuk menggunakan autentikasi dengan email dan password, kita perlu membuat sebuah fungsi authorize pada provider Credentials. Fungsi ini akan menerima sebuah objek credentials yang berisi email dan password yang dikirimkan oleh user. Fungsi ini harus mengembalikan sebuah objek user jika autentikasi berhasil atau null jika gagal.

// app/api/auth/[...nextauth].js
 
import NextAuth from 'next-auth/next';
 
import { options } from '@/utils/nextauth/option';
 
const handler = NextAuth({
    providers: [
        Credentials({
            name: 'Credentials',
            credentials: {
                email: { label: 'Email', type: 'email', placeholder: 'Email' },
                password: { label: 'Password', type: 'password' },
            },
            authorize: async (credentials) => {
                const user = await prisma.user.findUnique({
                    where: {
                        email: credentials.email,
                    },
                });
 
                if (!user) {
                    return null;
                }
 
                const isValid = await argon2.verify(user.password, credentials.password);
 
                if (!isValid) {
                    return null;
                }
 
                return user;
            },
        }),
        ];
    });
 
export { handler as GET, handler as POST };

Autentikasi dengan GitHub

Untuk menggunakan autentikasi dengan GitHub, kita perlu membuat sebuah aplikasi OAuth di GitHub. Setelah itu, kita perlu mengisi clientId dan clientSecret pada provider GithubProvider.

// app/api/auth/[...nextauth].js
 
import NextAuth from 'next-auth/next';
 
import { options } from '@/utils/nextauth/option';
 
const handler = NextAuth({
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID as string,
            clientSecret: process.env.GITHUB_SECRET as string,
        }),
        ];
    });
 
export { handler as GET, handler as POST };

Husky Session