Wrap Our React Application in an AuthProvider Component
We wrap our app in src/index.js file with the AuthProvider component. Then we call React.useContext in our App component to grab the login and status in our AuthContext.
status will be an object where the keys in the object will be the services that the user is logged into. So, we can check status.github to check if the user is logged into GitHub.
If the user isn't logged into GitHub, we display JSX with a prompt to log in. We create a button component where the onClick handler calls our login function with the string of 'github' passed in.
Instructor: [0:00] We'll go back to our Index.js, and we will import AuthProvider from Context/auth-context. We will also import Auth from our Auth file. Next, we're going to wrap our app with AuthProvider. Now, we can open App.js, and we can import AuthContext from Context/auth-context.
[0:40] Then, inside of our app we can const. We'll pull out login in status from React.useContext AuthContext. Under our useQuery hook, we will check, if not Status.GitHub, then we will return some JSX, so, div. We'll go each one, login to GitHub.
[1:15] We'll go p, In order to see your profile, you'll have to login with GitHub. Next, we will render a button with an onClick of a function that calls login with the string, GitHub, and pass to it. The button text will be, login with GitHub.
[2:00] Let's go over to our app. Property, cannot read GitHub of null. First, we will have to check, if not status or notStatus.GitHub. Now we have login with GitHub in this little button.
[2:18] App ID must be a valid UUID. Let's look. Auth, we forgot to pass, Auth equals Auth. Now when we go to login and we authorize, we can see our result, but we're still getting, missing Auth for GitHub.