login با حساب گوگل در Next.js 15 با NextAuth.js (راهنمای کامل)

در دنیای امروز، بسیاری از وب‌سایت‌ها به کاربران امکان ورود با گوگل ، گیت‌هاب و سایر ارائه‌دهندگان را می‌دهند. این روش باعث کاهش فرایند ثبت‌نام و افزایش امنیت می‌شود. در این مقاله، نحوه راه‌اندازی احراز هویت گوگل در Next.js 15 را با استفاده از NextAuth.js توضیح می‌دهیم.

در سرتاسر این مقاله سعی بر آن شده است تا اصل اختصار و ساده نویسی رعایت شود و به سرعت بتوانید به نتیجه مورد نظر خود برسید.

در ضمن پیشنهاد میکنیم بعد از خواندن این مقاله سری هم به مقاله جامع و کامل آموزش next.js بزنید!

نصب NextAuth.js در Next.js 15

ابتدا باید کتابخانه NextAuth.js را نصب کنیم. در ریشه پروژه Next.js، دستور زیر را اجرا کنید:

npm install next-auth

دریافت کلیدهای API از گوگل

برای استفاده از Google OAuth، باید Google Client ID و Google Client Secret را از Google Cloud Console دریافت کنید. به آدرس زیر:

https://console.cloud.google.com

وارد Google Cloud Console شوید.
یک پروژه جدید ایجاد کنید یا پروژه موجود را انتخاب کنید.
به بخش APIs & Services > Credentials بروید.
روی Create Credentials > OAuth Client ID کلیک کنید.
Application Type را روی Web application تنظیم کنید.
در بخش Authorized redirect URIs مقدار زیر را وارد کنید:

http://localhost:3000/api/auth/callback/google

البته اگر پروژه واقعی است و قصد پابلیش آن را دارید، باید از ادرس دامین واقعی خود استفاده کنید.

سپس روی Create کلیک کنید و مقادیر Client ID و Client Secret را ذخیره کنید.

پیکربندی محیطی (Environment Variables)

در روت پروژه خود فایلی با نام .env.local بسازید(حتما با دات شروع شود) و مقادیر کلیدهای دریافتی را اضافه کنید.

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-next-auth-secret
NEXTAUTH_URL=http://localhost:3000

بجای NEXTAUTH_SECRET میتوانید یک رشته بلند و نسبتا سخت ایجاد کرده و یا از دستور زیر استفاده کنید:

openssl rand -base64 32

آیا میدانید مدرسه پرنیان، دوره آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟کلیک کنید

تنظیم NextAuth.js در API Route

در مسیر app/api/auth/[...nextauth]/route.js فایل را ایجاد کنید و کد زیر را وارد کنید:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: "jwt", 
  },
});

export { handler as GET, handler as POST };

ایجاد دکمه ورود و خروج

حالا کامپوننتی برای نمایش دکمه ورود با گوگل و خروج ایجاد می‌کنیم. در مسیر app/login/page.js فایل زیر را اضافه کنید:

"use client";

import { useSession, signIn, signOut } from "next-auth/react";

export default function LoginPage() {
  const { data: session } = useSession();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      {session ? (
        <>
          <img
            src={session.user.image}
            alt="Profile"
            style={{ borderRadius: "50%", width: "80px", height: "80px" }}
          />
          <p>سلام {session.user.name} 👋</p>
          <p>ایمیل: {session.user.email}</p>
          <button onClick={() => signOut()}>خروج</button>
        </>
      ) : (
        <button onClick={() => signIn("google")}>ورود با گوگل</button>
      )}
    </div>
  );
}

فعال‌سازی Provider در سطح برنامه

برای دسترسی به اطلاعات کاربر در کل برنامه، فایل app/login/layout.js را باز کرده و تغییرات زیر را اعمال کنید:

"use client";
import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
  return (
    <html lang="fa">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

به صفحه localhost:3000 بروید و دکمه ورود را تست کنید. اگر همه چیز درست باشد، می‌توانید با حساب گوگل خود وارد شوید.

در انتهای مقاله میتوانید آموزش تصویر لاگین کردن با next auth را در ویدیوی زیر ببینید.

امیدواریم از این مقاله NextAuth.js نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.