NextJs 13 ичинде сырсөзсүз кирүү

Бул макалада NextAuth.js китепканасын колдонуу менен Next.js долбоорунда сырсөзсүз аутентификацияны ишке ашыруу үчүн зарыл болгон кадамдар каралат. Кошумчалай кетсек, буга жетишүү үчүн Prisma'ны база адаптерибиз катары колдонобуз.

Сырсөзсүз аутентификация салттуу колдонуучу атын жана паролду айкалыштыруу зарылдыгын жокко чыгарган инновациялык ыкма. Анын ордуна, ал электрондук почта сыйкырдуу шилтемелери же SMS аркылуу жөнөтүлгөн бир жолку коддор сыяктуу альтернативдүү ыкмаларды колдонуу менен коопсуз жана колдонуучуга ыңгайлуу аутентификация тажрыйбасын сунуштайт.

Next.js – жөнөкөйлүгү жана натыйжалуулугу менен белгилүү болгон веб-тиркемелерди куруу үчүн популярдуу React алкагы. Next.js үчүн ачык-айкын иштелип чыккан аныктыгын текшерүү китепканасы болгон NextAuth.jsти интеграциялоо аркылуу биз проектибизге сырсөзсүз аутентификацияны оңой киргизе алабыз.

Кошумчалай кетсек, биз Prisma маалымат базасына адаптер катары таянабыз. Prisma бул ORM (объект-байланыш картасы) куралы, ал тип боюнча коопсуз жана автоматтык түрдө түзүлгөн сурам куруучу менен камсыз кылуу аркылуу маалымат базасынын өз ара аракеттенүүсүн жөнөкөйлөтөт. Бул PostgreSQL, MySQL жана SQLite, анын ичинде бир нече маалымат базаларын колдойт, бул биздин аныктыгын текшерүүнү ишке ашыруу үчүн ар тараптуу тандоо.

Бул колдонмодо биз Next.js долбоорунда NextAuth.js аркылуу сырсөзсүз аутентификацияны кантип орнотуу жана конфигурациялоо боюнча этап-этабы менен нускамаларды беребиз. Биз ошондой эле Prisma'ны биздин маалымат базасы адаптерибиз катары кантип интеграциялоону көрсөтөбүз, бул биздин тиркеме менен маалымат базасынын ортосунда үзгүлтүксүз байланышты камсыз кылат.

Эми сырсөзсүз аутентификацияны жана NextAuth.js менен Prisma мүмкүнчүлүктөрүн колдонуу менен Next.js тиркемесинин коопсуздугун жана колдонуучу тажрыйбасын кантип жакшыртууну изилдейбиз. баштайлы.

Сырсөзсүз кирүү деген эмне?

Сырсөзсүз логин, аты айтып тургандай, аутентификация ыкмасы болуп саналат, ал салттуу колдонуучу аты менен сырсөз айкалыштарына болгон муктаждыкты жокко чыгарат. Анын ордуна, ал электрондук почта сыйкырдуу шилтемелер же SMS аркылуу жөнөтүлгөн бир жолку коддор сыяктуу колдонуучунун инсандыгын текшерүүнүн альтернативалуу ыкмаларын колдонот. Бул ыкма салттуу кирүү ыкмаларына караганда бир нече артыкчылыктарды сунуш кылат. Биринчиден, ал алсыз сырсөздөр же сырсөздү кайра колдонуу сыяктуу сырсөзгө байланыштуу кемчиликтердин коркунучун жок кылат. Экинчиден, ал эстеп калуу жана татаал сырсөздөрдү киргизүү зарылдыгын алып салуу менен колдонуучунун тажрыйбасын жеңилдетет.

Электрондук почтанын сыйкырдуу шилтемелерин же бир жолку коддорду колдонуу менен сырсөзсүз кирүү үчүн бизге SMTP (Жөнөкөй почта өткөрүп берүү протоколу) сервери керек.

SMTP сервери Интернет аркылуу электрондук каттарды жөнөтүү үчүн жооптуу. Сырсөзсүз аутентификация контекстинде сервер сыйкырдуу шилтемелерди же бир жолку коддорду колдонуучунун катталган электрондук почта дарегине жөнөтөт. Колдонуучу кирүү процессин баштаганда, уникалдуу шилтеме же кодду камтыган электрондук кат түзүлүп, колдонуучуга жөнөтүлөт. Андан кийин колдонуучу шилтемени чыкылдатып же аутентификация процессин аяктоо үчүн кодду киргизе алат. SMTP сервери тиркеме менен колдонуучунун электрондук почта кызматынын ортосунда ортомчу болуп, аутентификация билдирүүлөрүнүн коопсуз жана ишенимдүү жеткирилишин камсыздайт. SMTP серверин колдонуу менен биз сырсөзсүз логинди эффективдүү ишке ашыра алабыз жана колдонуучуларыбыз үчүн кемчиликсиз аутентификация тажрыйбасын камсыздай алабыз.

