Аутентификация пользователя Nextjs за 5 простых шагов с использованием Auth0

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

Вот небольшая демонстрация проекта, который мы собираемся построить:

[Ссылка на демонстрационное видео] (https://www.loom.com/share/aa0dbb52628949178364fb3b5e8ad2fa)

Итак, давайте сразу приступим к делу. Мы сделаем это за 5 простых шагов:

Примечание. Я использовал Tailwind CSS для CSS и создал обрезанную панель навигации для этого проекта. Если вы хотите получить код для того же самого, вы можете посетить мою [ссылку на проект Github] (https://github.com/raiv200/ Nextjs-Auth0) и скопируйте оттуда.

ШАГ-1 Создайте свою учетную запись Auth0

Создайте учетную запись Auth0. Перейдите на панель инструментов и в разделе «Приложения» нажмите «Приложение», затем нажмите «Создать приложение», укажите имя приложения и выберите категорию « Обычное веб-приложение ».

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

Внутри этого вы должны заполнить ALLOWED_CALLBACK_URL и ALLOWED_LOGOUT_URL следующим образом.

После этого прокрутите вниз до конца и нажмите «Сохранить изменения».

ШАГ 2. Настройте приложение Next.js и загрузите пакет Auth0.

Создайте приложение Nextjs, используя имя приложения create-next-app.

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

Если вы хотите настроить приложение nextjs с помощью tailwindCSS, просто используйте эту команду, она сделает все остальное.

``` ударить

npx create-next-app -e with-tailwindcss мой проект

cd мой проект

А теперь перейдите в свою папку и установите пакет @auth0/nextjs-auth0.

``` ударить

установка npm @auth0/nextjs/auth0

Шаг 3 Создайте файл .env.local для хранения учетных данных.

Создайте файл .env.local  в корневом каталоге вашего проекта, вставьте его в файл .env.local и измените значения с вашими Client_ID, Client_Secret и ISSUER_BASE_URL, которые вы можете найти в ваша панель управления Auth0.

```javascript

AUTH0_SECRET='LONG_RANDOM_VALUE_32_CHARACTERS_LONG'

AUTH0_BASE_URL='http://локальный:3000'

AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth.com'

AUTH0_CLIENT_ID='ВАШ_AUTH0_CLIENT_ID'

AUTH0_CLIENT_SECRET='ВАШ_AUTH0_CLIENT_SECRET'

Базовый URL-адрес останется прежним, а остальные три вы можете найти на панели инструментов Auth0.

Еще одна вещь в ISSUER_BASE_URL: убедитесь, что https:// присутствует в URL-адресе, не удаляйте его.

И чтобы сгенерировать строку из 32 символов, вы можете вставить этот код в свой терминал, и он сгенерирует случайную строку из 32 символов.

``` ударить

node -e "console.log(crypto.randomBytes(32).toString('hex'))"_

Шаг 4. Создание маршрутов API

Теперь нам нужно создать маршрут API для входа в систему, выхода из системы и обратного вызова. В Next.js это очень просто сделать.

Просто перейдите в папку /pages/api и внутри нее создайте имя папки auth, а внутри создайте имя файла [...auth0].js  в квадратных скобках, например:

Таким образом, мы можем создать любой маршрут наподобие этого api/auth/login, api/auth/logout, api/auth/callback вот так.

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

Затем перейдите внутрь [...auth0].js, вставьте эти две строки кода и сохраните их.

```javascript

импортировать {handleAuth} из "@auth0/nextjs-auth0";

экспортировать handleAuth() по умолчанию;

Убедитесь, что вы установили пакет "@auth0/nextjs-auth0".

Шаг-5

Итак, последний шаг здесь. Перейдите к /pages/_app.js и внутри этого оберните  внутри компонента, как показано ниже, и обязательно импортируйте его.

Итак, это были 5 шагов, чтобы заставить аутентификацию работать в приложении Next.js.

Если вы откроете свой терминал и перейдете к своему проекту и наберете «npm run dev», вы увидите, что приложение работает на порту 3000.

Теперь измените URL-адрес и перейдите на http://localhost:3000/api/auth/login.

Вы увидите страницу входа Auth0, и вы сможете использовать ее и войти в нее.

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

Как пользоваться

Мы можем использовать его для следующих вещей:

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

1. Если пользователь не вошел в систему, мы можем показать кнопку входа, а если пользователь вошел в систему, мы можем показать ему кнопку выхода.

Поэтому, чтобы использовать это, нам нужно использовать пользовательский хук, предоставленный пакетом auth0, который является хуком useUser.

Перейдите к pages/index.js и напишите следующий код:

```javascript

импортировать {useUser} из "@auth0/nextjs-auth0";

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

Внутри функции Home чуть выше return оператор напишет это

const {пользователь, ошибка, isLoading} = useUser();

если (загружается) {

возврат (

если(ошибка){

возврат (

а затем под тегом H1 вставьте этот код:

```разметка

Вы можете сделать то же самое, что и выше, чтобы отобразить кнопку «Войти в систему» ​​только в том случае, если пользователь не вошел в систему, и кнопку «Выход из системы» только в том случае, если пользователь уже вошел в систему.

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

Это можно легко сделать с помощью хука withPageAuthRequired, входящего в комплект SDK nextjs-auth0.

Создайте файл Member-only.js в каталоге pages и вставьте этот код в файл, указанный ниже.

```javascript

импортировать {withPageAuthRequired} из "@auth0/nextjs-auth0";

const memberOnly = () => {

возврат (

<дел>

Эта страница предназначена только для зарегистрированных пользователей.