Здравствуйте, меня зовут Игорь, и если вам нравится то, что я пишу, вам также может понравиться то, что я говорю в моем профиле в Твиттере, подойди и скажи: «Привет! 👋’.

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

💡 Вы можете найти репозиторий здесь.

Предпосылки:

  • Узел ≥ 12
  • Базовые знания Next.js
  • Базовые знания React и React Hooks

Что такое аутентификация?

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

Защита некоторого ресурса или набора ресурсов (физических или цифровых) обычно состоит из двухэтапного процесса: аутентификации и авторизации определенного пользователя системы (человека или машины).

Аутентификация — проверка того, кто находится в системе.

Авторизация — проверка того, какие разрешения есть у пользователя на доступ к данным ресурсам и какие права на него (чтение, обновление, удаление).

В этой статье мы сосредоточимся только на включении Аутентификации в наше приложение Next.js и оставим Авторизацию для следующей статьи.

Создание проекта Next.js

Чтобы создать новый проект Next.js, перейдите в командную строку и cd в папку, в которой вы хотите разместить проект. Next.js создаст проект в новой папке внутри вашего текущего выбранного каталога, поэтому вам не нужно создавать реальную папку проекта, а только родительский каталог, в котором вы хотите его сохранить.

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

npx create-next-app@latest

После завершения работы мастера cd перейдите в только что созданную папку для вашего проекта и запустите среду разработки.

cd auth0-app && npm run dev

Если все прошло хорошо, вы сможете увидеть следующую страницу при посещении https://localhost:3000.

Создание новых страниц

В настоящее время в нашем приложении есть только одна страница, index. Мы добавим новую защищенную страницу, которую должны видеть только вошедшие в систему пользователи, но на данный момент она будет видна всем, поскольку мы еще не внедрили аутентификацию в наше приложение.

Итак, в папке /pages создайте новый файл protected.js и вставьте следующий код (для простоты этого руководства мы будем повторно использовать таблицу стилей домашней страницы).

Теперь, если вы перейдете на https://localhost:3000/protected, вы увидите новую страницу, которую мы только что создали, которая в данный момент не очень защищена.

Создание компонента Navbar

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

Давайте сначала создадим новую папку в нашем проекте для хранения всех повторно используемых компонентов нашего приложения. Итак, в корне вашего проекта создайте новую папку /components. Внутри него мы создадим новый файл Navbar.js и добавим следующий код:

Мы также создали новую таблицу стилей для нашей панели навигации под /styles/Navbar.module.css со следующим содержимым:

Затем мы добавили наш новый компонент на обе наши страницы прямо под тегом <Head> каждого компонента React:

<Navbar /> // <-- Inserted this below the <Head> closing tag

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

OAuth и Auth0

Что такое OAuth

OAuth означает «Открытая авторизация» и представляет собой открытый стандарт авторизации, который может внедрить каждый. Это не API или служба, а набор хорошо зарекомендовавших себя правил, определяющих протокол, авторизующий устройства, API, серверы и приложения с токенами доступа, а не учетными данными, таким образом предоставляя клиентским приложениям «безопасный делегированный доступ».

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

Вот схема, где этот поток объясняется на высоком уровне. Пожалуйста, обратитесь к этому сообщению в блоге Мэтта Рэйбла для подробного объяснения OAuth — https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth.

Что такое Auth0

Auth0 (читается Auth Zero) — это услуга, предоставляемая компанией, которая обеспечивает как функции аутентификации, так и авторизации с множеством функций для управления доступом пользователей, ролями и простой plug-n-play для входа в социальные сети.

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

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

