Invalid Hook Call

Help
1

I need to call an Auth0 hook in an OnClick() event. To distill the problem I’ve created the standard ‘npx create-react-app’ and did the following:

App.js now looks like this (basically changing it to have one ‘Click Me’ button with an onClick()):

import './App.css';
import Clickme from './clickme';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button
        onClick={Clickme}
        >
          Click Me
        </button>
      </header>
    </div>
  );
}

export default App;

And I added clickme.js:

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

export default function Clickme() {
  const { user } = useAuth0();
  const { email } = user;
  console.log("Email: ", email);
}

(Note: I really need to do more than get the user’s email. This working example is reduced to artificial simplicity to clearly isolate my question.)

When I run this and click ‘Click Me’ I get:

“Invalid hook call. Hooks can only be called inside of the body of a function component…”

Wait, isn’t the call to useAuth0() IN a function component? Searching Google and this forum I’m not getting anywhere. Many thanx in advance!

3

Hi @wiley,

Welcome to the Auth0 Community!

I understand that you encountered errors when using the useAuth0 hook.

After looking into this further, I found that you need to call the user’s email with user.email property when using the useAuth0 hook. See here for an example.

Then, for an on-click event, please see our documentation here.

Please let me know how this works for you.

Thank you.