Cara Membuat Login with Google di Next JS

Tahukah Anda bahwa integrasi login dengan akun Google dalam aplikasi web Anda dapat meningkatkan kenyamanan pengguna? Dalam artikel tutorial ini, kita akan menjelaskan langkah-langkah cara membuat login dengan Google di aplikasi Next.js. Next.js adalah kerangka kerja React yang kuat dan dapat membantu Anda mengembangkan aplikasi web yang responsif dan efisien.

Persiapan

Sebelum kita mulai, pastikan Anda memiliki beberapa persyaratan dasar:

Node.js dan npm: Pastikan Anda sudah menginstal Node.js dan npm pada komputer Anda.

Proyek Next.js: Anda harus memiliki proyek Next.js yang sudah ada atau membuat proyek baru. Anda dapat membuatnya dengan perintah berikut:

npx create-next-app next-js-login
cd next-js-login

Akun Pengembang Google: Anda perlu memiliki akun pengembang Google dan membuat proyek di Google Developer Console.

Kunci API Google: Anda harus menghasilkan kunci API dari proyek Anda di Google Developer Console. Pastikan Anda mengaktifkan API OAuth 2.0.

Langkah-langkah

1. Instalasi Paket OAuth

Pertama, kita perlu menginstal paket OAuth yang akan membantu kita berinteraksi dengan API Google. Gunakan perintah berikut:

npm install react-oauth/google

2. Konfigurasi OAuth

Setelah menginstal paket OAuth, tambahkan konfigurasi OAuth di proyek Next.js Anda. Anda dapat membuat file konfigurasi (misalnya, oauthConfig.js) yang berisi informasi seperti ID klien dan kunci rahasia yang diperoleh dari Google Developer Console.

// oauthConfig.js
export default {
  googleClientId: 'YOUR_CLIENT_ID',
  googleClientSecret: 'YOUR_CLIENT_SECRET',
  redirectUrl: 'http://localhost:3000/auth/google/callback',
};

3. Buat Halaman Login

Buat halaman login di proyek Next.js Anda. Anda dapat membuat file pages/login.js dan menambahkan tombol “Login with Google” yang akan mengarahkan pengguna ke layanan Google OAuth.

// pages/login.js
import React from 'react';
import { signIn } from 'next-auth/google';

const LoginPage = () => {
  const handleGoogleLogin = async () => {
    await signIn('google');
  };

  return (
    <div>
      <h1>Login Page</h1>
      <button onClick={handleGoogleLogin}>Login with Google</button>
    </div>
  );
};

export default LoginPage;

4. Tambahkan Route Callback

Kemudian, Anda perlu menambahkan halaman callback yang akan menangani respon dari Google setelah pengguna login. Buat file pages/auth/google/callback.js:

// pages/auth/google/callback.js
import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';

const GoogleCallbackPage = () => {
  const { data: session } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (session) {
      // Redirect to the desired page after login
      router.push('/');
    }
  }, [session]);

  return <div>Logging in...</div>;
};

export default GoogleCallbackPage;

5. Menjalankan Aplikasi

Terakhir, jalankan proyek Next.js Anda dengan perintah:

npm run dev

Akses halaman login di http://localhost:3000/login dan Anda akan melihat tombol “Login with Google”. Saat pengguna mengklik tombol ini, mereka akan diarahkan ke halaman login Google. Setelah login berhasil, mereka akan diarahkan kembali ke aplikasi Anda.

Dengan mengikuti langkah-langkah ini, Anda telah berhasil membuat sistem login dengan akun Google di proyek Next.js Anda. Anda dapat menyesuaikan dan memperluas fitur ini sesuai dengan kebutuhan aplikasi Anda. Semoga tutorial ini bermanfaat!