Cara Mengintegrasikan Otentikasi Google di Aplikasi Next.js Menggunakan NextAuth

Mengintegrasikan sistem autentikasi yang aman adalah langkah pengembangan penting yang tidak hanya menyediakan lingkungan yang aman bagi pengguna, tetapi juga menanamkan kepercayaan pada produk Anda. Sistem ini memastikan bahwa data mereka terlindungi dan hanya individu yang berwenang yang dapat mengakses aplikasi tersebut.

Membangun autentikasi yang aman dari bawah ke atas dapat menjadi proses yang memakan waktu yang memerlukan pemahaman menyeluruh tentang protokol dan proses autentikasi, terutama saat menangani penyedia autentikasi yang berbeda.

Menggunakan NextAuth, Anda dapat mengalihkan fokus untuk membangun fitur inti. Baca terus untuk mengetahui cara mengintegrasikan login sosial Google di aplikasi Anda menggunakan NextAuth.

Bagaimana NextAuth Bekerja

NextAuth.js adalah pustaka autentikasi sumber terbuka yang menyederhanakan proses penambahan fungsi autentikasi dan otorisasi ke aplikasi Next.js serta menyesuaikan alur kerja autentikasi. Ini menyediakan berbagai fitur seperti email, autentikasi tanpa kata sandi, dan dukungan untuk berbagai penyedia autentikasi seperti Google, GitHub, dan lainnya.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Pada level tinggi, NextAuth bertindak sebagai middleware, memfasilitasi proses autentikasi antara aplikasi Anda dan penyedia. Di balik layar, saat pengguna mencoba masuk, mereka dialihkan ke halaman masuk Google. Setelah autentikasi berhasil, Google mengembalikan payload yang menyertakan data pengguna, seperti nama dan alamat email mereka. Data ini digunakan untuk mengotorisasi akses ke aplikasi dan sumber dayanya.

Menggunakan data payload, NextAuth membuat sesi untuk setiap pengguna yang diautentikasi dan menyimpan token sesi dalam cookie khusus HTTP yang aman. Token sesi digunakan untuk memverifikasi identitas pengguna dan mempertahankan status autentikasi mereka. Proses ini juga berlaku untuk penyedia lain dengan sedikit variasi dalam penerapannya.

Daftarkan Aplikasi Next.js Anda di Google Developer Console

NextAuth memberikan dukungan untuk layanan autentikasi Google. Namun, agar aplikasi Anda dapat berinteraksi dengan Google API dan mengizinkan pengguna mengautentikasi dengan kredensial Google mereka, Anda perlu mendaftarkan aplikasi Anda di konsol pengembang Google dan mendapatkan ID klien Dan Rahasia Klien.

Untuk melakukan itu, arahkan ke Konsol Pengembang Google. Selanjutnya, masuk dengan akun Google Anda untuk mengakses konsol. Setelah masuk, buat proyek baru.

Pada halaman ikhtisar proyek, pilih API dan Layanan tab dari daftar layanan di panel menu kiri dan terakhir, Kredensial pilihan.

Klik pada Buat Kredensial tombol untuk menghasilkan ID Klien dan Rahasia Klien Anda. Selanjutnya, tentukan jenis aplikasi dari opsi yang diberikan dan berikan nama untuk aplikasi Anda.

Setelah itu, tentukan URL rute beranda aplikasi Anda dan terakhir tentukan URI pengalihan resmi untuk aplikasi Anda. Untuk kasus ini, seharusnya http://localhost:3000/api/auth/callback/google seperti yang ditentukan oleh pengaturan penyedia Google NextAuth.

Setelah pendaftaran berhasil, Google akan memberi Anda ID Klien dan Rahasia Klien untuk digunakan di aplikasi Anda.

Siapkan Aplikasi NextJS

Untuk memulai, buat proyek Next.js secara lokal:

npx create-next-app next-auth-app

Setelah penyiapan selesai, navigasikan ke direktori proyek yang baru dibuat dan jalankan perintah ini untuk mengaktifkan server pengembangan.

npm run dev

Buka browser Anda dan arahkan ke http://localhost:3000. Ini harus menjadi hasil yang diharapkan.

Menyiapkan File .env

Di folder root proyek Anda, buat file baru dan beri nama .env untuk menyimpan ID Klien, Rahasia, dan URL dasar Anda.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'client ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'secret'
NEXT_PUBLIC_NEXTAUTH_URL= 'http://localhost:3000'

URL NextAUTH digunakan untuk menentukan URL dasar aplikasi Anda, yang digunakan untuk mengalihkan pengguna setelah autentikasi selesai.

Integrasikan NextAuth di Aplikasi Next.js Anda

Pertama, instal pustaka NextAuth ke proyek Anda.

npm install next-auth

Selanjutnya, di /halaman direktori, buat folder baru dan beri nama api. Ubah direktori ke api folder, dan buat folder lain bernama autentikasi Di folder auth, tambahkan file baru dan beri nama […nextauth].js dan tambahkan baris kode berikut.

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
    providers:[
        GoogleProvider({
            clientId:process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
            clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
        }),
    ]

});

