Есть ли какое-либо исправление ошибки перенаправления входа в систему с React?

Question

Я озадачен этим, потому что я вставил весь код из их документации (auth0), и он, кажется, не работает, и я не знаю почему, но я продолжаю получать эту ошибку:

TypeError: Cannot read property 'loginWithRedirect' of undefined

на их оригинальной обертке здесь

 loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),

и указал на мой файл NavMenu. js в этой строке

<button className="btn btn-success" onClick={() => loginWithRedirect()}>Login</button>

Вот весь код реализации Auth0 для моего NavMenu

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';

import {useAuth0} from '../auth0-wrapper';


const NavMenu = () => {
  const {isAuthenticated, loginWithRedirect, logout, loading} = useAuth0 ();
  return (
    <header>
      <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
        <Container>
          <NavbarBrand tag={Link} to="/">Hotel</NavbarBrand>
          {isAuthenticated ? (
            <ul className="navbar-nav flex-grow">
            <NavItem>
                <NavLink tag={Link} className="text-dark" to="/create">Create</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} className="text-dark" to="/bookings">Bookings</NavLink>
              </NavItem>
              <NavItem>
                <button className="btn btn-danger" onClick={() => logout()}>Log out</button>
              </NavItem>
            </ul>
          ) : (
            <ul lassName="navbar-nav flex-grow">
             <NavItem>
                <button className="btn btn-success" onClick={() => loginWithRedirect()}>Login</button>
              </NavItem>
            </ul>
          )}
        </Container>
      </Navbar>
    </header>
  );

}

export default NavMenu;

Любая помощь будет высоко ценится.

Answer 1

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

Я нашел "Half Fix" :

// in App.js  

const { loading, user, isAuthenticated, loginWithRedirect, logout } = useAuth0();

if (loading) {
  return <Loading />;
}

return (<></>);

Это только преобразует ошибку в экран загрузки навсегда. Может быть, это поможет.

Answer 2

Я также недавно столкнулся с этой ошибкой при создании приложения React с Auth-0. Я еще не реализовал функциональность <PrivateRoute/>, но продолжал получать сообщение об ошибке. Если вы go удалите токен Auth-0 из файлов cookie в вашем браузере, эта ошибка будет go исчезать, пока не будет внедрен компонент <PrivateRoute/>.