Пошаговое руководство по реализации аутентификации пользователя с помощью NextJS и аутентификации Google.

В приложении, основанном на пользователе, существует потребность в аутентификации и управлении пользователями, чтобы иметь возможность предоставлять услуги разным пользователям. Вместо того, чтобы настраивать сложные системы входа в систему, NextJs предоставляет нам возможность настроить различные режимы интеграции входа с помощью пакета Next-auth.

Установка зависимостей

В этом руководстве используется пакет проверки подлинности Next.js. Если у вас не установлен Next.js, вы можете установить его через командную строку, используя следующую команду в CLI:

npm install create-next-app authentication

Приведенная выше команда создает папку с именем authentication с настройкой среды Next.js для использования. Затем вы можете установить пакет Next-authentication с помощью следующей команды:

npm i next-auth

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

Что такое ЮВТ?

JSON Web Token (JWT) — это стандарт, который используется для создания токенов для предоставления пользователям доступа к определенному веб-приложению. Он работает за кулисами и, будучи сгенерированным сервером, удостоверяет личность пользователя. Нам нужно будет сгенерировать токен для использования при интеграции нашей аутентификации Google.

Создание нашего маршрута Google API

Чтобы настроить аутентификацию Google в нашем приложении Next.js, нам нужно создать конечные точки API. Благодаря возможности Next.js для обработки API мы можем легко создавать маршруты API в каталоге pages/api. В Next.js по умолчанию все файлы в этом каталоге автоматически обрабатываются как конечные точки API, что упрощает его использование.

Для конечной точки аутентификации создайте папку с именем auth в папке pages/api и внутри нее создайте файл с именем [...nextauth].js. В этом файле. сначала добавляем импорт для пакета Next-auth:

import NextAuth from "next-auth";
import GoogleProvider from 'next-auth/providers/google'

Затем мы настраиваем маршруты API с учетными данными доступа Google и токеном JWT.

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: "GOOGLE_CLIENT_ID",
      clientSecret: "GOOGLE_CLIENT_SECRET",
      authorizationUrl: 'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
    })
  ],
  jwt: {
    encryption: true
  },
  secret: "secret token",
  //Callback here
});

Выше мы настроили поставщика аутентификации Next-auth в качестве метода аутентификации Google. Позже мы добавим наши учетные данные для доступа, чтобы иметь возможность использовать это, а затем создадим токен JWT, который будет аутентифицировать пользователя.

Использование обратного вызова для ограничения несанкционированного доступа

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

...
callbacks: {
    async jwt(token, account) {
      if (account ?.accessToken) {
        token.accessToken = account.accessToken
      }
      return token;
    },
    redirect: async (url, _baseUrl)=>{
      if (url === '/user') {
        return Promise.resolve('/')
      }
      return  Promise.resolve('/')
    }
}
});

Мы настроили URL-адрес перенаправления, который будет перенаправлять неавторизованных пользователей, которые получают доступ к маршруту user, который мы позже создадим, или любому другому маршруту обратно на домашнюю страницу после аутентификации.

Настройка состояний сеанса

Чтобы использовать Next-auth в приложении, нам нужно обернуть наши компоненты файла _app.js, как показано ниже:

...
import { SessionProvider } from "next-auth/react";
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
export default MyApp;

Повтор сеанса с открытым исходным кодом

Отладка веб-приложения в рабочей среде может быть сложной и трудоемкой. OpenReplay — это альтернатива FullStory, LogRocket и Hotjar с открытым исходным кодом. Это позволяет вам отслеживать и воспроизводить все, что делают ваши пользователи, и показывает, как ваше приложение ведет себя при каждой проблеме. Это похоже на то, как если бы инспектор вашего браузера был открыт, когда вы смотрите через плечо вашего пользователя. OpenReplay — единственная доступная в настоящее время альтернатива с открытым исходным кодом.

Удачной отладки, для современных фронтенд-команд — Начните бесплатно отслеживать свое веб-приложение.

Настройка функциональности страницы входа

Теперь, когда Next-auth добавлен в наше приложение, мы можем создать нашу страницу входа. Во-первых, мы настроим нашу страницу для отображения кнопки Sign in, если пользователь не аутентифицирован, иначе она вернет наше приложение. Для этого мы модифицируем файл index.js, как показано ниже:

import { useSession, signIn, signOut } from "next-auth/react"
export default function Home() {
  const { data: session } = useSession();
  if (session) {
    return (
      <div className={styles.container}>
        Welcome user<br />
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }
  return (
    <div className={styles.container}>
      Click to sign into your user account <br />
      <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
}

Приведенный выше код проверяет, есть ли у пользователя Session. Если Session нет, возвращается кнопка Sign in, иначе возвращается кнопка Sign out.

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

Настройка учетных данных Google Cloud Console API

Чтобы получить учетные данные для доступа к Google, вам необходимо войти в Консоль Google Cloud. Войдите, используя свою учетную запись Google, и создайте новый проект. Под + Create credentials в верхней строке меню выберите OAuth Client id. Если вас попросят Настроить экран согласия, нажмите эту кнопку. На открывшейся новой странице выберите external для типа пользователя и нажмите create. Затем введите имя приложения и адрес электронной почты, затем сохраните и продолжите. Оставьте разделы scope и Test users пустыми и нажмите Сохранить и продолжить. Вернитесь на панель инструментов, повторите первый шаг и нажмите Oauth Client id. Выберите Веб-приложение в качестве типа приложения. Нажмите на Add URI и введите http://localhost. Наконец, в разделе Authorized redirect URIs нажмите Add URI и в соответствующем поле введите http://localhost/api/auth/callback/google. Затем создайте ключ аутентификации. Скопируйте идентификатор клиента и секрет клиента и добавьте их в свое приложение для использования.

С этим добавлением мы теперь можем войти в приложение, используя логин электронной почты Google. Вы можете запустить свое приложение через интерфейс командной строки с помощью следующей команды и просмотреть его в своем браузере:

npm run dev

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

Создание защищенного маршрута

С помощью Next-auth мы также можем настроить защищенные маршруты. Создайте файл с именем protectedpage.js в каталоге pages и заполните его следующим кодом:

import { getSession } from "next-auth/react";
import React from "react";
function protectedpage() {
  return (
    <div>
      <h1>Protected Page</h1>
    </div>
  );
}
export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
    return {};
  }
  return {
    props: {
      user: session.user,
    },
  };
}
export default protectedpage;

Приведенный выше код использует функцию для проверки существования Session, чтобы разрешить доступ к странице. Если Session не существует, пользователь будет перенаправлен на маршрут "``/``", который является домашней страницей приложения.

Мы можем настроить страницу перенаправления под названием user.js со следующим кодом:

import React from "react";
import { useSession } from "next-auth/react";
function user() {
  const { data: session } = useSession();
  if (!session) {
    return <p>You are not logged in.</p>;
  }
  return <h1>you are logged in</h1>;
}
export default user;

Затем в файле protectedpage.js мы можем установить расположение заголовка, чтобы вернуться на страницу перенаправления вместо домашней страницы:

...
context.res.writeHead(302, { Location: "/user" });
...

Заключение

Мы подошли к концу этого руководства, где узнали, как интегрировать пакет Next-authentication и использовать основной логин Google в приложении Next.

Первоначально опубликовано на https://blog.openreplay.com 16 декабря 2021 г.