Первым делом нам нужно создать новое приложение для реагирования.
Вот команда.
npx create-react-app auth0
Он создает новое реагирующее приложение.
- Во-первых, мы должны зарегистрироваться/войти на auth0.com.
- Затем мы должны создать новое приложение.
3. Перейдите к настройке домена, разрешенных URL-адресов обратного вызова, разрешенных URL-адресов выхода из системы, разрешенных веб-источников в качестве URL-адреса нашего приложения, в нашем случае это
http://localhost:3000/
Итак, наша настройка завершена.
- Сначала нам нужно установить пакет auth0 для нашего реагирующего приложения.
npm i @auth0/auth0-react
- Создайте файл .env в корне нашего проекта, в котором хранятся некоторые переменные среды. Например, URL нашего домена и clientId для авторизации в auth0.
REACT_APP_AUTH_DOMAIN=my-react-app.us.auth0.com REACT_APP_AUTH_CLIENT_ID=XXXXSampleClientIdXXXXXX
В src/index.php
Здесь мы должны получить домен и clientId из нашего файла env и использовать Auth0Provider из ‘@auth0/auth0-react’ и передать клиент домена и redirectUri в Auth0Provider. rediectUri — это наш веб-источник. эту информацию необходимо передать в Auth0Provider, это поможет auth0 проверить, являетесь ли вы аутентифицированным лицом для использования их платформы или нет.
Мы должны создать папку компонентов в нашем src/. В нем хранятся все наши компоненты, такие как LoginButton, LogoutButton и компоненты профиля.
Код для каждого компонента выглядит так.
Компонент кнопки входа
Импорт хука useAuth0 из @auth0/auth0-react
Хук useAuth0 поставляется с различными полезными функциями, такими как
LoginWithRedirect используется для входа пользователя.
isAuthenticated используется для проверки того, вошел пользователь в систему или нет.
Компонент LogoutButton
Импортировать хук useAuth0 из @auth0/auth0-react
И деконструируйте функцию logout из useAuth0, которая помогает пользователю выйти из системы.
Компонент профиля
Этот компонент мы сделали, чтобы показать детали аутентифицированного пользователя.
Хук useAuth0 возвращает объект пользователя, когда пользователь аутентифицирован.
Компонент приложения
Импортируйте все компоненты из `src/components` и покажите.
Спасибо за чтение …
Используйте ссылку, указанную ниже, чтобы проверить код.
