title: Is there any fix to the login redirect bug with React?
body: <p>I'm getting perplexed with this, because I've pasted the entire code from their documentation (auth0) and it seems not to be working and I don't know why but I keep getting that error: </p>
  
  <pre><code>TypeError: Cannot read property 'loginWithRedirect' of undefined
  </code></pre>
  
  <p>on their original wrapper here</p>
  
  <pre><code> loginWithRedirect: (...p) =&gt; auth0Client.loginWithRedirect(...p),
  </code></pre>
  
  <p>and pointed to my NavMenu.js file on this line </p>
  
  <pre><code>&lt;button className="btn btn-success" onClick={() =&gt; loginWithRedirect()}&gt;Login&lt;/button&gt;
  </code></pre>
  
  <p>Here's the entire code of implementation Auth0 to my NavMenu</p>
  
  <pre><code>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 = () =&gt; {
    const {isAuthenticated, loginWithRedirect, logout, loading} = useAuth0 ();
    return (
      &lt;header&gt;
        &lt;Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light&gt;
          &lt;Container&gt;
            &lt;NavbarBrand tag={Link} to="/"&gt;Hotel&lt;/NavbarBrand&gt;
            {isAuthenticated ? (
              &lt;ul className="navbar-nav flex-grow"&gt;
              &lt;NavItem&gt;
                  &lt;NavLink tag={Link} className="text-dark" to="/create"&gt;Create&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;NavItem&gt;
                  &lt;NavLink tag={Link} className="text-dark" to="/bookings"&gt;Bookings&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;NavItem&gt;
                  &lt;button className="btn btn-danger" onClick={() =&gt; logout()}&gt;Log out&lt;/button&gt;
                &lt;/NavItem&gt;
              &lt;/ul&gt;
            ) : (
              &lt;ul lassName="navbar-nav flex-grow"&gt;
               &lt;NavItem&gt;
                  &lt;button className="btn btn-success" onClick={() =&gt; loginWithRedirect()}&gt;Login&lt;/button&gt;
                &lt;/NavItem&gt;
              &lt;/ul&gt;
            )}
          &lt;/Container&gt;
        &lt;/Navbar&gt;
      &lt;/header&gt;
    );
  
  }
  
  export default NavMenu;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>