How to configure express with Github Auth0

Express

The first thing I recommend is to create a folder with the name of your project. My folder is called express-example.

Then we open a terminal in that folder and type npm init to configure our package.json. If you don’t know how to use npm init I leave you a link to the documentation here.

Normally npm init asks a lot of questions, a little trick is npm init -y, this option generates it directly without the questions.

Finally you will have something like this,

Then we are going to install express, using npm install express —save.

After executing it, we can see the package.json using the command cat package.json to check that we have the dependency.

We open this project with our favourite code editor, i personal use VSCode and then we create the index.js file on it.

Now let’s import express and run it on for example localhost:3000.

I really recomment to install nodemon with npm install nodemon — save because i always forgot to restart my express server, nodemon just do it for you everytime you save.

If we run the app with nodemon index.js you can see in the console “Example app listening on port 3000!”.

Now its time to configure the auth0 in github.

Configuring Auth0 in Github

To add a new application, log in to GitHub and go to OAuth applications in your developer settings. Next click Register a new application.

Once here it asks us to complete the application name, Homepage URL and one Authorization callback URL.

I’ve fill it like this:

The name of our application, I have put the name of our project “express-example”.

In the Homepage URL, I have put our homepage route “http://localhost:3000”.

And in the Authorization callback URL, I have put http://localhost:3000/user/signin/callback.

In summary, when we make a GET request to this callback (http://localhost:3000/user/signin/callback) and our application has been successful in authentication, GitHub returns a temporary code that will be used for the POST request needed to get the access_token.

Here you have a link in what explains it better.

Then click on register application. We will get a screen like this.
Where the most important thing is going to be the Client ID and the Client Secret.

Now we need to create a request to our callback (http://localhost:3000/user/signin/callback) to get the code.

Back to our application

Now we need to give the user authorization to Github, for that we need to create an index.html file into our app.

Then we need to have a link to Github with your Client ID https://github.com/login/oauth/authorize?&client_id=<your_client_id>

We need to render the index.html page when we go to our homepage (“localhost:3000”), so we need to add on the index.js this:

If we go to (“localhost:3000”) we will see, something like that

If we click Authorize we will see:

We just need to click Authorize <your_github_username> and Github redirect to our callback (http://localhost:3000/user/signin/callback) with a temporary code on the URL.

But before we continue if we look at the settings of express-example our Github Auth Application we will see:

The authentification works.

POST request to get the ACCESS_TOKEN

Now we are going to get the code from the url of the callback and to use it to get the access_token. Add this to our index.js file. We are taking the code from the URL.

If you repeat the process and go to “localhost:3000” and click into authorize, now you will see something like this:

This code is temporary and change in certain time, so we will use it to make our POST request to get the access_token.

I will use axios to make the POST request, you can install it with npm install axios — save and always remember to import it on the index.js.

Now just make a post request with axios with the code, the secret client and the client id to “https://github.com/login/oauth/access_token”.

And you will get the access_token, this access_token can be use to make any call to the Github API which needs authorization for example star a repository.

I upload all the project, in case anyone’s lost, to this repo in my Github.

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.

Thank you very much and keep coding!!!

Yoel