React Authentication (Auth0) - 什么是正确的方法？

Question

我是一个反应新手，但我正在学习，需要你的帮助。我使用 Auth0 进行身份验证，并且我已经部分实现了他们的反应示例：

https://auth0.com/docs/quickstart/spa/react/01-login

这是我的部分代码：

App.js:

       <Auth0Provider
          domain={AUTH_CONFIG.domain}
          client_id={AUTH_CONFIG.clientId}
          redirect_uri={AUTH_CONFIG.callbackUrl}
          onRedirectCallback={onRedirectCallback}
        >
          <Router history={history}>
            <RequireAuthentication>
              <MyTheme>
                <MyLayout />
              </MyTheme>
            </RequireAuthentication>
          </Router>
        </Auth0Provider>

Auth0Provider:

import React, { useState, useEffect, useContext } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";
import jwtDecode from "jwt-decode";
import axios from "axios";
import AUTH_CONFIG from "./auth0Config";
import { useDispatch } from "react-redux";
import * as authActions from "app/auth/store/actions";

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

  const dispatch = useDispatch();

  useEffect(() => {
    const initAuth0 = async () => {
      console.log("initAuth0 start");
      const auth0FromHook = await createAuth0Client(initOptions);
      setAuth0(auth0FromHook);

      const isAuthenticated = await auth0FromHook.isAuthenticated();
      console.log("Authenticated from init: " + isAuthenticated);

      setIsAuthenticated(isAuthenticated);

      setLoading(false);
      console.log("initAuth0 end");
    };

    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 getUserData();
    setUser(user);
    dispatch(authActions.setUserDataAuth0(user));
    setIsAuthenticated(true);
  };

  const handleRedirectCallback = async () => {
    if (!auth0Client) {
      console.warn("Auth0 Service didn't initialize, check your configuration");
      return;
    }

    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const user = await getUserData();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(user);
    dispatch(authActions.setUserDataAuth0(user));
  };

  const getAccessToken = async () => {
    const accessToken = await auth0Client.getTokenSilently({
      audience: AUTH_CONFIG.identity_audience,
      scope: "read:allUsers read:UserPermission"
    });
    return accessToken;
  };

  const getIdToken = async () => {
    if (!auth0Client) {
      console.warn("Auth0 Service didn't initialize, check your configuration");
      return;
    }
    const claims = await auth0Client.getIdTokenClaims();
    return claims.__raw;
  };

  const getTokenData = async () => {
    const token = await getIdToken();
    const decoded = jwtDecode(token);
    if (!decoded) {
      return null;
    }
    return decoded;
  };

  const getUserData = async () => {
    console.log("getuserdata");
    const tokenData = await getTokenData();
    const accessToken = await getAccessToken();
    return new Promise((resolve, reject) => {
      const { sub: userId } = tokenData;

      const UserService =
        "https://localhost:44312/api/v1/usermanagement/user/" + userId;

      axios
        .get(UserService, {
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
            "Access-Control-Allow-Headers":
              "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers",
            "Content-Type": "application/json",
            Authorization: "Bearer " + accessToken
          }
        })
        .then(response => {
          resolve(response.data);
        })
        .catch(error => {
          // handle error
          console.warn("Cannot retrieve user data", error);
          reject(error);
        });
    });
  };

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

要求身份验证：

import React, { useEffect } from "react";
import { useAuth0 } from "app/auth/AuthProvider";
import { SplashScreen } from "@my";
import history from "@history";

export const RequireAuthentication = ({ children }) => {
  const { isAuthenticated, loading } = useAuth0();

  useEffect(() => {
    console.log("checkAuth");
    if (!loading) checkAuth();
    // eslint-disable-next-line
  }, []);

  const checkAuth = () => {
    console.log("checkAuth isAuthenticated: " + isAuthenticated);
    console.log("checkAuth loading: " + loading);

    if (!isAuthenticated && !loading) {
      history.push("/login");
    }
  };

  return isAuthenticated ? (
    <React.Fragment>{children}</React.Fragment>
  ) : (
    <SplashScreen />
  );
};

callback.js:

import React, { useEffect } from "react";
import { SplashScreen } from "@my";
import { useAuth0 } from "app/auth/AuthProvider";

function Callback(props) {
  const { isAuthenticated, handleRedirectCallback, loading } = useAuth0();

  useEffect(() => {
    const fn = async () => {
      if (!loading) {
        console.log("handleRedirectCallback: " + loading);
        await handleRedirectCallback();
      }
    };
    fn();
  }, [isAuthenticated, loading, handleRedirectCallback]);

  return <SplashScreen />;
}

export default Callback;

问题是 RequireAuthentication 组件是在 Auth0Provider 完全初始化之前呈现的，因此我从来没有在 "true".

上得到 isAuthenticated

RequireAuthentication 组件是 Auth0Provider 的子组件。是否可以等待 Auth0Provider 完全初始化后再渲染 RequireAuthentication 组件？？？

这里的正确方法是什么？？我完全错了吗？

谢谢

克里斯

Answer 1

取决于 useEffect 中的 loading 和 isAuthenticated 项目，以便组件在更改后重新呈现。

  useEffect(() => {
    console.log("checkAuth");
    if (!loading) checkAuth();
    // eslint-disable-next-line
  }, [loading, isAuthenticated]);

React Authentication (Auth0) - 什么是正确的方法？

React Authentication (Auth0) - what is the right way?

authentication

reactjs

auth0