تنظیم اعتبار بعدی با فهرست برنامه جدید

ek3nk4r 2023-06-25

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

پیشنهاد ویژه

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

من به دنبال راه‌هایی برای راه‌اندازی next-auth با فهرست برنامه جدید بودم و هیچ وبلاگی پیدا نکردم که مراحل انجام واقعی آن را ارائه دهد.

در اینجا مراحل تنظیم آن آمده است.

برای این، من از ساختار فایل scr در پروژه بعدی خود استفاده نکردم.

من اعتبار بعدی را نصب می کنم

npm install next-auth

ii یک مسیر api اضافه کنم

touch app/api/auth/[...nextauth]/routes.ts

داخل مسیرها کد زیر را اضافه کنید

import { authOptions } from "@/utils/authoptions";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

این همه درخواست‌های مربوط به اعتبار بعدی را مدیریت می‌کند.
باید authOptions را ایجاد کنیم

iii ایجاد authOptions

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

mkdir utils

touch authOptions.ts

داخل فایل authOptions موارد زیر را اضافه کنید

import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      authorize(credentials: any, req) {
        // database operations
        return {
          id: "1",
          Email: credentials.email,
        };
      },
    }),
  ],
};

iv اضافه کردن متغیرهای محیطی مورد نیاز

next auth به متغیر محیطی زیر نیاز دارد

# this is for jwt encording
NEXTAUTH_SECRET='supersecretkey'

#used to specify the url to the site
NEXTAUTH_URL='http://localhost:3000'

تغییر به جلسات رسیدگی در سمت مشتری

v ایجاد یک ارائه دهنده جلسه

touch providers

touch SessionProvider.tsx

سپس کد زیر را اضافه کنید

"use client";

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

type sessionProps = {
  children: React.ReactNode;
};
function NextAuthSessionProvider({ children }: sessionProps) {
  return <SessionProvider>{children}</SessionProvider>;
}

export default NextAuthSessionProvider;

vi افزودن ارائه دهنده به layout.tsx

آن را در تابع rootLayout قرار دهید


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
      </body>
    </html>
  );
}

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

اینجا یک لینک به کد کامل است https://github.com/nelsonchege/next-auth-with-app-directory

ek3nk4r 2023-06-25

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