Auth0 getTokenSilently 返回未定义

Question

我正在使用这个react-auth-spa.jsx，

/* eslint-disable react/require-default-props */
// src/react-auth0-spa.js
import React, { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
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 isAuth = await auth0FromHook.isAuthenticated();

      setIsAuthenticated(isAuth);

      if (isAuth) {
        const authedUser = await auth0FromHook.getUser();
        setUser(authedUser);
      }

      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 authedUser = await auth0Client.getUser();
    setUser(authedUser);
    setIsAuthenticated(true);
  };

  const handleRedirectCallback = async () => {
    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const authedUser = await auth0Client.getUser();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(authedUser);
  };
  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>
  );
};

Auth0Provider.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  onRedirectCallback: PropTypes.func,
};

在我的导航组件中，我正在使用

const Navigation = (props) => {
  const {
    isAuthenticated, loginWithRedirect, logout, loading, user, getTokenSilently,
  } = useAuth0();

  const getToken = async () => {
    const { token } = await getTokenSilently();
    return token;
  };

  useEffect(() => {
    const { isLoggedIn, onLogout, onLogin } = props;
    if (!isLoggedIn && isAuthenticated && user) {
      if (!loading) {
        onLogin(user, getToken());
      }
    }
    if (isLoggedIn && !isAuthenticated) {
      onLogout(user);
    }
  }, [loading]);

（而 isLoggedIn、onLogin 和 onLogout 是与 redux 一起使用的 props）。这样我就尝试在商店中注册令牌。

然而，无论如何，getTokenSilently 返回 undefined，即使 isAuthenticated 和 user 都很好。我尝试查找它，但似乎找不到任何东西。

谢谢！

Answer 1

当我遇到这个问题时，结果发现这是一个 Promise 问题，因为这就是它从 Auth0 返回给我的方式。因此，在这种特殊情况下，我会更深入地研究这一点。