Next.js و Next-Auth V5: راهنمای ورود به سیستم اجتماعی (OAuth)

ek3nk4r 2025-01-23

0 0 خواندن این مطلب 15 دقیقه زمان میبرد

Next.js و Next-Auth V5: راهنمای ورود به سیستم اجتماعی (OAuth)

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Authentication و Authorization نیازهای ضمنی برای هر برنامه کاربردی رو به رو کاربر هستند. کاربران با استفاده از احراز هویت، به برنامه و سرویس‌های زیربنایی اجازه می‌دهند بدانند که چه کسانی هستند و آیا آنها افراد قانونی برای دسترسی به سیستم هستند یا خیر. روش‌های مختلفی برای احراز هویت وجود دارد، مانند احراز هویت مبتنی بر اعتبار، احراز هویت مبتنی بر OTP، پیوندهای جادویی، بیومتریک و موارد دیگر.

در حالی که احراز هویت راهی است که می‌توان به کسی گفت که شما کی هستید، مجوز نحوه دسترسی به منابعی است که او باید داشته باشد. مدل‌های مجوز مبتنی بر نقش و سیاست وجود دارند که دسترسی صحیح به منابع را هنگامی که کاربران سعی می‌کنند پس از احراز هویت به منابع دسترسی پیدا کنند، تضمین می‌کنند.

اگر به دنبال راهنمای یادگیری در مورد آن هستید، این مقاله برای شما مفید خواهد بود Authentication and Authorization.

در این آموزش گام به گام، ما بر روی تنظیم احراز هویت با استفاده از ارائه دهندگان OAuth مانند Google و Github با Next.js کاربرد. استفاده خواهیم کرد Auth.js یا Next-Auth V5، یک ابزار احراز هویت منبع باز برای وب برای انجام تنظیمات تأیید اعتبار.

بیایید شروع کنیم 🚀

توجه: خیلی خوب خواهد بود که همانطور که بخش های این مقاله را دنبال می کنید کدنویسی کنید. کد منبع استفاده شده در این مقاله به صورت عمومی در GitHub برای دسترسی و استفاده شما در دسترس است. می توانید لینک آن را در انتهای این مقاله بیابید.

فهرست مطالب

یک پروژه روتر برنامه Next.js ایجاد کنید

ابتدا با استفاده از دستور زیر از ترمینال/خط فرمان، یک برنامه Next.js ایجاد کنید.

npx create-next-app@latest

مطمئن شوید که آخرین Node.js را نصب کرده اید.

درخواست شما را راهنمایی می کند تا یک برنامه Next.js با نام دلخواه خود، پشته فناوری هدف (جاوا اسکریپت یا TypeScript) و چند پیکربندی دیگر ایجاد کنید. در مورد من، من با انتخاب های زیر پیش رفتم:

یک پروژه Next.js ایجاد کنید

لطفاً توجه داشته باشید که من جاوا اسکریپت، TailwindCSS و مهمتر از همه، را انتخاب کرده ام App Router. پس از اتمام پروژه، دایرکتوری را به دایرکتوری پروژه تغییر دهید و با استفاده از دستور زیر سرور محلی را راه اندازی کنید:

yarn dev # Or its npm, pnpm, bun equivalent

اکنون سرور محلی به صورت پیش فرض روی http://localhost:3000 اجرا می شود.

Auth.js، با نام Next-Auth (نسخه 5)

Auth.js یک کتابخانه احراز هویت منبع باز است که با چارچوب های جاوا اسکریپت مدرن مانند Next.js، Svelte و Express ادغام می شود. قبلاً این پروژه فقط برای Next.js در دسترس بود و بنابراین قبلاً Next-Auth نامیده می شد. امروزه، بخشی از Auth.js هنوز پشتیبانی می شود Next-Auth، اما در کنار آن، وجود دارند SvelteKitAuth، و ExpressAuth نیز موجود است.

نصب و راه اندازی

ما در حین نوشتن این مقاله از Next-Auth نسخه 5 که در مرحله بتا است استفاده خواهیم کرد. یک ترمینال باز کنید و نصب کنید next-auth با دستور زیر:

yarn add next-auth@beta

# Or
# npm install next-auth@beta
# pnpm add next-auth@beta
# bun add next-auth@beta

