React
Add Authentication to React with Auth0: Login and User Profile

Add useEffect to Wrapper

We can use React's Effect Hook to set up an Auth0 Context.

In this video, we use React's Effect Hook to initialize our app's authentication state. The finished hook looks like this:

// src/react-auth0-spa.js
// code from previous video is unchanged
  useEffect(() => {
    const initAuth0 = async () => {
      const auth0FromHook = await createAuth0Client(initOptions);
      setAuth0(auth0FromHook);

      if (window.location.search.includes('code=')) {
        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
  }, []);

We'll finish up this wrapper in the next video.