Добавьте аутентификацию в свои приложения React за несколько минут с помощью Auth0


Введение

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

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

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

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

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

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

Далее перейдите к настройкам приложения и в разделе Application URIs в Allowed callback URLs, Allowed logout URLs и Allowed Web origins добавьте https://localhost:3000.

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

Во время разработки это будет https://localhost:3000, а в продакшене вы должны изменить его на URL вашего приложения.

Приложение React

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

REACT_APP_AUTH0_DOMAIN = {domain}

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

Скопируйте Domain и Client ID из настроек приложения в Auth0.

Установите Auth0

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

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

npm i @auth0/auth0-react

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

Index.js

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

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

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

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

Auth0Provider использует Context API React, поэтому мы обернем наш компонент App с 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 в браузере, означающий наше приложение.

Компоненты

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

Кнопка входа

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

Импортируйте хук 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.

Кнопка выхода из системы

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

Он похож на кнопку входа, с той лишь разницей, что мы будем использовать метод logout из хука 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.

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

Не стесняйтесь общаться со мной https://bio.link/bhagatpratik07

Оцените статью
devanswers.ru
Добавить комментарий