Pustaka ini memungkinkan Anda mengintegrasikan autentikasi Google dengan mulus ke dalam aplikasi Next.js Anda, menghilangkan kebutuhan untuk mengembangkannya dari awal.

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 membutuhkan ketelitian pemahaman tentang protokol dan proses autentikasi, terutama saat menangani autentikasi yang berbeda penyedia.

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

instagram viewer
otentikasi dan otorisasi fungsionalitas untuk 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.

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 untuk mengautentikasi kredensial Google mereka, Anda harus mendaftarkan aplikasi Anda di konsol pengembang Google dan memperoleh 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 buat-aplikasi-berikutnya-aplikasi-berikutnya

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

npm menjalankan dev

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

Anda dapat menemukan kode proyek ini di dalamnya repositori GitHub.

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= 'ID klien'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'rahasia'
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 instal autentikasi berikutnya

Selanjutnya, di /pages 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 [...berikutnya].js dan tambahkan baris kode berikut.

impor NextAuth dari"berikutnya-auth/berikutnya";
impor Penyedia Google dari"auth-berikutnya/penyedia/google";
eksporbawaan NextAuth({
 penyedia:[
 Penyedia Google({
 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.

impor'../styles/globals.css'
impor { Penyedia Sesi } dari"auth-berikutnya/bereaksi"
fungsiAplikasi Saya({ Komponen, pageProps: { session, ...pageProps } }) {
kembali (


 </SessionProvider>
 )
}
eksporbawaan Aplikasi Saya

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.

impor Kepala dari'berikutnya/kepala'
impor gaya dari'../styles/Home.module.css'
impor { gunakanRouter } dari'berikutnya/router';
eksporbawaanfungsiRumah() {
const router = gunakanRouter();

kembali (





Buat Aplikasi Berikutnya<<span>/title></span><br> <meta name="<span">"description" content=<span>"Dihasilkan dengan membuat aplikasi berikutnya"</span> /> <br> <tautan rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Selamat datang di <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Mulailah dengan masuk <span>in</span>{<span>' ' </span>}<br> <kode classname="{styles.code}"><span>dengan</span> Akun Google Anda<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Masuk<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kode></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Kode ini menggunakan kait <strong>useRouter</strong> Next.js untuk menangani perutean dalam aplikasi dengan mendefinisikan objek router. Saat tombol masuk diklik, fungsi penangan memanggil metode <strong>router.push</strong> untuk mengalihkan pengguna ke halaman login.</p> <h3 id="create-a-login-authentication-page">Buat Autentikasi Login Halaman</h3> <p>Di direktori <strong>pages</strong>, buat file baru <strong>Login.js</strong>, lalu tambahkan baris kode berikut.</p> <pre> <code><span>impor</span> { useSession, signIn, signOut } <span>from</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /router'</span>;<br><span>impor</span> gaya <span>dari</span> <span>'../styles/Login.module.css'</span><p><span>ekspor</span> <span>default</span> <span><span>fungsi</span> < span>Login</span>() {<br> <span>const</span> { <span>data</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Buat Aplikasi Berikutnya<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Ditandatangani < span>in <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Profil Pengguna<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Keluar<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>kembalikan</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Buat Aplikasi Berikutnya<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Anda belum masuk <span>in</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => masuk()}>Masuk <span>di</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong>, dan <strong>signOut</strong> adalah pengait yang disediakan oleh <strong>next-auth</strong>. Kait <strong>useSession</strong> digunakan untuk mengakses objek sesi pengguna saat ini setelah pengguna masuk dan berhasil diautentikasi oleh Google.</p> <p>Hal ini memungkinkan Next.js mempertahankan status autentikasi dan merender detail pengguna di sisi klien aplikasi, dalam hal ini, email.</p> <p>Selain itu, dengan menggunakan objek sesi, Anda dapat dengan mudah membangun profil pengguna kustom untuk aplikasi Anda dan menyimpan data dalam database seperti itu. sebagai PostgreSQL. Anda dapat <span>menghubungkan database PostgreSQL dengan aplikasi Next.js menggunakan Prisma</span>.</p> <p>SignOut hook memungkinkan pengguna untuk keluar dari aplikasi. Pengait ini akan menghapus objek sesi yang dibuat selama proses masuk dan pengguna akan keluar.</p> <p>Lanjutkan dan nyalakan server pengembangan untuk perbarui perubahan dan buka aplikasi Next.js Anda yang berjalan di browser untuk menguji fungsionalitas autentikasi.</p> <pre> <code>npm run dev</code> </pre> <p>Selanjutnya, Anda dapat <span>menggunakan Tailwind CSS dengan aplikasi Next.js Anda</span> untuk mengatur gaya model autentikasi.</p> <h2 id="authentication-using-nextauth"> Autentikasi Menggunakan NextAuth  h2> </h2>
<p>NextAuth mendukung beberapa layanan autentikasi yang dapat dengan mudah diintegrasikan ke dalam aplikasi Next.js Anda untuk menangani sisi klien autentikasi.</p> <p>Selain itu, Anda dapat mengintegrasikan database untuk menyimpan data pengguna dan token akses untuk mengimplementasikan sisi server autentikasi untuk permintaan autentikasi selanjutnya karena NextAuth menyediakan dukungan untuk berbagai integrasi database.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></tautan>