Как реализовать аутентификацию в Next.js с помощью Auth0

Опубликовано: 2022-03-10
Краткое резюме ↬ В момент добавления аутентификации и авторизации в наши веб-приложения есть некоторые вещи, которые мы должны оценить, например, нужно ли нам создавать собственную платформу безопасности или мы можем полагаться на существующую стороннюю службу. Давайте посмотрим, как мы можем реализовать аутентификацию и авторизацию в приложениях Next.js с помощью Auth0.

«Аутентификация» — это действие, подтверждающее, что пользователь является тем, за кого себя выдает. Обычно мы делаем это, внедряя систему учетных данных, такую ​​как имя пользователя/пароль, контрольные вопросы или даже распознавание лиц.

«Авторизация» определяет, что пользователь может (или не может) делать. Если нам нужно обрабатывать аутентификацию и авторизацию в нашем веб-приложении, нам понадобится платформа или модуль безопасности. Мы можем разработать собственную платформу, внедрить ее и поддерживать. Или мы можем воспользоваться преимуществами существующих на рынке платформ аутентификации и авторизации, которые предлагаются в качестве услуг.

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

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

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

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

Еще после прыжка! Продолжить чтение ниже ↓

Что такое Auth0?

Это позволяет вам повысить безопасность приложений, разработанных с использованием любого языка программирования или технологии.

«Auth0 — это гибкое решение для добавления служб аутентификации и авторизации в ваши приложения».

— Дэн Ариас, auth0.com

Auth0 имеет несколько интересных функций, таких как:

  • Единый вход: как только вы войдете в приложение, использующее Auth0, вам не нужно будет снова вводить свои учетные данные при входе в другое приложение, которое также использует его. Вы будете автоматически авторизованы на всех из них;
  • Социальный вход : авторизируйтесь, используя предпочитаемый профиль социальной сети;
  • многофакторная аутентификация ;
  • Допускается несколько стандартных протоколов , таких как OpenID Connect, JSON Web Token или OAuth 2.0;
  • Инструменты отчетности и аналитики .

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

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

Auth0 SDK для Next.js

Как мы упоминали ранее, Auth0 создал (и поддерживает) SDK, ориентированный на Next.js, среди других SDK, доступных для подключения к API с использованием различных языков программирования. Нам просто нужно загрузить пакет NPM, настроить некоторые детали нашей учетной записи Auth0 и подключения, и все готово.

Этот SDK предоставляет нам инструменты для реализации аутентификации и авторизации как на стороне клиента, так и на стороне сервера, с использованием маршрутов API на бэкэнде и React Context с React Hooks на внешнем интерфейсе.

Давайте посмотрим, как некоторые из них работают на примере приложения Next.js.

Пример приложения Next.js с использованием Auth0

Давайте вернемся к нашему предыдущему примеру с видеоплатформой и создадим небольшое приложение, чтобы показать, как использовать Auth0 Next.js SDK. Мы настроим универсальный вход Auth0. У нас будет несколько URL-адресов видео на YouTube. Они будут скрыты под платформой аутентификации. Только зарегистрированные пользователи смогут просматривать список видео через наше веб-приложение.

Примечание . В этой статье основное внимание уделяется настройке и использованию Auth0 в вашем приложении Next.js. Мы не будем вдаваться в такие подробности, как стиль CSS или использование базы данных. Если вы хотите увидеть полный код примера приложения, вы можете перейти в этот репозиторий GitHub.

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

Прежде всего, нам нужно создать учетную запись Auth0, используя страницу регистрации.

создание учетной записи Auth0 с помощью страницы регистрации
(Большой превью)

После этого переходим к панели управления Auth0. Перейдите в Приложения и создайте новое приложение типа ["Обычные веб-приложения"].

создание нового приложения типа «Обычные веб-приложения».
(Большой превью)

Теперь давайте перейдем на вкладку « Настройки » приложения и в разделе « URI приложения » настроим следующие данные и сохраним изменения:

  • Разрешенные URL-адреса обратного вызова : добавьте https://localhost:3000/api/auth/callback
  • Разрешенные URL -адреса выхода: добавьте https://localhost:3000/
Вкладка настроек приложения.
(Большой превью)

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

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

Создать приложение Next.js

