Get a GitHub client ID and Secret for an OAuth Application

Add GitHub Authorization to an OAuth Client App

Create an OAuth Client-Server for code/token exchange

Parse for the Auth Code in a Query before Sending It to a Server

Exchange Auth Code in a Request for an Access Token

Fetch Protected Data from a Resource Server with an Access Token

Encode User Data with JSON Web Token (JWT)

Identify Users with JWT

Use JWT to Make a Protected Request

Handle a Protected Request with JWT

Add Github Login to Your Web App with OAuth 2.0

We are going to use our JWT to make a protected request. 

All we have to do is create a button with a click event that calls our `fetchRepos` function. In the fetchRepos function make a fetch request to the `/repos` endpoint. In the fetch, pass an Authorization header with your JWT as a Bearer token. Then just await the response!

https://app.egghead.io/api/v1/lessons/jwt-use-jwt-to-make-a-protected-request-9d957813/subtitles

Christian Nwamba: [0:00] Add a button in HTML file that you can click to fetch a list of the user's repositories. Call a protected request function in the unload function declaration. Create the function and start off with grabbing the button we added from the DOM.

[0:26] Set the buttons display by default to none since we can't fetch repos if the user is not logged in. To check if the user is logged in, check if there's a JWT in the local storage. If there is, show the request button and also add a click event to it.

[0:50] When the button is clicked, we want to call the fetchRepos() function. Declare the fetchRepos function and declare a variable that stores an endpoint on your server for fetching repos.

[1:05] Create a try...catch block and log errors to the console if any occurs. Use fetch to make a request to the server. Set the Authorization header to the JWT in local storage but prefixed with Bearer. Pull out the response in JSON format and just log it to the console.

[1:33] Open the index.js file inside the server folder and add a route to handle the request. For now, we will just log the Authorization header to the console to test that the server is receiving the request. Head to the browser and click the authorized link.

[1:53] After authorization, the button will appear. Click the button and head back to the terminal to confirm that the JWT is printed to the console.

Use JWT to Make a Protected Request

Share this video with your friends

Course

Add Github Login to Your Web App with OAuth 2.0