Преимущества Auth0

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

  1. Безопасность. Основное внимание Auth0 уделяется обеспечению безопасности и надежности, которые необходимы любому поставщику услуг аутентификации, поэтому много времени и ресурсов было потрачено на создание наиболее безопасной инфраструктуры данных для защиты всех данных клиентов в Auth0.
  2. Расширяемость — Auth0 позволяет легко расширяться, предоставляя разработчикам современные инструменты для расширения базовой службы, что приводит к появлению сторонних приложений, которыми можно поделиться на рынке Auth0.
  3. Дополнительная безопасность аутентификации. Вдобавок ко всему, что мы уже обсуждали, Auth0 позволяет легко включить многофакторную аутентификацию (MFA) в своей службе, избавляя от необходимости внедрять такую ​​​​услугу самостоятельно.
  4. Аналитика — Auth0 поставляется со встроенной аналитикой для отслеживания использования вашего веб-сайта или приложения, например количества новых пользователей, входов в систему, используемых поставщиков и т. д.
  5. Ориентировано на разработчиков — бесконечное количество ресурсов и руководств, специально созданных для разработчиков. Отличная документация и технологические библиотеки, которые помогут вам начать работу с Auth0 за считанные минуты на выбранном вами языке.

Реализация Auth0 в нашем приложении

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

Создание учетной записи Auth0 и приложения

Как следует из названия, это очень простой шаг. Перейдите на https://auth0.com/ и создайте новую учетную запись.

После авторизации вы будете перенаправлены на панель управления.

В боковом меню вы можете найти зарегистрированные приложения для вашей учетной записи Auth0. Вы найдете уже созданный для вас вариант по умолчанию, который вы можете настроить. Давайте откроем его, нажав на него.

Настройки нашего приложения Auth0

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

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

Обновление URI нашего приложения

В разделе URI приложений страницы настроек мы определяем Разрешенные URL-адреса для обратного вызова и выход из системы, поскольку они необходимы для правильной работы пакета Auth0 Next.js при обмене данными со службами Auth0. Убедитесь, что ваши поля заполнены, как на изображении ниже.

ПРИМЕЧАНИЕ. Другие поля необязательны, но рекомендуемы для дополнительной защиты вашего приложения.

Подготовка нашего проекта Next.js

Теперь, когда мы полностью настроили наш проект Auth0, пришло время подготовить наше приложение Next.js для обработки запросов аутентификации и авторизации в службах Auth0.

Установка SDK Next.js от Auth0

В каталоге вашего проекта выполните следующую команду, чтобы установить Auth0 Next.js SDK:

npm install @auth0/nextjs-auth0

Этот SDK будет предоставлять методы и переменные, которые позволят вам легко интегрировать Auth0 в ваше приложение Next.js и использовать все его функции.

Добавление наших переменных среды

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

  • AUTH0_SECRET: длинное секретное значение, используемое для шифрования файла cookie сеанса. Вы можете сгенерировать подходящую строку, используя openssl rand -hex 32 в командной строке.
  • AUTH0_BASE_URL: Базовый URL вашего приложения, в нашем случае это https://localhost:3000.
  • AUTH0_ISSUER_BASE_URL: URL-адрес вашего домена клиента Auth0. Если вы используете Пользовательский домен с Auth0, установите для этого параметра значение вашего личного домена, а не значение, указанное на вкладке Настройки.
  • AUTH0_CLIENT_ID: идентификатор клиента вашего приложения Auth0.
  • AUTH0_CLIENT_SECRET: Секрет клиента вашего приложения Auth0.

На данный момент наш Auth0 Next.js SDK полностью настроен и готов к использованию в нашем приложении.

ПРИМЕЧАНИЕ. Этот новый файл не должен быть привязан к вашей версии программного обеспечения.

Добавление динамического маршрута API

Следующим шагом является добавление динамического маршрута API в наш проект, автоматически создающего серию маршрутов, которые будут сопоставлены с определенными методами SDK, обрабатывающими каждое отдельное действие.

Внутри каталога pages/api создайте новый каталог auth и внутри него файл [...auth0].js. Импортируйте в этот файл метод handleAuth из SDK и экспортируйте результат его вызова.

Это создает следующие маршруты:

  • /api/auth/login: Маршрут, используемый для входа в систему с Auth0.
  • /api/auth/logout: Маршрут, используемый для выхода пользователя из системы.
  • /api/auth/callback: Маршрут Auth0 будет перенаправлять пользователя после успешного входа в систему.
  • /api/auth/me: Маршрут для получения профиля пользователя.

Добавление компонента UserProvider