Баштайлы!

Биринчиден, биз жаңы Next.js долбоорун жаратышыбыз керек. Бул үчүн, төмөнкү буйрукту колдонуңуз:

npx create-next-app@latest

Жаңы Next.js долбоорун түзгөндөн кийин, жаңы түзүлгөн долбоордун каталогуна өтсөңүз болот.

Долбоордун каталогун өзгөртүү менен, сиз Next.js долбоорунун түзүмүн түзгөн ар кандай папкаларды жана файлдарды изилдей аласыз.

Долбоордун структурасын түшүнүү Next.js тиркемеңизди натыйжалуу иштеп чыгуу жана уюштуруу үчүн абдан маанилүү. Расмий документацияга шилтеме кылуу менен, сиз мыкты тажрыйбаларды колдонуп, кодуңузду кантип структуралаштыруу, башкаруу жана статикалык активдерди башкаруу боюнча түшүнүк ала аласыз. кайра колдонулуучу компоненттерди түзүү.

Биздин көз карандылыктарды орнотуу

NextAuth.js аркылуу Next.js долбоорубузда сырсөзсүз аутентификацияны иштетүү үчүн, адегенде талап кылынган көз карандылыктарды орнотуу керек. Долбоорубузга NextAuth.js жана nodemailer кошуу үчүн ip next-auth nodemailer буйругун аткарыңыз.

Биз атайын nodemailer колдонобуз, анткени ал Node.js ичинде электрондук каттарды жөнөтүү үчүн популярдуу жана ар тараптуу модуль. Бул электрондук почта аркылуу сырсөзсүз аутентификация үчүн зарыл болгон сыйкырдуу шилтемелерди же бир жолку коддорду жөнөтүүнүн түз жана ишенимдүү жолун камсыз кылат.

Андан кийин, келгиле, Prisma биздин база адаптерибиз катары бириктирели. Команданы колдонуу менен талап кылынган Prisma пакеттерин орнотуу менен баштаңыз:

yarn add @prisma/client @next-auth/prisma-adapter

Бул пакеттер Next.js тиркемеси менен маалымат базасынын ортосунда үзгүлтүксүз байланышты камсыз кылат. Мындан тышкары, биз Prisma программасын иштеп чыгуучу көз карандылык катары орнотушубуз керек:

yarn add prisma --dev

Бул кадам бизде Prisma жана анын автоматтык түрдө түзүлгөн сурам куруучу менен иштөө үчүн керектүү шаймандарга ээ болушун камсыздайт.

Бул көз карандылыктарды орнотуу менен, Next.js долбоорубузда NextAuth.js жана Prisma аркылуу сырсөзсүз аутентификацияны ишке ашыруу үчүн негиз түздүк.

Prisma орнотуу

Next.js долбоорунда сырсөзсүз аутентификацияны колдонуу үчүн Prisma орнотуп, электрондук почтаны жөнөтүү үчүн SMTP серверине кирүү керек. Бул окуу куралы сизге электрондук каттарды жөнөтүү үчүн жеке Gmail каттоо эсебиңизди колдонууга жардам берет. Ийгиликтүү орнотуу үчүн төмөнкү кадамдарды аткарыңыз.

Биринчиден, долбооруңуздун тамырында "prisma" папкасын түзүңүз. Бул папка Prisma менен байланышкан файлдарды жана конфигурацияларды камтыйт. Андан кийин, "prisma" папкасынын ичинде "schema.prisma" деп аталган жаңы файлды түзүңүз Схема файлы маалымат базаңыздын түзүмүн аныктайт жана Prisma автоматтык түрдө түзүлгөн коду үчүн схема катары кызмат кылат.

Эгерде сиз схеманын түшүнүгү менен жаңы болсоңуз, кабатыр болбоңуз! Схема маалымат базасынын таблицаларын, талааларын, мамилелерин жана чектөөлөрүн аныктайт. Схеманы түзүү үчүн, сиз NextAuth.js расмий документтерине кайрылып, ал жерде берилген схеманын үлгүсүн көчүрүп алсаңыз болот. Бул схема башталгыч чекит жана колдонмоңуздун талаптарына ылайыкташтырылышы мүмкүн.

