How to Encrypt OAuth 2.0 GitHub Credentials with Next.js

Data breaches are particularly costly and damaging because they expose sensitive data. Sensitive data includes a variety of personally identifiable information, as well as data that could be used to access someone's online accounts, such as a password or an OAuth token. You can learn more about what is considered sensitive data in our blog post on the topic.

OAuth is an open standard for authorization that allows you to access protected data from an application. It's safer and more secure than asking users to log in with passwords. However, the credentials data that is transmitted — in the form of an access token or client secret — can give you full control over your customers' accounts. Anyone could issue requests with these credentials and use your app's identity to gain access to user information.

By encrypting the credentials, you can ensure that the data is protected even if your codebase or database is compromised.

This guide will walk you through an authentication flow using GitHub OAuth 2.0 that encrypts the access token using Outbound Relay.

Once running, you will see that you are logged in with GitHub, but your access token always remains encrypted. The working demo will look like the below, only with your GitHub details logged:

Prerequisites

• An Evervault Account (sign up for free here)
• A GitHub OAuth App (create one from your GitHub account)
• NodeJS v12.22.0 or higher

Create and run the project

First, clone this GitHub Repo, and navigate to the working directory, or fork this Replit. It includes a basic front end with a login button and a callback handler. Then install the packages and run the development server with your preferred manager.

Add your Evervault API Key

Create a new Evervault App. Then go the App Settings page. You will need to set your Evervault App ID & API Key as an environment variable. Make sure your key is scoped to include Outbound Relay.

A .env.example has been provided for you, so add in the key to the corresponding variable and rename the file to .env.

Create a GitHub OAuth app

Anyone with a GitHub account can create a GitHub OAuth app in just a few steps. While signed into your account, go to the Developer settings and click on OAuth Apps from the sidebar. Then click the New OAuth App button.

Fill in the details required including the name of your app, the homepage URL, and the Authorization callback URL.

Your Homepage URL should be your localhost.

http://localhost:3000/

The Authorization callback URL should be that link with /api/callback appended.

http://localhost:3000/api/callback

This maps to the callback function, which you will take a look at in the next step.

Click Register application, which will take your application settings dashboard. Next, add in the GitHub OAuth Client ID and Client Secret in your .env.

Take a look at the callback handler to see how it works.

The callback handler

In your app, open up pages/api/callback.js. The file has imports for the Evervault Node SDK at the top of the file and axios for making requests.

Between the function brackets, you are initializing the SDK and enabling Outbound Relay.

If you look at the GithubComponent, you will see a GET request to GitHub for a code. Once you receive the code in the callback you need to exchange it for an access_token by making a POST request with the code.

The last step is to use the access_token to get the name and email of the GitHub user. It requires specifically defined headers per GitHub requirements. Then you take the response from the call to get the user data, and return it as a JSON object.

Because you enabled Outbound Relay, it will handle the encryption of the access token. You don’t need to add any other encryption calls using the SDK within your code. This option is also safer than using server-side encryption, because if you encrypt on the server then it will have access to the data in plaintext.

The last step is to set up your endpoints in Outbound Relay.

Configure Outbound Relay

You will need to configure github.com as a destination to handle the initial request for the access_token.

Click Add Outbound Destination and add github.com

Now in your Outbound Relay dashboard, add access_token as a field to encrypt under Response Encryption.

Repeat the process to add api.github.com for when you are requesting the user’s name and email.

Now your app should keep the access token encrypted when it comes back into your app, and will decrypt it instantly when it makes the second request for the user name and email.

Try it out!

Log in with GitHub

Now you can login with GitHub. When you click the button it should take you to an authorization page that will look familiar if you’ve authenticated using GitHub before. Then you’ll be redirected to a page that logs the user data with access_token encrypted.

Conclusion

In this guide, you encrypted OAuth tokens with Next.js using the Evervault Node SDK and Outbound Relay.

If you ran into an issue or have any questions about this guide, feel free to raise them on GitHub. Keep your credentials safe!