NextAuth adalah sebuah library yang digunakan untuk mengimplementasikan autentikasi dan manajemen sesi dalam aplikasi web modern. Library ini mendukung berbagai metode autentikasi, termasuk OAuth, Email/Password, dan lainnya. NextAuth dirancang untuk digunakan dengan Next.js, sebuah kerangka kerja JavaScript yang populer untuk pengembangan aplikasi web server-side rendering (SSR) dan static site generation (SSG)
NextAuth memiliki beberapa fitur kekinian dan inovatif, seperti Multi-Factor Authentication (MFA), yang meningkatkan keamanan dengan memerlukan lebih dari satu bentuk identifikasi untuk mengakses suatu sistem. Selain itu, NextAuth juga mendukung push notifications dan komunikasi antara aplikasi dan backend server melalui saluran yang aman
NextAuth dengan Provider Github
Untuk mendapatkan GITHUB_ID dan GITHUB_SECRET untuk digunakan dalam file .env aplikasi Kita, Kita perlu membuat aplikasi OAuth di GitHub. Aplikasi OAuth ini akan digunakan untuk mengautentikasi pengguna ke GitHub. Berikut adalah langkah-langkah untuk membuat aplikasi OAuth dan mendapatkan GITHUB_ID dan GITHUB_SECRET:
- Pertama, masuk ke akun GitHub Kita dan klik pada foto profil Kita di pojok kanan atas halaman, lalu pilih Settings https://github.com/settings/apps.
2. Dalam halaman Settings, cari dan klik pada bagian Developer settings di sebelah kiri.
3. Di dalam Developer settings, klik pada bagian OAuth Apps dan kemudian klik pada tombol New OAuth App.
4. Berikan Application name, Homepage URL, Application description, dan Authorization callback URL untuk aplikasi OAuth Kita.
5. Setelah aplikasi OAuth dibuat, GitHub akan memberikan Client ID dan Client Secret untuk aplikasi Kita. Client ID ini adalah GITHUB_ID Kita, dan Client Secret ini adalah GITHUB_SECRET Kita iotality.com.
6. Kita perlu menyalin GITHUB_ID dan GITHUB_SECRET ini dan menyimpannya dengan aman. Kita akan menggunakan GITHUB_ID dan GITHUB_SECRET ini dalam file .env aplikasi Kita untuk mengautentikasi pengguna ke GitHub.
Berikut adalah contoh bagaimana Kita dapat menambahkan GITHUB_ID dan GITHUB_SECRET ke file .env Kita:
GITHUB_ID=your_github_id
GITHUB_SECRET=your_github_secretInstall Library nextAuth :
npm add next-authBuat sebuah file routes difolder api dengan routes berikut /app/api/auth/[...nextauth]/route.ts
// app/api/auth/[...nextauth]/route.ts
import NextAuth, { NextAuthOptions } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
export const Options: NextAuthOptions = {
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID ?? "",
clientSecret: process.env.GITHUB_SECRET ?? "",
}),
],
};
export const handler = NextAuth(Options);
export { handler as GET, handler as POST };Setelah itu kita membuat sebuah komponen untuk mengecek session sudah login atau tidak, Jika belum login maka yang ditampilkan adalah tombol login dan juga nama yang login, sebaliknya jika sudah login maka kita tampilkan tombol logout.
// app/components/AuthButton.tsx
"use client";
import { signIn, signOut, useSession } from "next-auth/react";
export default function AuthButton() {
const { data: session } = useSession();
if (session) {
return (
<>
{session?.user?.name} <br />
{session && <p>Object Users : {JSON.stringify(session.user)}</p>}
<button
className="flex items-center gap-5 self-start rounded-lg bg-red-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-red-800 md:text-base"
onClick={() => signOut()}
>
Sign out
</button>
</>
);
}
return (
<>
Not signed in <br />
<button
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
onClick={() => signIn('github')}
>
Sign in
</button>
</>
);
}Sekarang Kita edit halaman layout dan kita wrapping props children dengan SessionProvider pada komponen di app/layout.tsx:
// app/layout.tsx:
"use client";
import "@/app/ui/global.css";
import { inter } from "@/app/ui/fonts";
import { GetSessionParams, SessionProvider } from "next-auth/react";
import { getSession } from "next-auth/react";
type RootLayoutProps = {
children: React.ReactNode;
session: any | undefined; // Anda bisa mengganti 'any' dengan tipe yang lebih spesifik jika Anda tahu tipe data yang akan diterima oleh `pageProps`
};
export async function getServerComponentProps(
context: GetSessionParams | undefined
) {
const session = await getSession(context);
return {
props: {
session,
},
};
}
const RootLayout: React.FC<RootLayoutProps> = ({ children, session }) => {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
<SessionProvider session={session}>{children}</SessionProvider>
</body>
</html>
);
};
export default RootLayout;Sekarang kita import komponen auth yang sudah buat sebelumnya dihalaman app/page.tsx:
// app/Page.tsx
import AuthButton from "@/app/components/AuthButton";
export default function Page() {
return (
<h1>Login Auth With Github Account</h1>
<AuthButton/>
)
}Sampai disini kita sudah berhasil melakukan login dengan account github menggunakan library nextAuth. Kita bisa menggunakan nya untuk fitur lebih lanjut sesuai yang kita inginkan.
NextAuth dengan Provider Google
Untuk membuat authentikasi beberapa akun provider kita tinggal menambahkan nya didalam provider dan konfigurasi untuk mendapatkan clientID dan clientSecret nya. Sekrang kita akan membuat tambahan provider login dengan Google.
Untuk mendapatkan clientId dan secretId pada google, maka pergi kehalaman google console konfigurasi Google console
- selanjutnya klik Create Credentials > OAuth client ID
- pilih application type Web APplication dan berikan nama nya.
- Pada Authorized redirect URIs isi dengan url ex => http://localhost:3000
- Pada Authorized JavaScript origins isi dengan url Konfigurasi Api kita ex => http://localhost:3000/api/auth/callback/gogle
Setelah itu kita akan mendapatkan Client ID dan Client Secret Seperti gambar dibawah:
Selanjutnya Kita Edit file app/api/auth/[…nextauth]/route.ts dan tambahkan provider google.
import NextAuth, { NextAuthOptions } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
export const Options: NextAuthOptions = {
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID ?? "",
clientSecret: process.env.GITHUB_SECRET ?? "",
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID || "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
}),
],
};
export const handler = NextAuth(Options);
export { handler as GET, handler as POST };Atau kita juga bisa menambahkan Callback pada Options jika kita ingin menyimpan user yang telah login kehalaman kita kedalam database kita sendiri.
export const Options: NextAuthOptions = {
providers: [
// Privider here
],
callbacks: {
async jwt({ token, user }) {
if (user) {
// Save user data to your database here
console.log("USER LOGIN : ", user);
}
return token;
},
async session({ session, token }) {
// Add user data to the session object here
console.log("TOKEN USER : ", token);
return session;
},
},
};Setelah itu kita Update komponen app/components/AuthButton.tsx untuk menampilkan tombol login dengan google ataupun gihtub :
"use client";
import { signIn, signOut, useSession } from "next-auth/react";
import Image from "next/image";
export default function AuthButton() {
const { data: session } = useSession();
if (session) {
return (
<>
<p> Wellcome : {session?.user?.name} </p>
<p>{session?.user?.email} </p>
{session && (
<Image
className="img"
src={session?.user?.image ?? ""}
alt="Picture of the author"
width={120}
height={120}
/>
)}
<button
className="flex items-center gap-5 self-start rounded-lg bg-red-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-red-800 md:text-base"
onClick={() => signOut()}
>
Sign out
</button>
{session && <p>Object Users : {JSON.stringify(session.user)}</p>}
</>
);
}
return (
<>
Not signed in <br />
<div className="flex gap-x-5">
<button
className="flex items-center gap-5 self-start rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
onClick={() => signIn("github")}
>
Signin with Github
</button>
<button
className="flex items-center gap-5 self-start rounded-lg bg-red-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
onClick={() => signIn("google")}
>
Signin with Google
</button>
</div>
</>
);
}Sekarang Aplikasi kita sudah bisa login dengan menggunakan provider github dan akun google.
Happy Coding!
