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>
);