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
status in our
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.
this change is necessary for the call to github to complete correctly, otherwise everything else is good!