راه اندازی محیط

یک فایل به نام ایجاد کنید .env.local در ریشه پوشه پروژه شما. باید یک کلید به نام اضافه کنیم AUTH_SECRET با یک ارزش می توانید با استفاده از دستور زیر از ترمینال یا خط فرمان خود، راز را ایجاد کنید:

npx auth secret

شما باید خروجی زیر را ببینید که از شما می خواهد جفت کلید-مقدار را کپی کنید و آن را در .env.local فایل

راز احراز هویت

از طرف دیگر، اگر از سیستم عامل Linux / Mac OS X استفاده می کنید، می توانید از دستور زیر برای ایجاد auth Secret استفاده کنید:

openssl rand -base64 33

به هر روشی که راز را ایجاد می‌کنید، لطفاً مطمئن شوید که یک جفت کلید-مقدار در فایل .env.local مانند زیر ایجاد کنید:

VS Code - Auth Secret

تنظیمات: `auth.js` فایل

بعد، a ایجاد کنید auth.js فایل در ریشه پوشه پروژه با کد زیر:

import NextAuth from "next-auth";

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        // WE WILL ADD THINGS HERE SHORTLY
    ],
});

در اینجا ما یک پیکربندی مینیمالیستی از Next-Auth ایجاد کرده‌ایم تا از قابلیت‌هایی مانند استفاده کنیم signIn، signOut، همراه با یک auth شی ای که می تواند تمام اطلاعات مربوط به جلسه و کاربر وارد شده در جلسه را در اختیار ما قرار دهد. را GET، و POST هندلرها در یک مسیر گردان استفاده خواهند شد که به زودی با آن آشنا خواهیم شد.

در این مرحله، تنها پیکربندی که به آن منتقل می کنیم NextAuth خالی است providers آرایه با این حال، زیاد نگران آن نباشید، زیرا به زودی آن را پر خواهیم کرد.

را `callback` مسیر

اکنون یک route handler مخصوص Next-Auth ایجاد می کنیم. هنگامی که ما پس از مدتی آنها را پیکربندی کنیم، این کنترل کننده مسیر به عنوان یک مسیر برگشت تماس از سوی ارائه دهندگان OAuth استفاده می شود.

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

قطعه کد زیر را در فایل route.js کپی و پیست کنید.

// Here the GET and POST is being imported
// from the auth.js file before we export
// them from here.

export { GET, POST } from "@/auth";

همین است. ما با نصب، راه اندازی و تنظیمات اولیه Next-Auth تمام شده ایم. اجازه دهید اکنون تمرکز خود را به ساخت رابط کاربری (UI) مورد نیاز برای احراز هویت تغییر دهیم.

ایجاد فرم ورود

ایجاد یک components پوشه را در ریشه پوشه پروژه خود قرار دهید و یک فایل به نام ایجاد کنید LoginForm.jsx زیر آن با کد زیر:

import { doSocialLogin } from "@/app/actions";

const LoginForm = () => {
    return (
        <form action={doSocialLogin}>
            <button 
                className="bg-pink-400 text-white p-1 rounded-md m-1 text-lg" 
                type="submit" 
                name="action" 
                value="google">
                Sign In With Google
            </button>

            <button 
                className="bg-black text-white p-1 rounded-md m-1 text-lg" 
                type="submit" 
                name="action" 
                value="github">
                Sign In With GitHub
            </button>
        </form>
    );
};

export default LoginForm;

در اینجا چند نکته قابل ذکر است:

ما یک فرم ورود با دو دکمه ارسال برای ورود به سیستم با Google و GitHub ایجاد کرده ایم.
ما یک عملکرد سرور به نام وارد کرده ایم doSicialLogin و از آن به عنوان عمل فرم استفاده کنید تا وقتی کاربر فرم را با کلیک بر روی هر یک از دکمه ها ارسال می کند، تابع فراخوانی شود. عملکرد عملکرد سرور هنوز وجود ندارد، به زودی آن را ایجاد خواهیم کرد.
هر یک از دکمه های ارسال دارای همان مقدار مشخصه نام است که نامیده می شود action. شناسایی دکمه ای که ارسال فرم را در داخل عملکرد سرور فعال می کند، مفید است.

