{проверено &&

<Контейнер сетки>

<Контейнер сетки justifyContent="center">

<Сетка sx={{ m: 1 }}>

<Аватар alt={user?.email} src={user?.picture} sx={{ ширина: 75, высота: 75 }} />

<Элемент сетки xs={12} sx={{ m: 1 }}>

<Элемент сетки xs={12} sx={{ m: 1 }}>

экспорт профиля по умолчанию;

8. Измените файл src/index.tsx. Импортируйте компонент Auth0Provider и настройте параметр domain с доменом Auth0 и параметр clientId с идентификатором клиента Auth0, как показано ниже.

```машинопись

импортировать React из «реагировать»;

импортировать ReactDOM из 'react-dom';

импортировать { Auth0Provider } из '@auth0/auth0-react';

импортировать './index.css';

импортировать приложение из './App';

импортировать reportWebVitals из './reportWebVitals';

ReactDOM.render(

<Auth0Provider

домен = "dev-5tf99p7c.us.auth0.com"

clientId="GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG"

redirectUri={window.location.origin + '/react-auth0/profile'}

<Приложение />

,

document.getElementById('корень')

9. Измените файл src/App.tsx. Добавьте меню и маршруты в файл src/Profile.tsx, как показано ниже.

```машинопись

импортировать React из «реагировать»;

импортировать {BrowserRouter, Link as RouterLink, Route, Routes} из 'react-router-dom';

импортировать {useAuth0} из '@auth0/auth0-react';

импортировать AppBar из '@mui/material/AppBar';

импортировать коробку из '@mui/material/Box';

импортировать кнопку из '@mui/material/Button';

импортировать контейнер из '@mui/material/Container';

импортировать IconButton из '@mui/material/IconButton';

импортировать меню из '@mui/material/Menu';

импортировать MenuIcon из '@mui/icons-material/Menu';

импортировать MenuItem из '@mui/material/MenuItem';

импортировать панель инструментов из '@mui/material/Toolbar';

импортировать типографику из '@mui/material/Typography';

импортировать профиль из './Profile';

импортировать SignIn из './SignIn';

импортировать './App.css';

приложение функции () {

const { isAuthenticated, logout } = useAuth0();

const [anchorElNav, setAnchorElNav] = React.useState(ноль);

const handleOpenNavMenu = (событие: React.MouseEvent) => {

setAnchorElNav(event.currentTarget);

const handleCloseNavMenu = () => {

установитьAnchorElNav (нуль);

вернуть (

<контейнер maxWidth="xl">

<панель инструментов отключить желоба>

<Типография

вариант = "h6"

noWrap

компонент = "дел"

sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

Реагировать Auth0

<Кнопка со значком

размер = "большой"

aria-label="аккаунт текущего пользователя"

aria-controls="меню-панель приложений"

ария-haspopup = "истина"

onClick={handleOpenNavMenu}

цвет = «наследовать»

<Значок меню />

<Меню

id = "меню-приложение"

якорьЭл={анкорЭлНав}

якорьOrigin={{

по вертикали: 'снизу',

горизонтальный: 'левый',

KeepMounted

трансформироватьOrigin={{

вертикальный: 'сверху',

горизонтальный: 'левый',

open={Boolean(anchorElNav)}

onClose={handleCloseNavMenu}

х = {{

display: {xs: 'блок', md: 'нет'},

{

e.preventDefault();

window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';

<Типографский текстВыровнять="по центру">

Угловое приложение

{!Проверено &&

<Типографский текстВыровнять="по центру">

Войти

{проверено &&

<Типографский текстВыровнять="по центру">

Profile

{проверено &&

{

обработатьCloseNavMenu();

logout({ returnTo: window.location.origin + '/react-auth0' });

<Типографский текстВыровнять="по центру">

Выйти

<Типография

вариант = "h6"

noWrap

компонент = "дел"

sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}

Реагировать Auth0

<Кнопка

onClick={(е) => {

e.preventDefault();

window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';

sx={{ my: 2, color: 'white', display: 'block' }}

Угловое приложение

{!Проверено &&

<Кнопка

компонент = {RouterLink}

to="/Вход"

sx={{ my: 2, color: 'white', display: 'block' }}

Войти

{проверено &&

<Кнопка

компонент = {RouterLink}

to="/профиль"

sx={{ my: 2, color: 'white', display: 'block' }}

Профиль

{проверено &&

<Кнопка

onClick={() => {

logout({ returnTo: window.location.origin + '/react-auth0' });

sx={{ my: 2, color: 'white', display: 'block' }}

Выход

<Маршруты>

} />

} />

} />

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

10. Запустите приложение с помощью приведенной ниже команды.

``PowerShell

запуск нпм

Скомпилировано успешно!

Теперь вы можете просматривать react-auth0 в браузере.

http://локальный: 3000/реакция-auth0

Обратите внимание, что сборка для разработки не оптимизирована.

Чтобы создать производственную сборку, используйте npm run build.

активы по пути static/js/*.js 2,79 МБ

актив static/js/bundle.js 2,79 МБ [выпущено] (имя: основной) 1 связанный актив

актив static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6,93 КиБ [выпущено] 1 связанный актив

актив index.html 1,74 КБ [отправлено]

актив актив-манифест.json 518 байт [испущено]

кэшированные модули 2,66 МБ (javascript) 32,5 КиБ (время выполнения) [кэшированные] 602 модуля

webpack 5.69.1 успешно скомпилирован за 1275 мс

11. Готово! Перейдите по URL http://localhost:300/react-auth0 и проверьте, работает ли приложение. См. приложение, работающее на GitHub Pages и Stackblitz.

Проверка входа в приложение

1. Проверим вход в приложение. Перейдите по URL-адресу http://localhost:3000/react-auth0 и нажмите кнопку Войти.

2. Нажмите кнопку Зарегистрироваться.

3. Заполните поля Адрес электронной почты, Пароль и нажмите кнопку Продолжить.

4. Нажмите кнопку Принять.

5. Вы будете перенаправлены в приложение.

6. Проверьте зарегистрированный адрес электронной почты.

7. Готово! Мы тестируем вход в приложение и просмотр профиля. Документация по Auth0 доступна по адресу https://auth0.com/docs.

Репозиторий приложения доступен по адресу https://github.com/rodrigokamada/react-auth0.

Это руководство было опубликовано в моем блоге на португальском языке. .