На стороне внешнего интерфейса SDK будет использовать React Context для управления состоянием аутентификации ваших пользователей. Чтобы сделать это состояние доступным для всех ваших страниц, мы переопределяем базовый компонент App и заключаем его внутренний компонент в UserProvider. Таким образом, все компоненты в приложении будут иметь доступ к контексту аутентификации и предоставленным перехватчикам, которые пригодятся позже.

Теперь ваш /pages/_app.js должен выглядеть примерно так:

Использование Auth0 Next.js SDK

Теперь, когда мы закончили настройку нашего проекта Auth0 и его специального SDK для Next.js, все, что нам осталось сделать, это использовать его! Итак, давайте посмотрим, как мы можем это сделать сейчас.

Вход пользователя

Теперь пользователь может войти в ваше приложение, посетив маршрут /api/auth/login, предоставленный SDK. В нашем компоненте Navbar давайте добавим ссылку на ваш маршрут входа с помощью тега привязки.

Теперь, если пользователь нажмет кнопку Войти на Navbar, он будет перенаправлен на экран входа Auth0 нашего приложения, какое волшебство?!

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

Выход пользователя

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

Для этого, во-первых, нам нужно знать, аутентифицирован ли какой-либо пользователь, чтобы знать, показываем ли мы кнопку Войти или кнопку Выйти.

Используя User Context, управляемый Auth0 Next.js SDK, мы можем легко получить эту информацию с помощью хука useUser, предоставленного SDK. Этот хук предоставляет различную информацию о текущем состоянии пользовательского контекста, но для этого сценария нам нужно будет только знать, присутствует ли user в контексте, и, если да, показать Выход вместо этого.

Обновите компонент Navbar следующим образом.

Теперь, если пользователь присутствует в приложении User Context, мы покажем кнопку Выйти, которая перенаправит пользователя на маршрут /api/auth/logout, который обрабатывается SDK и автоматически предпримет все необходимые действия для удаления активного сеанса пользователя.

Доступ к информации профиля пользователя

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

Наряду со свойством user хук useUser также экспортирует другие свойства, такие как error и isLoading, так что у нас есть еще больший контроль над текущим состоянием контекста.

Давайте создадим простую страницу, на которой мы сможем проверить доступную информацию о текущем пользователе. Назовем его Profile.

Создайте новый файл profile.js в папке /pages и вставьте следующее содержимое.

Теперь добавим к нашему Navbar новую кнопку, чтобы мы могли легко попасть на эту страницу. Эта кнопка должна отображаться только при наличии зарегистрированного пользователя.

Обновите компонент Navbar следующим образом:

И теперь, если пользователь вошел в систему, он или она сможет получить доступ к своему профилю со всей зарегистрированной информацией в службах Auth0!

Защита страницы

Чтобы защитить страницу от незарегистрированных пользователей, страница Auth0 Next.js SDK также предоставляет функции, которые позаботятся об этом за вас. Итак, давайте защитим нашу страницу Profile, так как она не должна быть доступна, если нет пользователя, для которого нужно показать профиль.

Основное изменение, которое нам нужно будет применить, заключается в том, что наш компонент страницы теперь должен возвращаться Компонентом высокого порядка (HOC), экспортируемым методом SDK withPageAuthRequired.

Это также предоставит нашему компоненту страницы состояние User Context в виде props. Таким образом, мы можем получить доступ к свойствам user, error и isLoading через props напрямую, но у нас все еще есть доступ к контексту внутри компонента, поэтому мы также можем использовать хук useUser, если захотим.

Теперь ваш компонент Profile должен выглядеть примерно так:

ПРИМЕЧАНИЕ. Основное различие между страницами SSR и страницами CSR заключается в том, что на страницах SSR метод getServerSideProps должен возвращать сам HOC.

export const getServerSideProps = withPageAuthRequired();

Поздравляем!

Если вы зашли так далеко, у вас должно быть функциональное приложение Next.js с безопасной и надежной системой аутентификации, реализованной всего в нескольких строках кода.

Если у вас возникнут какие-либо проблемы, не стесняйтесь обращаться ко мне в мой профиль в Твиттере, и я буду рад помочь.