Auth0, React and Single-Spa - [You forgot to wrap your component in <Auth0Provider>]

Help
, ,
1

I am creating an app using Single-Spa, React and Auth0. The auth0/auth0-react documentation specifies to wrap the app in the following way:

  <Auth0Provider
    domain="YOUR_AUTH0_DOMAIN"
    clientId="YOUR_AUTH0_CLIENT_ID"
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>

However with Single-Spa the components are mounted and un-mounted based on the url path, as specified by the root-config’s index.ejs file (there is no root component). With Single-Spa I do not have an App to wrap, as one normally would with React, though my individual components are still React-based.

  <template id="single-spa-layout">
    <single-spa-router mode="history" base="/">
        <application name="@example/navbar-app"></application>
        <br/>
        <main>
          <route path="home">
            <div class="d-flex justify-content-around">
              <application name="@example/app1"></application>
              <application name="@example/app2"></application>
            </div> 
            <div class="d-flex justify-content-around">
              <application name="@example/lookup"></application>
            </div> 
          </route>  
        </main> 
    </single-spa-router>
  </template>

I tried to wrap the Navbar, which displays on every page, but am getting the error:
You forgot to wrap your component in Auth0Provider

const {
  isLoading,
  isAuthenticated,
  error,
  user,
  loginWithRedirect,
  logout,
} = useAuth0();

return (
  <div>
    <Auth0Provider
      domain={auth_config.domain}
      client_id={auth_config.clientId}
      redirectUri="https://example.com"
    >
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand>Navbar</Navbar.Brand>
            <Nav className="me-auto">
              { isAuthenticated ?
                [ <Nav.Link href="/home">Home</Nav.Link>,
                  <Nav.Link href="/lookup">Redirect</Nav.Link>,
                  <Nav.Link onClick={logout}>Logout</Nav.Link>
                ]
                : <Nav.Link onClick={loginWithRedirect}>Login</Nav.Link>
              }
            </Nav>
        </Container>
      </Navbar>
    </Auth0Provider>
  </div>
);
2

I created a component that contained the navbar and imported it into this rootComponent, wrapping the imported navbar in Auth0Provider.

1 Like
3

Perfect! Thanks for sharing it with the rest of community!