Add Authentication to React with Auth0: Login and User Profile

Create Auth0 SDK Wrapper

In this video, we'll set up the initial scaffolding and state for our Auth0Provider. This provider will keep track of state using React Context and Hooks and expose methods of the Auth0 SPA SDK to the application.

Create a new file under the src folder called react-auth0-spa.js. Here's code at the end of this video:

import React, { useState, useEffect, useContext } from 'react';
import createAuth0Client from '@auth0/auth0-spa-js';

  window.history.replaceState({}, document.title, window.location.pathname);

export const Auth0Context = React.createContext();
export const useAuth0 = () => useContext(Auth0Context);
export const Auth0Provider = ({
}) => {
  const [isAuthenticated, setIsAuthenticated] = useState();
  const [user, setUser] = useState();
  const [auth0Client, setAuth0] = useState();
  const [loading, setLoading] = useState(true);
  const [popupOpen, setPopupOpen] = useState(false);

In the next video, we'll add a useEffect hook to initialize our Auth0 client.