TypeScript, React, Hooks & auth0-spa-js

auth0-spa-js.tsx

import * as React from "react";
import { useState, useEffect, useContext, FC } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";

interface Auth0ProviderProps {
  auth0Options: Auth0ClientOptions;
  onRedirectCallback: Function;
}

export const Auth0Context = React.createContext(undefined);
export const useAuth0 = () => useContext(Auth0Context);
export const Auth0Provider: FC<Auth0ProviderProps> = props => {
  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(props.auth0Options);
      setAuth0(auth0FromHook);

      if (window.location.search.includes("code=")) {
        await auth0FromHook.handleRedirectCallback();
        props.onRedirectCallback();
      }

      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: any) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p: any) => auth0Client.loginWithRedirect(...p),
        getTokenSilently: (...p: any) => auth0Client.getTokenSilently(...p),
        getTokenWithPopup: (...p: any) => auth0Client.getTokenWithPopup(...p),
        logout: (...p: any) => auth0Client.logout(...p)
      }}
    >
      {props.children}
    </Auth0Context.Provider>
  );
};

I tried to run this and got the following error:

TypeScript error in /Users/chrisaddams/Development/Auth0-POC/auth0-poc/src/react-auth0-spa.tsx(68,7): Type '{ isAuthenticated: any; user: any; loading: boolean; popupOpen: boolean; loginWithPopup: (params?: {}) => Promise<void>; handleRedirectCallback: () => Promise<void>; getIdTokenClaims: (...p: any) => any; loginWithRedirect: (...p: any) => any; getTokenSilently: (...p: any) => any; getTokenWithPopup: (...p: any) => an...' is not assignable to type 'undefined'.

Same problem here. My working example is over there: https://gist.github.com/romixch/05728f0adc600d442d6ec38876452d56