I've been trying to add some form of authentication to my website, however I keep getting this error:

The above error occurred in the component:

Auth0ProviderWithHistory@http://localhost:3000/src/auth0-provider-with-history.jsx?t=1654540173706:20:34

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I am using this code from their website:

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

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

  const navigate = useNavigate();

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

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

export default Auth0ProviderWithHistory;

CodePudding user response：

If using npm : npm i -D [email protected]

You just need to install react-error-overlay. Run this command to install react-error-overlay: npm i -D [email protected] Now, Your error must be solved.

For vite try this:

you can use the following in vite.config.ts to avoid "Uncaught ReferenceError: process is not defined":

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})