صفحه اصلی

حالا، آن را باز کنید page.js فایل زیر app/ پوشه و محتوای آن را با کد زیر جایگزین کنید:


import LoginForm from "@/components/LoginForm";

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center m-4">
      <h1 className="text-3xl my-3">Hey, time to Sign In</h1>
      <LoginForm />
    </div>
  );
}

این یک جزء ساده است که وارد می کند LoginForm ما در بالا ایجاد کردیم و از آن در JSX استفاده کردیم. اگر اکنون سعی کنید به برنامه دسترسی داشته باشید، به دلیل عدم وجود برنامه با خطا مواجه می شوید doSocialLogin عملکرد سرور مورد استفاده در فرم ورود به سیستم. بیایید آن را درست کنیم.

Next.js Server Actions: ورود و خروج

Server Action در Next.js ساخته شده اند React Actions که می‌توانید در مؤلفه‌های سرور و/یا تماس‌های مؤلفه‌های سرویس گیرنده تعریف کنید. اقدامات سرور جاوا اسکریپت هستند async توابعی که توسط تعامل کاربر با مشتری بر روی سرور اجرا می شود.

هنگامی که می خواهید فرمی را برای ایجاد، به روز رسانی یا حذف داده ها در سرور ارسال کنید، بیشتر به ایجاد تکنیک جهش داده کمک می کند. همچنین انجام اقدامات ایزوله سمت سرور مانند ارسال ایمیل، پردازش پرداخت ها، ورود به سیستم کاربر، خروج از سیستم و بسیاری موارد استفاده دیگر می تواند مفید باشد.

برای درک عمیق کاربردها و موارد استفاده از Server Actions، این مقاله را بخوانید.

یک پوشه به نام ایجاد کنید actions/ زیر app/ پوشه اکنون یک فایل به نام ایجاد کنید index.js زیر app/actions/ با کد زیر:


'use server'

import { signIn, signOut } from "@/auth";

export async function doSocialLogin(formData) {
    const action = formData.get('action');
    await signIn(action, { redirectTo: "/home" });
}

export async function doLogout() {
  await signOut({ redirectTo: "/" });
}

بگذارید بفهمیم آنجا چه اتفاقی می افتد.

ما از دستورالعملی به نام استفاده کردیم 'use server' در بالای فایل به Next.js اطلاع دهید که این فایل حاوی اقدامات سرور است و باید در سمت سرور اجرا شوند.
سپس دو عمل سرور را تعریف کرده ایم، doSocialLogin() و doLogout().
پیش از این، اقدام doSocialLogin() ما وارد کرده ایم LoginForm مؤلفه برای فراخوانی آن هنگام ارسال فرم ورود به سیستم. از این رو یک شی formData حاوی اطلاعات فیلدهای فرم ارسال شده را دریافت می کند. در مورد ما، فرم ورود هیچ فیلد دیگری به جز دو دکمه ارسال که مقدار نام یکسانی دارند، ندارد. action. بنابراین ما مقدار دکمه را با استفاده از بازیابی می کنیم action نام را برای مشاهده اینکه آیا کاربران برای ارسال فرم روی دکمه های Google یا GitHub کلیک کرده اند یا خیر.
داخل doSocialLogin() تابعی را که ما می نامیم signIn() از auth.js با گذراندن چند استدلال اولین استدلال این است که به آن بگویید Next-Auth در مورد ارائه دهنده ای که باید برای ورود به سیستم استفاده کنید. در مورد ما، این یکی خواهد بود google یا github. پارامتر دوم یک شی پیکربندی است که به auth.js در مورد صفحه تغییر مسیر پس از ورود به سیستم اطلاع می دهد. می گوید، پس از احراز هویت، به صفحه اصلی (/home route) هدایت شوید.
را doLogout() عمل فراخوانی می کند signOut() از auth.js استفاده کنید و در هنگام خروج از سیستم به root route(/) هدایت شوید.

اکنون به برنامه دسترسی پیدا کنید، باید آن را در حال اجرا ببینید و مانند تصویر زیر رابط کاربری را به شما نشان دهد. با کلیک بر روی هر یک از دکمه ها کار زیادی انجام نمی شود زیرا ما هنوز ارائه دهندگان را پیکربندی نکرده ایم، و خبر عالی این است که در مرحله بعدی این کار را انجام خواهیم داد.

