Use JWT to Make a Protected Request

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.