Outline
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';
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,
...initOptions
}) => {
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.