Андан кийин, долбооруңуздун тамырында ".env" файлын түзүңүз. Бул файл сиздин чөйрө өзгөрмөлөрүңүздү, анын ичинде SMTP сервериңиз үчүн керектүү конфигурацияларды сактайт. ".env" файлын толтуруу үчүн, төмөндө келтирилген конфигурациялардын үлгүсүн көчүрүп алсаңыз болот. Gmail каттоо эсебиңиздин эсептик дайындарын жана SMTP серверинин жөндөөлөрүн тиешелүү талааларга киргизиңиз.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Бул кадамдарды аткаруу менен сиз Prisma орнотуп, Gmail каттоо эсебиңиз аркылуу электрондук каттарды жөнөтүү үчүн SMTP серверин конфигурациялайсыз. Бул даярдыктар Next.js долбооруңузда сырсөзсүз аутентификация агымын иштетүү үчүн абдан маанилүү.

Эскертүү

Эгер Google аккаунтуңуз үчүн эки факторлуу аутентификацияны (2FA) иштеткен болсоңуз, колдонмо сырсөзүн түзүшүңүз керек. Колдонмонун сырсөзү – бул Google каттоо эсебиңиздин негизги сырсөзүн көрсөтпөстөн, белгилүү бир колдонмолорго же түзмөктөргө кирүү мүмкүнчүлүгүн берген өзүнчө сырсөз. Колдонмонун сырсөзүн түзүү үчүн төмөнкү нускамаларды аткарыңыз.

1. https://myaccount.google.com/ дарегине баш багып, Google Каттоо эсебинин жөндөөлөрүнүн барагына өтүңүз.

"Коопсуздук" өтмөгүнө өтүңүз.
"2FA" бөлүмүн издеп, ылдый жылдырып, "Колдонмонун сырсөздөрү" тандаңыз.

Коопсуздукту текшерүү үчүн сизден Google аккаунтуңуздун сырсөзүн кайра киргизүү сунушталышы мүмкүн.
"Колдонмону тандоо" ачылуучу тизмеден "Почта" же "Башка (Ыңгайлаштырылган аталыш)" тандаңыз.

"Почта" опциясы бар болсо, аны тандаңыз.
Эгерде "Почта" опциясы жок болсо, "Башка (Ыңгайлаштырылган аталыш)" тандаңыз жана идентификациялоо үчүн ыңгайлаштырылган аталышты бериңиз.

"Generate" же "Generate Password" баскычын басыңыз.
Google сиз үчүн уникалдуу колдонмо сырсөзүн жаратат. Бул сырсөздү жазып алыңыз, анткени биз аны электрондук каттарды жөнөтүү үчүн колдонмобузда колдонобуз.
Бул түзүлгөн колдонмо сырсөзүңүздү Next.js тиркемеңиздин SMTP сервер конфигурациясында колдонуңуз. Кадимки Gmail аккаунтуңуздун сырсөзүн бул колдонмонун сырсөзүнө алмаштырыңыз.

Бул 2FA иштетилген учурда да, колдонмоңуз Gmail каттоо эсебиңиз аркылуу электрондук каттарды коопсуз жөнөтө аларын камсыздайт.

Supabase аркылуу PostgreSQL

Улантуудан мурун, биздин долбоор үчүн маалымат базасы туура иштеп жатканын текшеришибиз керек. Бул демо үчүн биз Supabase PostgreSQL маалымат базасын колдонууну сунуштайбыз. Supabase долбоору менен баштоо жана PostgreSQL байланыш URL дарегин алуу үчүн, бул кадамдарды аткарыңыз:

supabase.io дарегине өтүп, каттоо эсебиңизге кириңиз же каттоо эсебиңиз жок болсо, жаңысын түзүңүз.
Сиз киргенден кийин, сиз Supabase башкаруу панелине багытталасыз. Жаңы долбоорду баштоо үчүн "Жаңы долбоорду түзүү" баскычын чыкылдатыңыз.
Долбооруңузду атаңыз жана учурдагы жайгашкан жериңизге эң жакын аймакты тандаңыз. Сырсөзүңүздү эстеңиз, ал сизге кийинчерээк керек болот.
Долбоорду түзүп бүткөндөн кийин, сиз долбоордун башкаруу панелине өтөсүз. Берилиштер базасынын жөндөөлөрүнө кирүү үчүн сол капталдагы "Маалымат базасы" баскычын басыңыз.
"Маалымат базасы" бөлүмүндө PostgreSQL байланыш URL дарегин табасыз. Бул URL сиздин Supabase долбоорунун маалымат базасына туташуу үчүн бардык зарыл маалыматтарды камтыйт, мисалы, хост, порт, маалымат базасынын аты, колдонуучу аты жана сырсөз. Ал төмөнкү форматта көрсөтүлөт: postgres://<username>:<password>@<host>:<port>/<database>