Kode ini mengonfigurasi Google sebagai penyedia autentikasi. Fungsi NextAuth mendefinisikan objek konfigurasi penyedia Google yang menggunakan dua properti: ID Klien dan Rahasia Klien yang menginisialisasi penyedia.

Selanjutnya, buka halaman/_app.js file dan buat perubahan berikut pada kode.

import '../styles/globals.css'
import { SessionProvider } from "next-auth/react"
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 return (
   <SessionProvider session={session}>
     <Component {...pageProps} />
   </SessionProvider>
 )
}
export default MyApp 

NextAuth Penyedia Sesi komponen menyediakan fungsionalitas manajemen status autentikasi ke aplikasi Next.js. Dibutuhkan a sidang prop yang berisi data sesi autentikasi yang dikembalikan dari API Google yang menyertakan detail pengguna seperti ID, email, dan token akses mereka.

Dengan membungkus Aplikasi Saya komponen dengan komponen SessionProvider, objek sesi autentikasi dengan detail pengguna tersedia di seluruh aplikasi, memungkinkan aplikasi untuk bertahan dan merender halaman berdasarkan status autentikasinya.

Konfigurasi File index.js

Buka halaman/index.js file, hapus kode boilerplate, dan tambahkan kode di bawah ini untuk membuat tombol login yang mengarahkan pengguna ke halaman login.

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router';

export default function Home() {
const router = useRouter();

return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name=“description” content=“Generated by create next app” />
<link rel=“icon” href=“/favicon.ico” />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href=“https://nextjs.org”>Next.js!</a>
</h1>

<p className={styles.description}>
Get started by signing in{‘ ‘}
<code className={styles.code}>with your Google Account</code>
<button className={styles.loginButton}
onClick={() => router.push(‘/Login’)}> Login</button>
</p>
</main>

</div>
)
}

Kode ini menggunakan Next.js useRouter kait untuk menangani perutean dalam aplikasi dengan mendefinisikan objek router. Ketika tombol login diklik, fungsi handler memanggil router.push metode untuk mengarahkan pengguna ke halaman login.

Buat Halaman Otentikasi Login

Dalam halaman direktori, buat file baru Login.jslalu tambahkan baris kode berikut.

import { useSession, signIn, signOut } from "next-auth/react"
import { useRouter } from 'next/router';
import styles from '../styles/Login.module.css'

export default function Login() {
const { data: session } = useSession()
const router = useRouter();
if (session) {
return (
<div className={styles.container}>
<h1 className=“title”>Create Next App</h1>
<div className={styles.content}>
<h2> Signed in as {session.user.email} <br /></h2>
<div classname={styles.btns}>
<button className={styles.button} onClick={() => router.push(‘/Profile’)}>
User Profile
</button>
<button className={styles.button} onClick={() => {
signOut()
}}>
Sign out
</button>
</div>
</div>
</div>

)
}
return (
<div className={styles.container}>
<h1 className=“title”>Create Next App</h1>
<div className={styles.content}>
<h2> You are not signed in!!</h2>
<button className={styles.button}
onClick={() => signIn()}>Sign in</button>
</div>
</div>
)
}

useSession, masukDan keluar adalah kait yang disediakan oleh berikutnya-auth. useSession hook digunakan untuk mengakses objek sesi pengguna saat ini setelah pengguna masuk dan berhasil diautentikasi oleh Google.

Hal ini memungkinkan Next.js untuk mempertahankan status autentikasi dan merender detail pengguna di sisi klien aplikasi, dalam hal ini, email.

Selain itu, dengan menggunakan objek sesi, Anda dapat dengan mudah membuat profil pengguna khusus untuk aplikasi Anda dan menyimpan data dalam database seperti PostgreSQL. Anda dapat menghubungkan database PostgreSQL dengan aplikasi Next.js menggunakan Prisma.

Pengait signOut memungkinkan pengguna untuk keluar dari aplikasi. Pengait ini akan menghapus objek sesi yang dibuat selama proses masuk dan pengguna akan keluar.

Lanjutkan dan nyalakan server pengembangan untuk memperbarui perubahan dan buka aplikasi Next.js Anda yang berjalan di browser untuk menguji fungsi autentikasi.

npm run dev

Selanjutnya, Anda dapat menggunakan Tailwind CSS dengan aplikasi Next.js Anda untuk menata model autentikasi.

Otentikasi Menggunakan NextAuth

NextAuth mendukung beberapa layanan autentikasi yang dapat dengan mudah diintegrasikan ke dalam aplikasi Next.js Anda untuk menangani autentikasi sisi klien.

Selain itu, Anda dapat mengintegrasikan database untuk menyimpan data pengguna dan token akses untuk mengimplementasikan autentikasi sisi server untuk permintaan autentikasi selanjutnya karena NextAuth menyediakan dukungan untuk berbagai integrasi database.