This video is available to students only

Get the auth code

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Previous LessonRunning the applicationNext LessonAuth flow link

Lesson Transcript

  • [00:00 - 00:13] Get the auth code. In this lesson, we're going to define a function that will help us authenticate on GitHub. First, we'll need to define an HTML page that will use as a redirect endpoint for the GitHub authentication flow.

  • [00:14 - 00:30] Create a new file, as there's C, auth, auth, HTML. Here you can simply generate the page using Emet abbreviation, press an exclamation mark, and then enter. Usually Emet abbreviations are available in VS Code by default.

  • [00:31 - 00:57] We'll need to change the title of the document. It should say, "You are authenticated," and inside of the body, we'll have an H1 header saying, "You are logged in," and a paragraph saying, "Now you can go back to the command line." In your app, you can, of course, add some styles and make this page look a bit nicer.

  • [00:58 - 01:08] Now let's define the get code function. Inside of the auth folder, create new file, get code.ts, and here, let's first of all define the port constant.

  • [01:09 - 01:18] That's where our server is going to be running. We need a server so that we can handle the return URL after GitHub authentication.

  • [01:19 - 01:31] Port 3000. Now, expert const get code is going to be a sync function. So it returns a promise with string and return a new promise.

  • [01:32 - 01:41] We are not going to reject it. We're only going to resolve. So define a callback where we'll want to load the auth HTML that we've just defined.

  • [01:42 - 02:09] FS, read file, SRC, auth, auth, HTML. We'll have error and file value. We'll call it HTML. We want to log the error if we receive it, console log error, and then create a server, HTTP, create server, where we pass in a sync function that will process requests, and if there is no URL, it will just skip.

  • [02:10 - 02:15] Here, we'll define the get code logic. And then we'll launch our server. Listen, the port.

  • [02:16 - 02:24] All right. So to get the code, we first need to parse the URL from request and get the query from it.

  • [02:25 - 02:41] There will be a field code. We get its value and then reply with status 200 and content type text HTML. Write the HTML contents to the response and close the connection.

  • [02:42 - 02:50] Now we need to get the access token. To do this, we first define the form data, const data equals new form data.

  • [02:51 - 02:58] We add fields to it, client ID. It comes from process and client ID.

  • [02:59 - 03:09] We pass client secret that also comes from the dot n client secret. We pass in the code that we got from the query, the state.

  • [03:10 - 03:15] It's a random string. I'm going to send a BC and very direct URI.

  • [03:16 - 03:28] In our case, it's going to be HTTP local host 3000. You might want to also put this value into your dot n file so that later you can configure it easier.

  • [03:29 - 03:52] Fetch the access token access token equals await fetch HTTPS, GitHub.com login or off access token. Specify the options method post body data headers, accept application slash Jason.

  • [03:53 - 03:57] And then we parse it as Jason. Then, rest, rest Jason.

  • [03:58 - 04:10] After we got the access token, we store it in the keytar or the available password storage. A weight keytar set password for GitHub process and client ID.

  • [04:11 - 04:20] Here we use aclamation mark to state that the client ID is known to exist at this moment. And then we pass the access token as a value.

  • [04:21 - 04:31] After the password is stored, we can resolve it, resolve access token. And then we open the website and then we open GitHub to begin the authentication flow.

  • [04:32 - 04:39] Open HTTPS, GitHub, com, login or off. Authorize.

  • [04:40 - 04:55] We pass in client ID from process and client ID. Specify the scope of this authentication is going to be user, read organizations, public repos and admin enterprise.

  • [04:56 - 05:04] And then pass the state state equals ABC. This string should match the one that we pass in the form data.

  • [05:05 - 05:10] All right. We've created a function that will allow us to get the access token and store it in the keytar.

This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Fullstack React with TypeScript Masterclass