title: Auth0 Login Button - Invalid Hook Call Warning
body: <p>I am tryingto familiarize myself with Auth0 and ran into an issue. I have been following their tutorial <a href="https://auth0.com/docs/quickstart/spa/react" rel="nofollow noreferrer">https://auth0.com/docs/quickstart/spa/react</a> to built a single page app. Unfortunately I do not know a lot about javascript :( So I have configured a Login Button like this:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useAuth0 } from &quot;@auth0/auth0-react&quot;;
  
  const LoginButton = () =&gt; {
    const { loginWithRedirect } = useAuth0();
  
    return &lt;button onClick={() =&gt; loginWithRedirect()}&gt;Log In&lt;/button&gt;;
  };
  
  export default LoginButton;
  </code></pre>
  <p>The Tutorial then states to simply add the button but i don't know how, this is what I have done but it throws the invalid hook error:</p>
  <pre><code>import { React } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import './styles.css';
  import '../components/Auth0LoginButton';
  import LoginButton from &quot;../components/Auth0LoginButton&quot;;
  
  export default function HomePage(){
  
      return (
          
          &lt;div className=&quot;MainContent&quot;&gt;
              &lt;p class=&quot;Content&quot;&gt;Please LogIn to continue&lt;/p&gt;
              
               &lt;&gt;
                  &lt;button 
                      variant=&quot;primary&quot;
                      id=&quot;LoginBtn&quot;
                      onClick={() =&gt; LoginButton()}
                      
                      &gt;
                          Login
                  &lt;/button&gt;
               &lt;/&gt;   
              &lt;p&gt;
                  &lt;Link to=&quot;./UserPage&quot;&gt; Access UserPage&lt;/Link&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          
      )
  }
  </code></pre>
  <p>Does anyone now how to do it properly? I am assuming I am calling the button wrong...</p>