09.01.2024 в 20:50

Аутентификация приложения Next.js с помощью аутентификации интерфейса Hanko

Hanko — это легкое решение для аутентификации пользователей с открытым исходным кодом, которое поможет вам выйти за рамки паролей.

Интегрируйте Hanko с Next.js

Узнайте, как быстро добавить аутентификацию и профиль пользователя в приложение Next.js с помощью Hanko.
Сначала создайте новое приложение Next.js.

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter BLOGapp"

Теперь установите элементы интерфейса Hanko.

yarn add @teamhanko/hanko-elements

Теперь запустите сервер разработки:

yarn dev

Теперь перейдите на https://cloud.hanko.io и зарегистрируйтесь для доступа к API.

Введите подходящее название проекта и введите URL-адрес приложения. Вы можете получить доступ к элементам интерфейса hanko только по этому URL-адресу http://localhost:3000.
Теперь создайте .env файл в каталоге приложения и скопируйте URL-адрес Hanko API в файл .env.

NEXT_PUBLIC_HANKO_API_URL = <Hanko api url from general setting>

Теперь перейдите на сайт supabase.com, зарегистрируйтесь и создайте проект.
Теперь перейдите к настройкам проекта и нажмите «database» справа.
Перейдите в Node.js, скопируйте URL-адрес базы данных и добавьте его в файл .env.

DATABASE_URL = postgresql://postgres:[YOUR-PASSWORD]@db.dshyzhthijimhivhaeyq.supabase.co:5432/postgres

Замените пароль паролем проекта, который вы ввели при создании проекта. Теперь все готово.

Установите Prisma

yarn add -d prisma

Наконец, настройте Prisma с помощью команды init командной строки Prisma:

yarn prisma init

Теперь перейдите в папку prisma и откройте файл Schema.prisma.

Добавьте этот код в верхнюю часть файла схемы для подключения к поставщику внешнего интерфейса клиента базы данных.

generator client {
  provider = "prisma-client-js"
}

Теперь подключитесь к базе данных postgresql.

datasource db {
  provider     = "postgresql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

Создайте модель с именем пользователя, чтобы сохранить пользователя для входа в серверную часть.

model User {
  id    String @id @unique 
  email String @unique
}

Теперь запустите эту команду для переноса базы данных.

yarn prisma migrate dev --name init

Теперь создайте папку с именем db в папке src.
В index.js скопируйте и вставьте этот код. Здесь мы импортировали PrismaClient и настроили базу данных для использования в серверной части.

import { PrismaClient } from '@prisma/client'

declare global {
  // eslint-disable-next-line no-var
  var cachedPrisma: PrismaClient
}

let prisma: PrismaClient
if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient()
} else {
  if (!global.cachedPrisma) {
    global.cachedPrisma = new PrismaClient()
  }
  prisma = global.cachedPrisma
}

export const db = prisma

Теперь app/api/auth/route.ts. Для сериализации файлов cookie мы будем использовать

import { db } from "@/db";
import { serialize } from "cookie";




export  async function POST(request:Request) {

    // Handle the POST request here
    // You can access request data using req.body
    const data = await request.json();
    const {id,email} = data;
    if (!id || !email){
        return Response.json({
            message:"Missing Data in body",

        },{
            status:404
        })
    }

    const already_user = await db.user.findFirst({
      where:{
        id:id
      }
    })
    if (already_user)
    { 

      const ck = serialize("user_id",id,{
        secure:process.env.NODE_ENV === "production",
        httpOnly:true,
        path:"/",
      })
      const resp = Response.json({
        message:"User already existed and init login",

    },{
        status:200
    })

    resp.headers.set("Set-Cookie",ck)
    return resp
    }
    try {
        const user = await db.user.create({
          data: {
            id: id,
            email: email,
          },
        });
        const ck = serialize("user_id",user.id,{
          secure:process.env.NODE_ENV === "production",
          httpOnly:true,
          path:"/",
        })
        const resp = Response.json(
          {
              message:"Account is created",
              user: user
          },
          {
              status:201
          }
      )
      resp.headers.set('Set-Cookie',ck);

        return resp
      } catch (error) {
        console.log(error)
        return Response.json({ message: 'Failed to save user' },{status:400})
      }






}

Источник:

#JavaScript #PostgreSQL #Next.js

Войти на сайт

Аутентификация приложения Next.js с помощью аутентификации интерфейса Hanko

Интегрируйте Hanko с Next.js

Установите Prisma

Источник: