如何使用 Auth0 SDK 注销？ "You forgot to wrap your component in <Auth0Provider>"

Question

我正在使用 useAuth0() 挂钩中的 logout 函数注销。但是，当我尝试使用它时，出现以下错误

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

但是，它包含在 Auth0Provider 中，所以我不确定是什么导致了这个错误。

  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

您从中调用 useAuth0 的组件在 Auth0Provider 之外，因为 Auth0Provider 是它的子组件。您需要从包含在 Provider 中的组件调用 useAuth0。

例如，您可以重构 ToolbarToggleItem 组件以将 logoutDestination 作为 prop 而不是 onClick 函数。然后，在ToolbarToggleItem内部，在函数组件的body中调用useAuth0得到logout函数

在你的 ToolbarToggleItem 的 return 中，你可以有一个 onPress 看起来像：

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

在处理触摸的组件上。

如何使用 Auth0 SDK 注销？ "You forgot to wrap your component in <Auth0Provider>"

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

reactjs

auth0

react-native

next.js