@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 浏览器！！！！！！详细说明在这里：

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

如果浏览器无法发送此 cookie，很可能是因为某些软件或浏览器扩展程序或阻止第三方跟踪 cookie 的东西。由于其内置的智能跟踪预防 (ITP2) 1 软件，Safari 默认执行此操作。这可以解释为什么静默身份验证在 Chrome 的隐身模式下有效，但在正常模式下无效。如果您正在运行一些扩展程序，您可能希望禁用其中的一些扩展程序以缩小阻止发送 cookie 的范围。

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

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