Add useEffect to Wrapper - Thinkster

Outline

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.

Go Pro to unlock all content & remove ads

I finished! On to the next chapter