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

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

15 апреля 2022 г.

Всем привет, надеюсь у вас все хорошо. В этом посте мы обсудим, как настроить аутентификацию пользователя при входе с использованием 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 следующим образом.


Auth0 создать приложение


Auth0 изменить 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'


Секрет и идентификатор клиента Auth0


Базовый 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 авторизации


Таким образом, мы можем создать любой маршрут наподобие этого 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, и вы сможете использовать ее и войти в нее.


Страница входа Auth0


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


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


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


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

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

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


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


```javascript


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


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


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


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


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


возврат (



...загрузка{" "}



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


возврат (



{сообщение об ошибке}



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


```разметка



{пользователь && (


Добро пожаловать!

{user.name}


{!пользователь && (


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



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


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


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


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


```javascript


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


const memberOnly = () => {


возврат (


<дел>


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



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


export const getServerSideProps = withPageAuthRequired();


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


Вывод


Итак, это все об аутентификации Nextjs с использованием Auth0. Я надеюсь, что вам понравилось, и вы получили удовольствие от создания этого проекта.


Если вы где-то застряли и не можете найти решение, вы можете проверить мой завершенный репозиторий здесь.


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


Немного полезной ссылки:


  1. [Документы по установке Next.js и Tailwind] (https://tailwindcss.com/docs/guides/nextjs)

  1. [Авт0] (https://auth0.com/)

  1. [Ссылка на Github для проекта] (https://github.com/raiv200/Nextjs-Auth0)

Свяжитесь со мной:


  1. [Ссылка на Твиттер] (https://twitter.com/raivikas200)

  1. [Ссылка на LinkedIn] (https://www.linkedin.com/in/raivikas200/)

  1. [Ссылка на Facebook] (https://www.facebook.com/raiv200/)

  1. [Ссылка на Github] (https://github.com/raiv200)

Также опубликовано [Здесь] (https://nextjsdev.com/nextjs-user-login-authentication-in-5-simple-steps-using-auth0/)



Оригинал
PREVIOUS ARTICLE
NEXT ARTICLE