Next.js теперь является одной из официально рекомендуемых платформ React для создания приложения React, которое популярно для веб-сайтов, отображаемых на стороне сервера и статически генерируемых. Уже существует несколько вариантов защиты веб-приложения со стороны клиента. Но ни один из них не настраивается с помощью экосистемы Next.js. В этой статье мы проведем вас через процесс интеграции Next.js с NextAuth.js, что позволит вам легко добавлять функции аутентификации в ваши приложения Next.js.

Предварительные требования: прежде чем мы углубимся в интеграцию, убедитесь, что у вас установлено следующее:

  1. Node.js и npm (менеджер пакетов узлов)
  2. Базовое понимание React и Next.js

Шаг 1. Настройка проекта Next.js Если вы еще этого не сделали, создайте новый проект Next.js, а затем установите next-auth с помощью следующей команды:

npm install next-auth
# or
yarn add next-auth

Шаг 2: Хотя сейчас Next.js поддерживает appDir маршрутизацию, я решил использовать маршрутизацию на основе страниц, которая более стабильна. Создание маршрута API аутентификации NextAuth.js требует маршрут API для обработки запросов, связанных с аутентификацией. В проекте Next.js создайте новую папку с именем pages/api, если она еще не существует. Затем создайте файл с именем [...nextauth].js внутри этой папки:

// pages/api/[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: "YOUR_GOOGLE_CLIENT_ID",
      clientSecret: "YOUR_GOOGLE_CLIENT_SECRET",
    }),
    // Add other authentication providers here (e.g., GitHub, Facebook, etc.)
  ],
});

Шаг 3. Настройка клиентской стороны NextAuth.js Затем настройте клиентскую часть NextAuth.js, создав пользовательский файл _app.js в каталоге pages. Это позволяет нам обернуть все приложение AuthProvider, предоставляемым NextAuth.js:

// pages/_app.js
import { Provider } from "next-auth/client";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

Шаг 5. Реализация аутентификации в компонентах После завершения настройки вы можете реализовать аутентификацию в своих компонентах, используя хук useSession, предоставленный NextAuth.js:

import { useSession, signIn, signOut } from "next-auth/client";

function AuthComponent() {
  const [session, loading] = useSession();

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      {!session ? (
        <button onClick={signIn}>Sign In</button>
      ) : (
        <>
          <p>Welcome, {session.user.name}!</p>
          <button onClick={signOut}>Sign Out</button>
        </>
      )}
    </div>
  );
}

Шаг 6: Запустите сервер разработки. Теперь вы можете запустить сервер разработки и увидеть аутентификацию в действии.

В этой статье мы рассмотрели, как интегрировать Next.js с NextAuth.js, чтобы обеспечить безопасную аутентификацию в ваших веб-приложениях. NextAuth.js упрощает процесс настройки различных поставщиков аутентификации и позволяет вам сосредоточиться на создании надежных пользовательских интерфейсов. Вы можете расширить эту реализацию, добавив дополнительных поставщиков аутентификации, обработав роли пользователей и настроив поток аутентификации в соответствии с требованиями вашего приложения. Теперь у вас есть инструменты для простого создания аутентифицированных веб-приложений. Удачного кодирования!