Create an AuthProvider Component for Our React Application to Use Through React Context

In this lesson, we go over the AuthProvider component that will provide the onegraph-auth object everywhere in our React application.

This component will contain 2 React.useEffects. One will watch [props.auth, props.appId] and create an auth object if props.auth does not exist.

The next useEffect will set the headers and status in our local state. These are the headers our React application will use to authenticate requests to OneGraph.

Finally, we have our login and logout buttons that call auth.login and auth.logout respectively. These are the functions we call to log our users in through OneGraph OAuth.

We pass all our local state and our login logout functions to the AuthContext.Provider that we've created.