вступление

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

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


Настройка приложения

Создайте новое реагирующее приложение с помощью команды

npx create-react-app app-name
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

Затем перейдите к настройкам приложения и в разделе URI приложения в разделе Разрешенные URL-адреса обратного вызова, Разрешенные URL-адреса выхода и Разрешенные веб-источники добавьте

Добавить URL

Мы делаем это, потому что Auth0 перенаправляет нас на их веб-сайт, который обрабатывает все проверки подлинности и перенаправляет нас обратно в приложение.

В процессе разработки будет и в рабочей среде вы должны изменить его на URL-адрес вашего приложения.


Реагировать приложение

Создать .env в корень каталога и добавить две переменные

REACT_APP_AUTH0_DOMAIN = {domain}

REACT_APP_AUTH0_CLIENT_ID = {Client_ID} 
Войти в полноэкранный режим

Выйти из полноэкранного режима

Скопируйте домен и идентификатор клиента из настроек приложения в Auth0.


Установить Auth0

Далее нам нужно установить пакет Auth0 в наше приложение.

Для этого выполните в терминале следующую команду:

npm i @auth0/auth0-react

Войти в полноэкранный режим

Выйти из полноэкранного режима


Index.js

Откройте файл Index.js в приложении React.

Первое, что нам нужно, это импортировать Auth0Provider из установленного нами пакета Auth0.

import { Auth0Provider } from "@auth0/auth0-react";

Войти в полноэкранный режим

Выйти из полноэкранного режима

Auth0Provider использует контекстный API React, поэтому мы обернем наш компонент приложения с помощью Auth0Provider, чтобы
получить доступ ко всем его свойствам в нашем приложении

Auth0Provider принимает пару параметров, то есть домен и идентификатор клиента, поэтому мы импортируем переменные среды, которые создали ранее.

После всех изменений ваш файл Index.js должен выглядеть примерно так

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Auth0Provider
    domain={domain}
    clientId={clientId}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>
);


Войти в полноэкранный режим

Выйти из полноэкранного режима

Как вы можете видеть, Auth0Provider принимает другой параметр, то есть redirectUri, который принимает наше текущее местоположение, поэтому после входа в систему пользователь будет перенаправлен на текущий URL-адрес в браузере, что означает наше приложение.


Составные части

Затем создайте папку компонентов в каталоге src в нашем приложении для реагирования. В этом приложении мы создадим два компонента: один для кнопки входа, а другой — для кнопки выхода.


Кнопка входа

Создайте компонент LoginButton.js в каталоге компонентов.

Импортируйте хук useAuth0, который предоставляется установленным нами пакетом Auth0.

Мы будем использовать loginWithRedirect из хука useAuth0 и вернем кнопку входа с loginWithRedirect в качестве события onClick.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function LoginButton() {
  const { loginWithRedirect } = useAuth0();
  return (
  <button onClick={() => loginWithRedirect()}>
  Log In
  </button>
  );
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

Импорт компонента LoginButton в App.js

Когда вы нажимаете эту кнопку, она должна перенаправить вас на форму аутентификации Auth0.

Форма входа


Кнопка выхода

Создайте еще один компонент, но на этот раз для кнопки выхода.

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

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function LogoutButton() {
  const { logout } = useAuth0();
  return (
    <button
      onClick={() => {
        logout();
      }}
    >
      Log Out
    </button>
  );
}

Войти в полноэкранный режим

Выйти из полноэкранного режима


App.js

Импорт и отображение кнопок входа и выхода

Ваш файл App.js должен выглядеть так

import "./App.css";
import LoginButton from "./components/LoginButton";
import LogoutButton from "./components/LogoutButton";


function App() {
  return (
    <>
      <LoginButton />
      <LogoutButton />
    </>
  );
}

export default App;

Войти в полноэкранный режим

Выйти из полноэкранного режима

Кнопки


Пользователь

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

Для этого мы создадим еще один компонент User.js и отобразим пользовательские данные в формате JSON.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function User() {
  const { user } = useAuth0();
  return <div>{JSON.stringify(user, null, 2)}</div>;
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

Если пользователь вошел в систему, он отобразит данные JSON.

Нажмите на кнопку входа, и после входа вы должны увидеть данные JSON.

Информация о пользователе

Вот и все для этого блога. Ставьте лайк, если это было полезно 🙂

Не стесняйтесь связаться со мной