Jadi saya menggunakan Auth0 untuk pengguna saya mendaftar. Saya mencoba untuk mendapatkan id pengguna di bawah sub:value untuk ditambahkan ke database saya untuk mengidentifikasi dengan posting pengguna. Saya mencoba menggunakan API Konteks untuk mendapatkan info pengguna untuk dimasukkan ke dalam database saya.

react-auth0-spa.js

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

};

other.js (mencoba mendapatkan info pengguna dari react-auth0-spa.js)

class AddAlbum extends Component {
  constructor(props) {
    super(props);
 }

componentDidMount() {
    let value = this.context;
    console.log(value);

  }

render() {
    return (
)
}
AddAlbum.contextType = Auth0Context;

Ini memberi saya user: undefined

Di index.js saya, saya memiliki ini

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

Yang saya yakini memberi saya hasil ini:

enter image description here

Jadi saya bertanya-tanya mengapa API Konteks saya tidak berfungsi dan memberi saya user: undefined.

0
DDavis25 3 Maret 2020, 23:03

1 menjawab

Jawaban Terbaik

Anda mencatat pengguna saat komponen pertama kali dipasang, jauh sebelum panggilan auth0FromHook.getUser() selesai. Catat di componentDidUpdate, atau periksa di induk jika nilai itu tersedia, dan jangan pasang komponen anak sampai tersedia.

1
Andy Ray 3 Maret 2020, 20:44