Аутентификация пользователя 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 следующим образом.
После этого прокрутите вниз до конца и нажмите «Сохранить изменения».
ШАГ 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, и вы сможете использовать ее и войти в нее.
Но возникает важный вопрос, как его использовать и как узнать, аутентифицированы мы или нет?
Как пользоваться
Мы можем использовать его для следующих вещей:
- Чтобы показать некоторые страницы нашего веб-сайта, которые можно увидеть только в том случае, если пользователь аутентифицирован.
- Если пользователь не вошел в систему, мы можем показать кнопку входа, а если пользователь вошел в систему, мы можем показать ему кнопку выхода.
Поэтому, чтобы использовать это, нам нужно использовать пользовательский хук, предоставленный пакетом 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 или в любых других социальных сетях и отметьте меня там.
Немного полезной ссылки:
- [Документы по установке Next.js и Tailwind] (https://tailwindcss.com/docs/guides/nextjs)
- [Авт0] (https://auth0.com/)
- [Ссылка на Github для проекта] (https://github.com/raiv200/Nextjs-Auth0)
Свяжитесь со мной:
- [Ссылка на Твиттер] (https://twitter.com/raivikas200)
- [Ссылка на LinkedIn] (https://www.linkedin.com/in/raivikas200/)
- [Ссылка на Facebook] (https://www.facebook.com/raiv200/)
- [Ссылка на Github] (https://github.com/raiv200)
Также опубликовано [Здесь] (https://nextjsdev.com/nextjs-user-login-authentication-in-5-simple-steps-using-auth0/)
Оригинал