How to logout with Auth0 SDK? "You forgot to wrap your component in <Auth0Provider>"

Question

I'm using the logout function from the useAuth0() hook to log out. However, when I try to use it, I get the following error

Error: "You forgot to wrap your component in <Auth0Provider>"

However, it is wrapped in the Auth0Provider so I'm unsure what's causing this error.

  const { logout } = useAuth0();

return (
    <Auth0Provider
      domain={redacted}
      clientId={redacted}
      redirectUri={redacted}
      audience={redacted}
      cacheLocation="localstorage"
    >
      <GlobalCss />
      <AuthGuard>
        <AuthorizedApolloProvider>
          <BaseToolbar css={{justifyContent: 'space-between'}}>
            <ToolbarToggleGroup type="multiple">
              <ToolbarToggleItem
                value="Users/Search"
                onClick={() => router.push('/user')}
              >
                Users/Search
              </ToolbarToggleItem>
            </ToolbarToggleGroup>
            <ToolbarToggleGroup type="multiple">
              <ToolbarToggleItem
                value="Logout"
                 // here is where i logout
                onClick={() =>  logout({ returnTo: window.location.origin })}
              >
                Logout
              </ToolbarToggleItem>
            </ToolbarToggleGroup>
          </BaseToolbar>
          <DefaultHead />
          <Component {...pageProps} />
        </AuthorizedApolloProvider>
      </AuthGuard>
    </Auth0Provider>
)

Answer 1

The component you're calling useAuth0 from is outside of the Auth0Provider, since the Auth0Provider is its child. You'll need to call useAuth0 from a component that is wrapped in the Provider.

As an example, you could refactor your ToolbarToggleItem component to take a logoutDestination as a prop instead of an onClick function. Then, inside ToolbarToggleItem, get the logout function by calling useAuth0 in the body of the function component.

Inside your ToolbarToggleItem's return, you could have an onPress that would look like:

onPress={() => logout({ returnTo: logoutDestination })

on the component that handles touch.