Hi, I am trying to setup a authentication flow for my web app created using react. I have been using the @auth0/auth0-react sdk for development. The problem with this is I am trying to provide the login component from a shared library which is wrapped with a provider like this:
<Auth0Provider
domain={auth0Config.domain}
clientId={auth0Config.clientId}
authorizationParams={{
redirect_uri: auth0Config.redirectURI,
scope: '...',
}}
>{HERE IS THE LOGIN COMPONENT} </Auth0Provider>
Now the problem is when I try to logout from the application like this:
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
Log Out
</button>
);
};
export default LogoutButton;
I get an error that says:
You forgot to wrap your component in <Auth0Provider>.
I understand this error is because the Logout button is not under the React Context/Auth0Provider. However, I would like to know if there’s a way I can accomplish logout without using the logout method from the useAuth0() hook. Thanks!