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

Question

我正在处理我的应用程序的身份验证，并且我已经设法将登录添加到我的页面。用户能够登录并存储他们的 session ，但是一旦我刷新页面，他们的 session 就消失了。 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!!!!!!详细说明在这里:

Right. So the silent authentication issue, the “login required” error, is what you get when your browser does not, or cannot, send the “auth0” cookie. This is the cookie that Auth0 leaves on the browser client once the user has a session with Auth0, i.e. the user has logged in through an interactive flow. You should be able to confirm this by looking at the network logs or analyzing the HAR output. The scenarios that work will have the cookie attached, whereas the ones that fail will not. If that’s the case, this is neither a sample nor SDK issue as they are not involved in the setting of that cookie; it is issued by the authorization server.

If the browser cannot sent this cookie, it’s most likely because of some software or browser extension or something which is blocking third-party tracking cookies. Safari does this by default thanks to its Intelligent Tracking Prevention (ITP2) 1 software that is built-in. This can explain why silent auth works in Chrome’s incognito mode but not in normal mode. If you’re running some extensions, you might want to disable some of them to narrow down which one is preventing the cookie from being sent.

What I can’t readily explain is how it works in Safari’s Private mode, as I thought ITP2 would block such cookies regardless. Let me get some clarity on that.

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