如何处理auth0中失败的静默auth错误 [英] how to handle failed silent auth error in auth0

问题描述

我遵循了spa反应快速入门指南，并且在一个多月的时间里效果都很好.最近，我遇到了此错误，并且没有进一步的信息，它被登录为auth0作为失败的静默错误".有人告诉我，这是因为浏览器的cookie更新，建议使用新的beta版本的auth0-spa-js，并将缓存位置更改为本地存储.而且它也不起作用.

I followed spa react quick start guide and it worked fine for more than a month. Recently i had this error and it is logged on auth0 as 'failed silent error' with no further information. I have been told that it is because of the browsers cookie updates and recommended to use new beta release of auth0-spa-js and change cache location to local storage. And it didn't work either.

代码如下:

auth_config.json:

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:

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>
    );
};

此代码有什么问题，感谢您的帮助.或者我可以使用其他方法，我只是遵循文档，只要它通过身份验证就没有关系.

What is wrong with this code, any help appreciated. Or i can use a different method, i just followed the docs, it doesn't matter as long as it authenticates.

谢谢

推荐答案

我知道这已经徘徊了一段时间，但是我遇到了类似的问题.

I know this has been hanging around for a bit, but i was running into a similar issue.

据我了解， createAuth0Client 帮助程序工厂默认情况下运行 getTokenSilently 函数作为设置的一部分，以在每次浏览器刷新时对用户进行重新身份验证.我遇到的问题是，对getTokenSilently的调用发生了错误，这意味着auth0FromHook从未设置，并且auth0client从未设置为状态.由于auth0client是未定义的，因此无法调用loginwithredirect，这是我想要实现的行为.

As I understand it the createAuth0Client helper factory runs the getTokenSilently function by default as part of the set up to re-authenticate users every browser refresh. The problem i was having was that the call to getTokenSilently was erroring, meaning that auth0FromHook was never set and the auth0client never set in state. Because auth0client was undefined, it was then impossible to call loginwithredirect, which is the behaviour i wanted to achieve.

基本上我希望它以静默方式进行身份验证，但是如果失败，则将其发送到登录屏幕，但这是不可能的，因为auth0client是未定义的，从而导致无法调用undefined 的loginwithredirect错误.似乎(不幸)在@ auth0/auth0-spa-js库的当前稳定版本中(在撰写本文时为1.6.5)，在初始化客户端时无法绕过getTokenSilently.但是，在当前的Beta(1.7.0-beta.5)中，(此处为版本列表)他们公开了Auth0Client类本身，因此，如果您要移至该版本，则可以使用类似...的代码进行调整.

Basically i wanted it to auth silently, but if it failed, send to the log in screen, but that's impossible because the auth0client was undefined, resulting in a cannot call loginwithredirect of undefined error. It seems that (sadly) in the current stable version of the @auth0/auth0-spa-js library (1.6.5 at time of writing) there is no way to bypass getTokenSilently when initialising the client. However in the current beta (1.7.0-beta.5) (Here is a list of versions) they have exposed the Auth0Client class itself, so if you want to move to that version the code could be tweaked with something like....

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

然后在任何受保护的组件中，您都可以检查加载是否完成，并且如果isAuthenticated仍然为false，即使在getSilentToken期间发生错误，您也应该能够重定向到登录.

and then in any protected components you can check the loading is finished and if isAuthenticated is still falsey, you should be able to redirect to login despite an error occurring during the getSilentToken.

==非测试选项

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

The alternative in the current api would be to perhaps set max_age to 0 or 1 in the initOptions, to force a re-login, and maybe setting prompt to "login" on the second attempt to initialize the authClient

这篇关于如何处理auth0中失败的静默auth错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！