5

Hello and happy new year. I am trying to set up Auth0 for my website and I have been receiving this error "Invalid hook call. Hooks can only be called inside of the body of a function component."

The error directs to useHistory on the following block of code.

I literally have tried everything and the error keeps persisting. I would be very grateful if someone can pinpoint what I am doing wrong.

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from "@auth0/auth0-react";

const Auth0ProviderWithHistory = ({ children }) => {
    
    const history = useHistory();
    const domain = process.env.REACT_APP_AUTH0_DOMAIN;
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

    const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
    };

    return (
        <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
        >
          {children}  
        </Auth0Provider>
    );
};

export default Auth0ProviderWithHistory;
Chris
  • 125
  • 1
  • 7
  • How are you using `Auth0ProviderWithHistory`? – Mark Skelton Jan 02 '21 at 17:07
  • check these solutions once https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com#:~:text=Invalid%20hook%20call.-,Hooks%20can%20only%20be%20called%20inside%20of%20the%20body%20of,the%20Rules%20of%20Hooks%203. – Sunil Kumar Jan 02 '21 at 17:23
  • @MarkSkelton I am using it to wrap on Index.js – Chris Jan 02 '21 at 17:34
  • Is useHistory used anywhere else by chance? This is a function component so it should be just fine. – Special Character Jan 02 '21 at 17:36
  • No, it's not anywhere else. It's the first time I am using it for this app – Chris Jan 02 '21 at 17:37

0 Answers0