Next.js теперь является одной из официально рекомендуемых платформ React для создания приложения React, которое популярно для веб-сайтов, отображаемых на стороне сервера и статически генерируемых. Уже существует несколько вариантов защиты веб-приложения со стороны клиента. Но ни один из них не настраивается с помощью экосистемы Next.js. В этой статье мы проведем вас через процесс интеграции Next.js с NextAuth.js, что позволит вам легко добавлять функции аутентификации в ваши приложения Next.js.
Предварительные требования: прежде чем мы углубимся в интеграцию, убедитесь, что у вас установлено следующее:
- Node.js и npm (менеджер пакетов узлов)
- Базовое понимание 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 упрощает процесс настройки различных поставщиков аутентификации и позволяет вам сосредоточиться на создании надежных пользовательских интерфейсов. Вы можете расширить эту реализацию, добавив дополнительных поставщиков аутентификации, обработав роли пользователей и настроив поток аутентификации в соответствии с требованиями вашего приложения. Теперь у вас есть инструменты для простого создания аутентифицированных веб-приложений. Удачного кодирования!