PostgreSQL байланыш URL дарегин көчүрүп, аны коопсуз сактаңыз. Бул колдонмоңуз менен Supabase маалымат базасынын ортосунда байланыш түзүү үчүн керек болот.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Эми, келгиле, биздин Prisma кардарыбызды төмөнкү команданы иштетүү менен түзөлү: `npx prisma generat`.

Prisma Client - бул схемаңыздын негизинде автоматтык түрдө түзүлгөн маалымат базасы кардары. Демейки боюнча, Prisma Client `node_modules/.prisma/client' папкасында түзүлөт, бирок сиз [зарыл болсо, ыңгайлаштырылган жерди белгилей аласыз](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Андан кийин, биз баштапкы миграцияны түзүүгө киришебиз. Төмөнкү буйрукту аткарыңыз: `npx prisma migrate dev`. Ар бир миграцияга сыпаттама ат бере аласыз.

Prisma'да көчүрүү - бул убакыттын өтүшү менен маалымат базасынын схемасына оңдоолорду башкаруу үчүн колдонулган ыкма. Бул сизге алдын ала бар болгон маалыматтарды жоготпостон, маалымат базасынын түзүмүн өзгөртүүгө мүмкүндүк берет. Бул миграциялар өтө маанилүү, анткени алар сиздин маалымат базаңыздын схемасы өзгөргөн сайын колдонмоңуздун муктаждыктарына дал келишин камсыздайт. Prisma'нын миграциялык куралы менен сиз бул өзгөртүүлөрдү ыңгайлуу түрдө версиялап, колдоно аласыз жана артка кайтара аласыз, бул командалык ишти жөнөкөйлөтүү жана ар кандай чөйрөлөр боюнча бирдиктүү маалымат базасынын схемасын сактоо.

Эми, биз маалымат базабызды текшерсек, биз маалымат базасы бөлүмүндө чагылдырылган баштапкы миграциябыздагы өзгөрүүлөрдү көрө алабыз.

Алгачкы көчүрүү менен, биз миграция скриптинде аныкталгандай, маалымат базабыздын схемасына өзгөртүүлөрдү колдондук.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Prisma адаптери менен NextAuthJS орнотуу

Next.js тиркемесинде NextAuthJS аутентификация суроо-талаптарын башкаруу үчүн бардык кармалуучу маршрутту колдонот. Бул динамикалык маршрут Next.js файлга негизделген багыттоо тутумун колдонуу менен аныкталат.

"**app**" каталогуңуздун ичинде "**api**" папкасын түзүңүз. "**api**" папкасынын ичинде "**auth**" папкасын түзүңүз. "**auth**" папкасынын ичинде папка катары "**[...nextauth]**" деп аталган баарын кармай турган маршрутту түзүңүз. Акырында, catch-all route папкасынын ичинде "**route.ts**" файлын түзүп, төмөнкү кодду кошуңуз.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Баарын кармаган каттам файлында NextAuthJS китепканасын импорттоп, аутентификация параметрлерин, провайдерлерди жана конфигурацияларды орнотобуз. NextAuthJS келген суроо-талаптарды талдоо менен алектенет, керектүү аутентификация аракетин аныктайт жана көрсөтүлгөн варианттарга ылайык тиешелүү логиканы аткарат.

Берилген код NextAuthJSти Prisma адаптери менен электрондук почта провайдери аркылуу аутентификациялоо үчүн орнотот. Келгиле, ар бир билдирүүнү түшүндүрүп берели:

Импорттор:

PrismaAdapter жана PrismaClient тиешелүүлүгүнө жараша @next-auth/prisma-adapter жана **@prisma/client**дан импорттолот. Булар NextAuthJSти Prisma менен интеграциялоо үчүн колдонулат.
NextAuth next-auth ичинен импорттолгон жана Next.js колдонмолорунда аутентификацияны иштетүү үчүн негизги китепкана болуп саналат.
EmailProvider `кийинки аутентификация/провайдерлер/электрондук почтадан' импорттолгон жана электрондук почтага негизделген аутентификация үчүн провайдер катары колдонулат.

