如何使用 Auth0 SDK 注销？ “您忘记将组件包装在 <Auth0Provider> 中”答案

【问题标题】：How to logout with Auth0 SDK? "You forgot to wrap your component in <Auth0Provider>"如何使用 Auth0 SDK 注销？ “您忘记将组件包装在 <Auth0Provider> 中”
【发布时间】：2022-01-20 04:01:15
【问题描述】：

我正在使用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>
)

【问题讨论】：

我认为您必须从包装在提供程序中的组件调用useAuth0。您调用它的那个提供者作为一个孩子，所以它在它之外。
@Abe 就是这样，谢谢
太棒了。如果您不介意，我会将其添加为答案

标签： reactjs react-native next.js auth0

【解决方案1】：

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

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

在您的ToolbarToggleItem 的返回中，您可以有一个onPress，看起来像：

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

在处理触摸的组件上。

【讨论】：