فرم ورود

ورود به سیستم اجتماعی با Google Oauth

اجازه دهید ابتدا ورود به سیستم با Google کار کند. این یک روش چند مرحله ای است. ابتدا باید شناسه مشتری و راز سرویس گیرنده را از Google Cloud Console ایجاد کنیم. هنگامی که آنها را دریافت کردیم، باید ارائه دهنده Google را در قسمت پیکربندی کنیم auth.js فایل،

شناسه مشتری و راز از Google

به Google Cloud Console بروید و این مراحل را دنبال کنید تا شناسه مشتری و راز ایجاد کنید. همچنین می‌توانید از شناسه مشتری و راز مشتری استفاده کنید.

وارد کنسول Google Cloud شوید و روی آن کلیک کنید Credentials گزینه ای از منوی سمت چپ سپس بر روی آن کلیک کنید + CREATE CREDENTIALS از بالا پایین بیایید و آن را انتخاب کنید OAuth client ID گزینه ای که در تصویر زیر نشان داده شده است.
در صفحه بعد، را انتخاب کنید Web application به عنوان یک نوع برنامه، یک نام مناسب برای مشتری OAuth 2.0 بدهید. من ترجیح دادم آن را با نام پروژه خود حفظ کنم. سپس http://localhost:3000 را به عنوان URL مبدا مجاز جاوا اسکریپت ارائه کنید. این اطمینان حاصل می کند که مشتری و اسرار نمی توانند از جای دیگری استفاده شوند.
بعد، URL را ارائه دهید http://localhost:3000/api/auth/callback/google به عنوان مقدار URI تغییر مسیر مجاز. آیا این URI زنگ می زند 🔔؟ بله، این همان الگوی مسیری است که قبلاً با آن ایجاد کردیم route.js.
در نهایت بر روی CREATE دکمه
اکنون یک گفتگوی مودال با شناسه مشتری OAuth و مخفی ایجاد شده را خواهید دید. مطمئن شوید که آنها را کپی کرده اید، و در صورت تمایل می توانید آنها را در یک فایل JSON بارگیری کنید تا بعدا استفاده کنید.
را کلیک کنید OK برای بستن مدال

تنظیم محیط

در .env.local فایل دو ورودی اضافه کنید:

کلید GOOGLE_CLIENT_IDو مقدار، شناسه مشتری خواهد بود که در بالا ایجاد کردیم.
کلید GOOGLE_CLIENT_SECRET، و مقدار راز مشتری خواهد بود که در بالا ایجاد کردیم.

Google Client ID و Secret

ارائه دهنده Google را برای Next-Auth پیکربندی کنید

را باز کنید auth.js فایل و وارد کنید GoogleProvider همانطور که در زیر نشان داده شده است. همچنین، اضافه کنید GoogleProvider پیکربندی در providers آرایه همانطور که در کد زیر ذکر شده است.

لطفا توجه داشته باشید،

ما از شناسه مشتری و مخفی از متغیرهای محیطی استفاده می کنیم.
ما همچنین پیکربندی کرده‌ایم که یک رابط کاربری رضایت برای کاربرانمان ارائه کنیم تا هر بار که احراز هویت می‌کنند، رضایت خود را برای استفاده از تأییدیه Google خود ارائه کنند.

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

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        })
    ],
});

آن را از UI تست کنید

اکنون، زمان آن است که آن را آزمایش کنید Sign in with Google جریان بنابراین، به برنامه بروید و روی دکمه ورود با گوگل کلیک کنید. شما یک تغییر مسیر برای انتخاب یک حساب کاربری برای احراز هویت خواهید دید. اگر چندین حساب Google دارید، لطفاً یکی را که می‌خواهید با آن احراز هویت کنید، انتخاب کنید.

یک حساب - Google را انتخاب کنید

مرحله بعدی یک صفحه رضایت است که باید روی آن کلیک کنید Continue دکمه ورود به سیستم

صفحه رضایت - Google