Чтобы создать совершенно новое приложение Next.js, мы будем использовать приложение create-next-app, которое автоматически настроит все за вас. Чтобы создать проект, запустите:

 npx create-next-app [name-of-the-app]

Или

 yarn create next-app [name-of-the-app]

Чтобы запустить сервер разработки локально и увидеть только что созданный сайт в браузере, перейдите в новую папку, которую вы создали:

 cd [name-of-the-app]

И запустите:

 npm run dev

Или

 yarn dev

Установите и настройте Auth0 Next.js SDK

Давайте установим SDK Auth0 Next.js в наше приложение:

 npm install @auth0/nextjs-auth0

Или

 yarn add @auth0/nextjs-auth0

Теперь в нашем файле env.local (или в меню переменных среды нашей хостинговой платформы) добавим эти переменные:

 AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]" AUTH0_BASE_URL="https://localhost:3000" AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]" AUTH0_CLIENT_ AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"
параметры конфигурации для Auth0 Next.js SDK.
(Большой превью)

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

Создайте динамический маршрут API

Next.js предлагает способ создания бессерверных API: маршруты API. С помощью этой функции мы можем создать код, который будет выполняться при каждом запросе пользователя к нашим маршрутам. Мы можем определить фиксированные маршруты, например /api/index.js . Но у нас также могут быть динамические маршруты API с параметрами, которые мы можем использовать в нашем коде маршрутов API, например /api/blog/[postId].js .

Давайте создадим файл /pages/api/auth/[...auth0].js , который будет динамическим маршрутом API. Внутри файла давайте импортируем метод handleAuth из Auth0 SDK и экспортируем результат:

 import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth();

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

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

И это будет серверная часть нашего приложения. Если мы хотим войти в наше приложение или зарегистрировать новую учетную запись, мы должны посетить https://localhost:3000/api/auth/login . Мы должны добавить ссылку на этот маршрут в наше приложение. То же самое для выхода с нашего сайта: добавьте ссылку на https://localhost:3000/api/auth/logout .

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

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

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

 <UserProvider> <Component {...props} /> </UserProvider>

Если мы хотим получить доступ ко всем страницам нашего приложения, мы должны добавить компонент в файл pages/_app.js . pages/_app.js переопределяет компонент App React. Это функция, которую Next.js предоставляет для настройки нашего приложения. Вы можете прочитать больше об этом здесь.

 import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function App({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); }

У нас есть хук React useUser , который обращается к состоянию аутентификации, предоставляемому UserProvider . Мы можем использовать его, например, для создания приветственной страницы. Изменим код файла pages/index.js :

 import { useUser } from "@auth0/nextjs-auth0"; export default () => { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; if (user) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> <a href="/api/auth/logout">Logout</a> </div> ); } return <a href="/api/auth/login">Login</a>; };

user объект содержит информацию, относящуюся к личности пользователя. Если человек, посещающий страницу, не вошел в систему (у нас нет доступного user объекта), мы отобразим ссылку на страницу входа. Если пользователь уже аутентифицирован, мы отобразим на странице свойства user.name и user.email , а также ссылку для выхода.

Давайте создадим файл videos.js со списком из трех URL-адресов видео YouTube, которые будут видны только зарегистрированным пользователям. Чтобы разрешить просмотр этой страницы только зарегистрированным пользователям, мы будем использовать метод withPageAuthRequired из SDK.

 import { withPageAuthRequired } from "@auth0/nextjs-auth0"; export default () => { return ( <div> <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a> <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a> <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a> </div> ); }; export const getServerSideProps = withPageAuthRequired();

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

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

Заключение

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

Если вы хотите развернуть пример приложения Auth0 в Vercel, вы можете сделать это здесь.

Дополнительная литература и ресурсы

  • Auth0 Next.js SDK репозиторий GitHub, Auth0, GitHub
  • «Полное руководство по аутентификации Next.js с помощью Auth0», Сандрино Ди Маттиа, блог Auth0.
    В нашем примере приложения мы использовали рендеринг на стороне сервера с маршрутами API и бессерверным подходом. Если вы используете Next.js для статического сайта или пользовательский сервер для размещения вашего приложения, в этой статье есть некоторые сведения о том, как реализовать аутентификацию.
  • «Новый опыт универсального входа», Auth0 Universal Login, Auth0 Docs
  • «Централизованный универсальный вход против встроенного входа», Универсальный вход Auth0, Auth0 Docs