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 simulate user verification when making a protected request. To simulate the database we are just going to use a simple array.

We verify the user by grabbing the JWT off of the authorization header in the request. We then look for a user in the database with a matching JWT. If the verification is successful we can give the user the data they requested.

https://app.egghead.io/api/v1/lessons/jwt-handle-a-protected-request-with-jwt/subtitles

Instructor: [0:00] Create an array to serve as a test to the arrays. In the slash code route, after we have the token, user, and JWT, push all of them inside the arrays.

[0:14] Convert the slash repost route to use an async handler. Then add a try catch block that logs an error and sends the error to the client, if any.

[0:28] In the try block, grab the JWT from the authorization header. Place this string and take the second item in the array, since the first item contains the string bearer.

[0:43] Get the user that the JWT belongs to from the arrays using the find array method. Checking that the store JWT matches the JWT that the request received. Set the token on the user object to a token variable. Before making a request to fetch the repos, use the verified JWT function to confirm that the received JWT is valid.

[1:15] Then go ahead and call a fetch repos function with the token to get you a list of repos. Now, send the repositories back to the client. Of course, fetch repos does not exist, so let's create it. Create a URL variable to store a link to the repos endpoint on the results server.

[1:41] Use fetch to fetch the repos using this URL. You need to set the token in the headers as well, using the authorization header. Get the JSON data from the response and return the data. Head back to the browser and open your console.

[2:01] Click, authorize again, and you should see the JWT in the console and the fetch repos button will also show. Finally, click the fetch repos button and you should get the repos in the console.

Handle a Protected Request with JWT

Share this video with your friends

Course

Add Github Login to Your Web App with OAuth 2.0