@auth0/auth0-spa-js isAuthenticated 在页面刷新时未定义

Question

我正在对我的应用程序进行身份验证，我已经设法将登录添加到我的页面。用户可以登录并存储他们的会话，但是一旦我刷新页面，他们的会话就会消失。 ReactJs + NextJS

我知道有getTokenSilently，但当我调用它时它会返回它！

error: "login_required"
error_description: "Login required"
state: "N3B+aWt4T1dBeGlibWsua2ZkdX5LTzR6T19ndTdXfkJ2Tm5kUzJIY3lXTQ=="

我在这里做错了什么？

• 我的个人资料页面！

useEffect(() => {
if (typeof window !== `undefined`) {
if (!loading && !isAuthenticated) {
loginWithRedirect({})
}
}
});

• 如果用户已登录，则显示一个图标的主页！

<Button
className="account-button"
variant="textButton"
icon={<i className="flaticon-user" />}
aria-label="login"
title={loading ? 'loading' : isAuthenticated ? 'Hi' : 'login'}
/>

• 身份验证服务

// src/react-auth0-spa.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=") &&
window.location.search.includes("state=")) {
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

问题是使用Brave Browser!!!!!详细说明如下：

右。因此，静默身份验证问题，即"需要登录"错误，是当您的浏览器不发送或无法发送"auth0"cookie时得到的结果。这是 Auth0 在用户与 Auth0 进行会话后留在浏览器客户端上的 cookie，即用户通过交互式流登录。您应该能够通过查看网络日志或分析 HAR 输出来确认这一点。有效的方案将附加 cookie，而失败的方案不会。如果是这种情况，这既不是示例问题也不是 SDK 问题，因为它们不参与该 cookie 的设置;它由授权服务器颁发。

如果浏览器无法发送此 Cookie，则很可能是因为某些软件或浏览器扩展程序或阻止了第三方跟踪 Cookie 的内容。默认情况下，Safari 会这样做，这要归功于其内置的智能跟踪防护 (ITP2( 1 软件。这可以解释为什么静默身份验证在 Chrome 的隐身模式下有效，但在正常模式下无效。如果您正在运行某些扩展程序，则可能需要禁用其中一些扩展程序，以缩小阻止发送 Cookie 的扩展程序的范围。

我无法轻易解释的是它在Safari的私人模式下是如何工作的，因为我认为ITP2无论如何都会阻止此类cookie。让我对此作一些澄清。

https://community.auth0.com/t/failed-silent-auth-login-required/33165/24