How to logout out of a React web app without using the React SDK?

Help
,
1

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!

2 Likes