Prisma орнотуу:

PrismaClient мисалы жаңы PrismaClient() аркылуу түзүлдү. Бул Prisma ORM жана негизги маалымат базасы менен байланышууга мүмкүндүк берет.

Аутентификация параметрлери:

authOptions - NextAuthJS ичинде аутентификация үчүн конфигурацияны аныктаган объект.
adapter касиети PrismaAdapter(prisma) болуп орнотулган, ал NextAuthJS менен Prisma менен PrismaAdapter аркылуу туташтырат.
провайдерлер массиви бир гана камсыздоочуну камтыйт, EmailProvider. Ал керектүү электрондук почта серверинин чоо-жайы жана from электрондук почта дареги менен конфигурацияланган.

NextAuth Handler:

NextAuth функциясы аргумент катары authOptions менен чакырылып, аутентификация иштеткичти түзөт.
Натыйжадагы иштеткич handler өзгөрмөсүнө дайындалат.

Экспорттоо:

handler HTTP GET жана POST сурамдарын колдоо үчүн GET жана POST катары экспорттолот.

Эми серверибизди иштетип, функцияны сынап көрөлү. Биринчиден, иштеп чыгуу серверин yarn dev иштетип баштаңыз. Андан кийин, браузериңизди ачып, колдонмонун иштеп жатканын көрүү үчүн `localhost:3000'ге баш багыңыз.

Аутентификация функциясын текшерүү үчүн localhost:3000/api/auth/signin дарегине баш багыңыз. Бул жерде сиз NextAuthJS сыйкырына ээ болосуз. NextAuthJS менен камтылган берилген шаблон сырсөзсүз кирүү процессин иштетет. Аны сынап көрүү үчүн жарактуу электрондук почта дарегин киргизиңиз.

Электрондук катты тапшырганыңыздан кийин, NextAuthJS көшөгө артындагы процессти аткарат. Биринчиден, ал берилген электрондук почта дарегине уникалдуу кирүү шилтемесин камтыган электрондук катты түзүп, жөнөтөт. Бул шилтеме колдонуучу үчүн коопсуз аутентификация белгиси катары кызмат кылат. Андан кийин, колдонуучу шилтемени чыкылдатканда, NextAuthJS белгини текшерип, колдонуучунун аныктыгын текшерет.

Бул сырсөзсүз кирүү өзгөчөлүгү сырсөздөрдүн зарылдыгын жок кылуу менен коопсуздукту жана колдонуучу тажрыйбасын жогорулатат. Колдонуучулар электрондук почта аркылуу алынган шилтемени басуу менен өз аккаунттарына тез жана коопсуз кире алышат. Бул кирүү процессин жеңилдетет жана сырсөзгө байланыштуу кемчиликтердин коркунучун азайтат.

Колдонуучу NextAuthJS тарабынан түзүлгөн кирүү электрондук почтасын чыкылдатып, аныктыгын текшергенде, кирүү тажрыйбасын жеңилдетүү үчүн көшөгөнүн артында бир нече иш-аракеттер аткарылат.

1. Электрондук почта шилтемесин текшерүү: Колдонуучу кирүү шилтемесин чыкылдатканда, NextAuthJS шилтемеге кыстарылган аутентификация белгисин текшерет. Бул токен аутентификация процессинин коопсуздугун жана бүтүндүгүн камсыздайт.

2. Аутентификация процесси: Токен ийгиликтүү текшерилгенден кийин NextAuthJS колдонуучуну аныктайт жана аутентификация процессин аяктайт. Ал берилген токенге жана көп факторлуу аутентификация сыяктуу конфигурацияланган кошумча аутентификация факторлорунун негизинде колдонуучунун инсандыгын текшерет.

3. Сеанс түзүү: Ийгиликтүү аутентификациядан кийин NextAuthJS колдонуучу үчүн сеанс түзөт. Сеанс – бул колдонуучунун аутентификация статусун көрсөткөн жана аларга кийинки суроо-талаптар үчүн аутентификациядан өтпөстөн корголгон ресурстарга кирүү мүмкүнчүлүгүн берген туруктуу абал.

4. Cookies: NextAuthJS сеансты башкаруу үчүн колдонуучунун браузеринде HTTP гана коопсуз кукилерди орнотот. Бул кукилер бир нече суроо боюнча колдонуучунун аутентификацияланган абалын сактоодо чечүүчү ролду ойнойт. Кукилер, адатта, аутентификация конфигурациясына жараша сеанс кукисин жана кошумча жаңыртуу токен кукилерин камтыйт.

Session Cookie: Сеанс кукиси колдонуучунун сеансын уникалдуу идентификациялоочу сеанс идентификаторун (мисалы, туш келди түзүлгөн сап) камтыйт. Бул NextAuthJSке кийинки суроо-талаптарды туура сеанс жана колдонуучу менен байланыштырууга жардам берет.
CSRF Токен Cookie: NextAuthJS CSRF чабуулдарынан коргоо үчүн CSRF (Сайттар аралык өтүнүч жасалмалоо) токен кукисин орнотот. CSRF энбелгиси NextAuthJS тарабынан түзүлгөн жана кукиде сакталган уникалдуу маани. Бул колдонуучу тарабынан жасалган кийинки суроо-талаптардын аныктыгын текшерүү жана текшерүү үчүн колдонулат. Колдонуучу формаларды тапшырганда же сезимтал аракеттерди жасаганда, CSRF энбелгиси сурам зыяндуу булактан эмес, аутентификацияланган колдонуучунун сеансынан келип чыкканын камсыздоо үчүн суроонун баштарына же негизги бөлүгүнө кошулат.
Кайра чалуу URL кукиси: NextAuthJS аныктыгын текшерүү агымына багыттоодон мурун колдонуучу кирүүгө аракет кылган баштапкы URL'ди сактоо үчүн кайра чалуу URL кукисин орнотот. Бул куки NextAuthJS ийгиликтүү аутентификациядан кийин колдонуучуну каалаган бетке кайра багыттоого жардам берет. Бул колдонуучуну жалпы десанттык беттин ордуна көздөгөн жерине кынтыксыз кайтаруу менен жылмакай колдонуучу тажрыйбасын камсыздайт.

Коопсуз HTTP гана кукилерди колдонуу менен NextAuthJS аутентификация абалынын коопсуз жана бурмалоодон сакталышын камсыздайт. Cookie файлдары шифрленген жана зыяндуу актерлор тарабынан уруксатсыз кирүүгө же өзгөртүүгө жол бербейт.

NextAuthJSти Prisma адаптери менен Next.js тиркемеңизге ийгиликтүү интеграциялоо боюнча сонун иш! NextAuthJS тарабынан берилген жеңилдик жана ийкемдүүлүк менен сизде эми ишенимдүү аутентификация системасы бар.

Бул колдонмодо колдонулган код үчүн төмөндө шилтемеленген GitHub репозиторийинен караңыз: https://github.com/codelabsacademy/next-auth-guide.

Бирок эмне үчүн бул жерде токтоп калабыз? Эгерде сиз веб-иштеп чыгууну каалап жатсаңыз жана өз жөндөмүңүздү өркүндөтүүнү кааласаңыз, биздин веб-иштеп чыгуу лагерине тапшырууну карап көрүңүз. Биздин bootcamp сизди веб-иштеп чыгуунун динамикалык дүйнөсүндө ийгиликке жетүү үчүн зарыл болгон билим жана практикалык көндүмдөр менен жабдыган ар тараптуу окуу тажрыйбасын сунуштайт.

Биздин окуу лагерибизге кошулуу менен сиз алдыңкы технологиялар менен практикалык тажрыйбага ээ болосуз, реалдуу долбоорлордо иштейсиз жана тармактык эксперттерден жекелештирилген көрсөтмөлөрдү аласыз. Сиз башталгыч же тажрыйбалуу иштеп чыгуучу болсоңуз да, биздин программа сиздин веб-иштеп чыгуу жөндөмүңүздү кийинки деңгээлге көтөрүү үчүн иштелип чыккан.

Вебди иштеп чыгуу саякатыңызды тездетүү үчүн бул мүмкүнчүлүктү колдон чыгарбаңыз. Бүгүн биздин веб-иштеп чыгуу лагерине тапшырыңыз жана веб-иштеп чыгуунун кызыктуу тармагындагы потенциалыңыздын кулпусун ачыңыз. Келиңиздер, укмуштуудай санариптик тажрыйбаларды түзүп, желенин келечегин түзөлү.

Next.js 13 долбоорунда NextAuth.js жана Prisma менен сырсөзсүз кирүүнү ишке ашыруу

Сырсөзсүз кирүү деген эмне?

Баштайлы!

Биздин көз карандылыктарды орнотуу

Prisma орнотуу

Supabase аркылуу PostgreSQL

Карьера кызматтары

байланышта бололу