fullstack.org.ua

Auth.js · fullstack.org.ua

Початковий10 хв· Fullstack Team

Auth.js

Підключите Auth.js до Next.js і налаштуєте провайдери, адаптер та базову конфігурацію автентифікації.

Що таке Auth.js

Auth.js — бібліотека для автентифікації в JavaScript-застосунках. У Next.js вона дозволяє:

входити через OAuth-провайдерів, наприклад GitHub;
зберігати користувачів і пов’язані акаунти в базі даних;
отримувати поточну сесію на сервері;
виходити з акаунта;
захищати сторінки та серверні функції.

У Next.js використовується пакет next-auth, а конфігурація Auth.js зазвичай зберігається у файлі auth.ts у корені проєкту.

У цьому уроці ми налаштуємо:

GitHub як провайдер автентифікації.
Prisma як адаптер для збереження даних у SQLite.
API-маршрут Auth.js.
Вхід, вихід і читання сесії.

Встановлення залежностей

Для проєкту Next.js встановіть Auth.js, Prisma та адаптер Prisma:

bash

npm install next-auth @auth/prisma-adapter @prisma/client
npm install --save-dev prisma

prisma

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

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  sessionToken String   @unique
  userId       String
  expires      DateTime

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

typescript

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient();

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

typescript

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import { PrismaAdapter } from "@auth/prisma-adapter";

import { prisma } from "@/lib/prisma";

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),

  providers: [
    GitHub,
  ],

  session: {
    strategy: "database",
  },
});

tsx

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

export default async function HomePage() {
  const session = await auth();

  if (session?.user) {
    return (
      <main>
        <h1>Вітаємо, {session.user.name ?? session.user.email}</h1>

        {session.user.image && (
          <img
            src={session.user.image}
            alt="Аватар користувача"
            width={64}
            height={64}
          />
        )}

        <form
          action={async () => {
            "use server";

            await signOut();
          }}
        >
          <button type="submit">Вийти</button>
        </form>
      </main>
    );
  }

  return (
    <main>
      <h1>Вхід до застосунку</h1>

      <form
        action={async () => {
          "use server";

          await signIn("github");
        }}
      >
        <button type="submit">Увійти через GitHub</button>
      </form>
    </main>
  );
}