Integrating With the GitHub API Using EveryAuth

Recently Fusebit announced EveryAuth project that allows you to integrate with multiple services via OAuth easily. Learn how to use EveryAuth with GitHub API using a GitHub OAuth Application.

You have an existing Express.js application that needs to integrate with GitHub API to display the following information:

• User profile information
• Public repositories

The application will display the authorizing user’s GitHub profile that looks like the following:

Configuring EveryAuth

This blog post assumes you already have EveryAuth configured in your development environment. In case you don’t, follow the configuration steps from the EveryAuth GitHub Repository.

A basic Express application will look like the following:

const express = require('express');

const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Let’s add support to EveryAuth and configure the GitHub service so we can interact with their API.

Install dependencies

For interacting with GitHub API from Node.js we will use the official GitHub SDK Octokit

npm i octokit

Install the @fusebit/everyauth-express package

npm i @fusebit/everyauth-express

Install the uuid package. Used to generate a unique identifier for the userId.

npm i uuid

Install the cookie-session package to allow your application to establish a session (an HTTP-Only cookie) to store the authorizing user id.

npm i cookie-session

Add Routes

There are two critical routes we need to add to our application:

• Authorize route
• Finished route

Let’s understand the role of each route:

Authorize route

EveryAuth middleware enables your application to perform an authorization flow for a particular service. We will be using githuboauth service to use a GitHub OAuth Application. A GitHub App is also supported. For the example of this blog, either service will work since both applications can act as the authorizing user. Understand when to use GitHub OAuth Apps vs. GitHub Apps.

You don’t need to configure your own GitHub OAuth App; EveryAuth provides out-of-the-box shared OAuth Clients so that you can get up and running quickly.

EveryAuth simplifies a lot the authorization flow:

app.use(
  '/authorize/:userId',
  (req, res, next) => {
    if (!req.params.userId) {
      return res.redirect('/');
    }
    return next();
  },
  everyauth.authorize('githuboauth', {
    // The endpoint of your app where control will be returned afterwards
    finishedUrl: '/finished',
    // The user ID of the authenticated user the credentials will be associated with
    mapToUserId: (req) => req.params.userId,
  })
);

You can define any name you want for the authorization route. In our previous example, it’s called authorize, but it’s up to you, and your application needs to use a different name/path.

Finished route

After the authorization flow finishes, control is returned to your application by redirecting the user to the configured finishedUrl in the authorize route. The redirection includes query parameters that your application can use to know the operation status. You can use any path for the route. Just ensure it matches what you have configured in the finishedUrl property. In this route, you can now interact with the GitHub API by leveraging the EveryAuth service to get a fresh access token.

We will get the authorizing GitHub user information and public repositories using the REST API.

// Get userId from the authorization redirect or via session if already authorized.
const handleSession = (req, res, next) => {
  if (req.query.userId) {
    req.session.userId = req.query.userId;
  }
  if (!req.session.userId) {
    return res.redirect('/');
  }
  return next();
};

app.get('/finished', handleSession, async (req, res) => {
  const userCredentials = await everyauth.getIdentity('githuboauth', req.session.userId);
  const client = new Octokit({ auth: userCredentials?.accessToken });
  const { data } = await client.rest.users.getAuthenticated();
  const { data: repos } = await client.request('GET /user/repos', {});
  ... render the data
});

Now, we need to display the data. We will use a simple template engine called pug, which allows us to quickly render an HTML page with the data returned from GitHub.

Install the dependency and set it as the default view engine:

npm i pug

app.set('view engine', 'pug');

Define the pug template by creating a views folder and the name of the view. In our case, it’s called index.pug. Add the following code:

html
head
    title=title
    style
    include ./style.css
body
    .container
    .profile
        .top
        img.pic(src=avatar_url alt='GitHub Avatar')
        h2=name 
        a(href=html_url) #{login}
        p=bio
        p.followers
        i(class="fa-solid fa-users")
        span #{followers} followers
        span(class="separator") -
        span #{following} following
        section
        span
            i(class="fa-solid fa-building")
        span #{company}
        section
        span
            i(class="fa fa-location-dot")
        span #{location}
        section
        span
            i(class="fa-brands fa-twitter")
        span 
            a(href=`https://www.twitter.com/${twitter_username}`) #{twitter_username}
        section
        span
            i(class="fa-solid fa-floppy-disk")
        span Using #{used_storage} % #{plan.name} plan storage
    .public-repos
        h2 Your public repositories (#{public_repos.length})
        ul
        each val in public_repos 
            li
            a(href=val.html_url title=val.description target="_blank") #{val.full_name}
            span=val.description
            unless !val.language
                span.lang=val.language

Render the data:

res.render('index', {
  title: `GitHub Profile for ${data.login}`,
  ...data,
  used_storage: Math.round((data.disk_usage * 100) / data.plan.space, 2),
  public_repos: repos,
})

Run your application (assuming your code is defined in index.js file)

node .

Navigate to http://localhost:3000

Check out the complete code in GitHub

To Wrap up

Congratulations! 👏 You’ve learned that interacting with GitHub API via a GitHub OAuth App is easy with EveryAuth!

Let us know what you think, don’t hesitate to reach out if you have any questions or comments. You can also reach out to me directly through our community Slack and on Twitter.

Fusebit is a code-first integration platform that helps developers integrate their applications with external systems and APIs. To learn more, take Fusebit for a spin or look at our getting started guide!