پس از این کار به مسیری به نام هدایت می شوید /home زیرا اینگونه پیکربندی کرده ایم signIn() عملکرد بالا شما یک خطای 404 صفحه ای یافت نشد مشاهده خواهید کرد زیرا ما هنوز مسیر را ایجاد نکرده ایم. با این حال، بهترین بخش این است که احراز هویت ما موفقیت آمیز است.

صفحه اصلی 404

برای تأیید اعتبار کوکی ایجاد شده برای نشانه جلسه، ابزار توسعه مرورگر را باز کرده و به آن بروید Application برگه در پانل سمت چپ، را گسترش دهید Cookies گزینه ها و کلیک کنید http://localhost:3000. شما باید پیدا کنید authjs.session-token کوکی با مقدار رمز در پایین.

کوکی Google Auth

نمایش مشخصات کاربر LoggedIn

وقت آن است که تعمیر شود /home مسیر و چیزی غیر از خطای 404 را نشان می دهد. در مورد نمایش مشخصات کاربر وارد شده مانند نام و تصویر نمایه چطور؟ همچنین می‌توانیم زمانی که کاربر قبلاً وارد سیستم شده است، یک گزینه خروج برای خروج از برنامه نشان دهیم.

یک پوشه به نام ایجاد کنید home/ زیر app/ پوشه، و ایجاد یک page.js فایل زیر app/home/ با کد زیر:

import Image from "next/image";
import Logout from "@/components/Logout";
import { auth } from "@/auth";

import { redirect } from "next/navigation";

const HomePage = async () => {
    const session = await auth();

    if (!session?.user) redirect("/");

    return (
        <div className="flex flex-col items-center m-4">
            <h1 className="text-3xl my-2">
                Welcome, {session?.user?.name}
            </h1>
            <Image
                src={session?.user?.image}
                alt={session?.user?.name}
                width={72}
                height={72}
                className="rounded-full"
            />
            <Logout />
        </div>
    );
};

export default HomePage;

اینجا:

ما یک مسیر ثابت به نام ایجاد کرده ایم /home.
ما وارد کردیم Logout جزء ما هنوز مؤلفه خروج را ایجاد نکرده‌ایم، در مرحله بعد این کار را انجام خواهیم داد.
بعد وارد کردیم auth از auth.js. را auth یک تابع همگام است که اطلاعات جلسه، از جمله جزئیات کاربر وارد شده را به ما برمی گرداند.
ما اطلاعات جلسه را بازیابی کردیم و بررسی کردیم که آیا اطلاعات کاربر وارد شده در دسترس است یا خیر. اگر نه، کاربر را به مسیر اصلی که در آن فرم ورود داریم هدایت می کنیم. بنابراین از این طریق می توانیم از یک مسیر خاص در سطح صفحه محافظت کنیم.
در JSX، نام و تصویر کاربر وارد شده و مؤلفه Logout را نمایش می‌دهیم. بیایید کامپوننت Logout را ایجاد کنیم.

اضافه کردن عملکرد خروج (خروج)

یک فایل به نام ایجاد کنید Logout.jsx زیر components پوشه با کد زیر:


import { doLogout } from "@/app/actions"

const Logout = () => {
  return (
    <form action={doLogout}>
        <button 
            className="bg-blue-400 my-2 text-white p-1 rounded" 
            type="submit">
                Logout
        </button>
    </form>
  )
}
export default Logout

توضیح:

این یک کامپوننت ساده React با فرم و دکمه ارسال است.
با کلیک یک دکمه، فرم را ارسال می کنیم و آن را فراخوانی می کنیم doLogout() اقدام سرور که قبلاً ایجاد کرده ایم!

همین است. زمان امتحان نهایی است. ورود با گوگل را مانند قبل انجام دهید. صبر کنید، آیا به جای دیدن مشخصات کاربر وارد شده با چنین خطایی مواجه می شوید؟

تصویر بعدی-خطا

نگران نباشید. به این دلیل است که ما به Next.js در مورد منبع تصویر نمایه از Google اطلاع نداده‌ایم. را باز کنید next.config.mjs فایل و محتوا را با پیکربندی زیر جایگزین کنید:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com'
      },
    ],
  },
};

export default nextConfig;

