این یک آموزش ساده برای افزودن احراز هویت به برنامه Next14 با استفاده از Kinde است. برای دنبال کردن این آموزش، به یک حساب کاربری Kinde نیاز دارید. Kinde یک سرویس احراز هویت کاربر قدرتمند است که در چند دقیقه یکپارچه می شود. آنها یک سطح رایگان شگفت انگیز برای خدمات خود ارائه می دهند و روند ثبت نام ساده است.
برای ادامه فرآیند ثبت‌نام، Kinde از شما می‌خواهد نام کسب‌وکار خود (نامی که می‌خواهید با برنامه خود تماس بگیرید) و یک نام دامنه برای Kinde برای میزبانی برنامه خود اضافه کنید. همچنین یک منطقه پیش‌فرض برای جایی که داده‌های شما ذخیره می‌شوند تعیین می‌کند، اما در صورت لزوم می‌توانید آن را تغییر دهید.
پس از کلیک بر روی next، از شما می پرسد که آیا می خواهید یک پروژه را از ابتدا شروع کنید یا Kinde را به پایگاه کد موجود خود اضافه کنید. از آنجایی که Kinde را به برنامه Next.js خود اضافه می کنیم، دومی را انتخاب می کنم.
برای ارائه اسناد مناسب، Kinde همچنین در مورد فناوری مورد استفاده در برنامه خود سؤال خواهد کرد. ما از Next.js استفاده می کنیم، پس فقط روی آن کلیک کرده و ادامه دهید.
برای تکمیل فرآیند ثبت‌نام، باید روش‌هایی را انتخاب کنید که کاربران شما می‌توانند با Kinde احراز هویت شوند. به طور پیش‌فرض، Kinde احراز هویت ایمیل را ارائه می‌کند، اما می‌توانید سایر ارائه‌دهندگان احراز هویت مانند Google یا GitHub را اضافه کنید.
پس از انجام مراحل ثبت‌نام، Kinde راه‌هایی را برای شما ارائه می‌کند تا آن را با راهنماهای خود در برنامه خود ادغام کنید. فقط می توانید روی گزینه connect to Next.js codebase کلیک کنید.
برای افزودن Kinde به پروژه Next.js موجود خود به راهنمای شروع سریع هدایت خواهید شد. به پایین بروید و دستور نصب npm یا yarn را کپی کنید تا Kinde Next.js SDK را به عنوان یک وابستگی نصب کنید. همچنین، متغیرهای محیطی ارائه شده توسط Kinde را در یک فایل .env.local کپی کنید.
npm i @kinde-oss/kinde-auth-nextjs
تقریباً تمام شده است، آخرین کاری که باید انجام دهید این است که یک پوشه api در فهرست برنامه خود ایجاد کنید، یک پوشه auth در آن اضافه کنید، داخل پوشه auth یک بخش پویا که شبیه این است. [kindeauth]، یک فایل route.js به آن اضافه کنید و در نهایت آن را در داخل آن کپی کنید.
import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();
🎉تموم شدی! شما با موفقیت احراز هویت را با استفاده از Kinde به برنامه Next14 خود اضافه کردید.
برای شروع جریان تأیید اعتبار در برنامه خود، از مؤلفه های LoginLink و RegisterLink استفاده می کنید.
import {RegisterLink, LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";
Sign in
Sign up
🔥کد نویسی مبارک!
بیشتر از من می شنوید در:
ایکس
