如何处理 auth0 中失败的静默身份验证错误

Question

我按照 spa react 快速入门指南操作了一个多月，它运行良好。最近我遇到了这个错误，它在 auth0 上记录为“失败的静默错误”，没有更多信息。有人告诉我这是因为浏览器 cookie 更新，建议使用 auth0-spa-js 的新 beta 版本并将缓存位置更改为本地存储。它也没有工作。

代码如下：

auth_config.json：

{
    "domain": "dev.........eu.auth0.com",
    "clientId": "....eEKkQ.............",
    "redirect_uri": "https://localhost:8080",
    "audience": "https://.......herokuapp.com/v1/....",
    "cacheLocation": "localstorage"
}

和

react-auth0-wrapper.js:

import React, { useState, useEffect, useContext } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";

const DEFAULT_REDIRECT_CALLBACK = () =>
    window.history.replaceState({}, document.title, window.location.pathname);

export const Auth0Context = React.createContext();
export const useAuth0 = () => useContext(Auth0Context);
export const Auth0Provider = ({
    children,
    onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
    ...initOptions
}) => {
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [user, setUser] = useState();
    const [auth0Client, setAuth0] = useState();
    const [loading, setLoading] = useState(true);
    const [popupOpen, setPopupOpen] = useState(false);

    useEffect(() => {
    const initAuth0 = async () => {
        const auth0FromHook = await createAuth0Client(initOptions);
        setAuth0(auth0FromHook);

        if (window.location.search.includes("code=")) {
        const { appState } = await auth0FromHook.handleRedirectCallback();
        onRedirectCallback(appState);
        }

        const isAuthenticated = await auth0FromHook.isAuthenticated();

        setIsAuthenticated(isAuthenticated);

        if (isAuthenticated) {
        const user = await auth0FromHook.getUser();
        setUser(user);
        }

        setLoading(false);
    };
    initAuth0();
    // eslint-disable-next-line
    }, []);

    const loginWithPopup = async (params = {}) => {
    setPopupOpen(true);
    try {
        await auth0Client.loginWithPopup(params);
    } catch (error) {
        console.error(error);
    } finally {
        setPopupOpen(false);
    }
    const user = await auth0Client.getUser();
    setUser(user);
    setIsAuthenticated(true);
    };

    const handleRedirectCallback = async () => {
    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const user = await auth0Client.getUser();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(user);
    };
    return (
    <Auth0Context.Provider
        value={{
        isAuthenticated,
        user,
        loading,
        popupOpen,
        loginWithPopup,
        handleRedirectCallback,
        getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
        getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
        getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),
        logout: (...p) => auth0Client.logout(...p)
        }}
    >
        {children}
    </Auth0Context.Provider>
    );
};

此代码有什么问题，任何帮助表示赞赏。或者我可以使用不同的方法，我只是按照文档进行操作，只要它进行身份验证就可以了。

谢谢

Answer 1

我知道这已经有一段时间了，但我遇到了类似的问题。

据我了解，createAuth0Client 助手工厂默认运行getTokenSilently 函数作为设置的一部分，以在每次浏览器刷新时重新验证用户。我遇到的问题是对 getTokenSilently 的调用出错，这意味着从未设置过 auth0FromHook 并且从未设置过 auth0client 状态。因为 auth0client 未定义，所以无法调用 loginwithredirect，这是我想要实现的行为。

基本上我希望它以静默方式进行身份验证，但如果失败，则发送到登录屏幕，但这是不可能的，因为 auth0client 未定义，导致cannot call loginwithredirect of undefined 错误。似乎（可悲）在@auth0/auth0-spa-js 库的当前稳定版本（撰写本文时为 1.6.5）中，初始化客户端时无法绕过 getTokenSilently。然而，在当前的 beta (1.7.0-beta.5) (Here is a list of versions) 中，他们已经暴露了 Auth0Client 类本身，所以如果你想移动到那个版本，可以使用类似...的代码来调整代码。

initAuth0().catch( e => {
  const newClient = new Auth0Client(initOptions);
  setAuth(newClient);
})

然后在任何受保护的组件中，您可以检查加载是否完成，如果 isAuthenticated 仍然是错误的，尽管在 getSilentToken 期间发生错误，您应该能够重定向到登录。

== 非测试版选项

当前 api 中的替代方法可能是在 initOptions 中将 max_age 设置为 0 或 1，以强制重新登录，并可能在第二次尝试初始化 authClient 时将提示设置为“登录”