در کد بالا، نام میزبان مورد اعتماد را به عنوان منبع تصویر ارائه کرده ایم. نام میزبان در خطا به عنوان پیشنهادی برای پیکربندی ما ذکر شد.

حالا UI را رفرش کنید. شما باید صفحه اصلی را با نام، تصویر و دکمه خروج از سیستم وارد شده مشاهده کنید. با کلیک بر روی دکمه خروج، شما را از برنامه خارج کرده و به فرم ورود هدایت خواهید کرد.

صفحه اصلی موفق

اکنون، شما همچنین می توانید کوکی ها را مانند دفعه قبل بررسی کنید. وقتی از سیستم خارج می شوید، کوکی نشانه جلسه را پیدا نخواهید کرد.

عجب! در نهایت، ما پس از پیاده سازی ورود به سیستم اجتماعی با استفاده از Google با استفاده از Next-Auth/Auth.js اینجا هستیم.

اجازه دهید تنظیمات مربوط به GitHub را نیز به پایان برسانیم.

ورود به سیستم اجتماعی با GitHub OAuth

ما از بسیاری از کارهایی که تاکنون انجام شده است دوباره استفاده خواهیم کرد. ابتدا، اجازه دهید شناسه مشتری و راز سرویس گیرنده را برای یک برنامه GitHub OAuth ایجاد کنیم.

شناسه مشتری و راز از GitHub

وارد حساب GitHub خود شوید و به تنظیمات توسعه دهنده زیر این URL بروید. زیر OAuth Apps در بخش، برنامه های Oauth موجود خود را، در صورت وجود، پیدا خواهید کرد. اکنون، با کلیک بر روی دکمه در گوشه سمت راست بالای صفحه، یک برنامه OAuth جدید ایجاد کنید.

در مرحله بعد، باید چند جزئیات را مانند آنچه برای Google انجام دادیم، پر کنید. یک نام برنامه مناسب، نشانی اینترنتی صفحه اصلی به عنوان http://localhost:3000، و URL مجاز بازگشت به تماس را وارد کنید. لطفا ارائه دهید http://localhost:3000/api/auth/callback/github به عنوان مقدار URL بازگشت به تماس مجاز. سپس، برنامه را ثبت کنید.

مشاهده خواهید کرد که شناسه مشتری ایجاد شده است. لطفا کپی کنید و در جایی امن نگه دارید. حال، روی آن کلیک کنید Generate a new client secret دکمه ایجاد یک راز مشتری.

یک راز مشتری جدید برای شما ایجاد خواهد شد. لطفاً این یکی را نیز کپی کرده و ایمن نگه دارید.

تنظیم محیط

دو متغیر محیطی جدید دیگر ایجاد کنید GITHUB_CLIENT_ID و GITHUB_CLIENT_SECRET و مقادیر مربوطه ای را که ایجاد کرده ایم اختصاص دهیم.

ارائه دهنده GitHub را از Next-Auth پیکربندی کنید

آخرین چیزی که باقی می ماند این است که ارائه دهنده GitHub را پیکربندی کنید. را باز کنید auth.js فایل و وارد کنید GitHubProvider همانطور که در زیر نشان داده شده است. سپس، شی GitHubProvider را به آن اضافه کنید providers آرایه

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

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        }),
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID,
            clientSecret: process.env.GITHUB_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        })
    ],
});

همین است. به UI برگردید و با GitHub وارد شوید. باید صفحه‌ای برای مجوز برنامه Oauth دریافت کنید. روی دکمه Authorize کلیک کنید.

بوم! 💥

همان خطای قبلی، اما می دانید چگونه آن را برطرف کنید.

را باز کنید next.config.mjs را فایل کنید و ورودی دیگری به آن اضافه کنید remotePatterns آرایه برای تصاویر GitHub.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com'
      },
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com'
      },
    ],
  },
};

export default nextConfig;

اکنون صفحه را بازخوانی کنید و باید نام، تصویر و دکمه خروج کاربر وارد شده را مشاهده کنید.

باور نکردنی! ما یاد گرفته‌ایم که هر دو ورود Google و GitHub Oauth را با استفاده از Next-Auth/Auth.js با روتر برنامه Next.js تنظیم و کدنویسی کنیم. این احساس شگفت انگیز است!