OAuth2 with Secret Keys on a Server

OAuth2 with Secret Keys on a Server

Note

The source code for this server can be found here. Keep in mind that if you do not wish to go through the steps for building the server and instead want to just run it from the source code, you will still need to go through the steps for setting up your own Reddit client id and secret key in the .env file.

Now we are going to create a slightly more advanced and “real world” API. There’s actually a bit of back story and context for this one.

In the following module, we will be developing the Giflist application. In short, this application fetches and displays data from the Reddit API.

I went with the Reddit API initially because we could look at how to integrate data from a 3rd party into the application without having to create the backend ourselves. This also led to some good learning opportunities as we didn’t have any control over the data format, so we needed ways to transform the data into the format we wanted on the client-side.

However, Reddit has made some changes and have started blocking requests via CORS. CORS, or Cross-Origin Resource Sharing, is a browser based mechanism that allows a server to block requests that originate from a different domain or one they do not specifically allow to make requests.

Fortunately, we can get around this issue by creating our own server to proxy requests to Reddit. Rather than your client side application making the request directly to the Reddit API, our application would make the request to our own serer, and then our server would make the request to Reddit.

In terms of getting around CORS, this is actually enough to do just that. CORS only deals with blocking requests that originate from the browser, not a server. However, I’ve also taken this opportunity to more properly integrate with the OAuth2 process that Reddit uses to provide API access. This is more compliant with the way Reddit wants you to access the data, and you will have your own API key for accessing that data.

It is also another good learning opportunity as the mechanisms the Reddit API use are very common, and we can learn about how to integrate with 3rd party APIs using secret keys and OAuth.

Set up the NestJS server

The first thing we are going to do is just get another basic server set up with NestJS. This will be exactly the same as in the last lesson.

Action

Create a new NestJS application with the following command (make sure this is outside of any Angular project):

npx @nestjs/cli new reddit-api

Note

Choose the npm package manager.

Once the application is generated, open it in your editor.

Action

Modify the bootstrap method in main.ts to reflect the following:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}

Now we can start our server with:

npm run start:dev

We are also going to use a couple of extra packages in this lesson, so let’s install those now.

Action

Install the following packages:

npm install @nestjs/config

This will allow us to store and use our .env environment variables within the API. We will use this to store our secret key for accessing the Reddit API.

npm install @nestjs/axios

This will allow us to make HTTP requests from our server to Reddit’s API.

Creating a Reddit API application

In order to make requests to the Reddit API we will need to:

1. Request an access token from the Reddit API using our secret key
2. Use that token when making a request for the data we want

So, our first step is going to be to get one of those secret keys.

Action

Visit the following URL to create an application with Reddit under your account:

• https://www.reddit.com/prefs/apps

You should create a web app (you can put whatever you like in the other fields, we will not be utilising the redirect_uri). If you would like more information on this process, you can find Reddit’s own guide here.

Important

Take note of the Secret key and the Client ID (listed under your applications title). We will be making use of these soon.

Important

Your secret key should never be revealed to anyone as it will provide access to whatever resources your secret key grants you access to and is tied to your account. If you are paying for API access then people could gain access to resources at your expense, or potentially access privilleged information or actions that are protected by your secret key. This is the case with any type of secret key for anything, it should never be revealed/exposed.

This is why we will be using our secret key on the server as people should not have access to see the key. Whereas, if you were to attempt to use a secret key within a client-side Angular application, anybody could easily see the source code and steal the key.

That said, it does not mean it is impossible for someone to steal your secret key from the server. Your server could be comprimised, keys might accidentally be revealed in compromised serer logs, your server might send the key somewhere it shouldn’t. You might upload your server code or environment variables to GitHub and your GitHub account might become comprimised and someone steals the key that way. You might accidentally make your private GitHub repo public and reveal the key that way.

Security is a massive topic and not one we can cover here. What I am hoping to convey with this warning is that while generally if we store our secret key server-side (not client-side) that is an appropriate thing to do, but it doesn’t mean there aren’t still security considerations.

Setting up the Secret Key

Now with the topic of security in mind, let’s set up the secret key on our server in a security friendly way.

The general process of setting up secret keys in a .env file is something we can do in other backends contexts, not just for NestJS applications. We will walk through the general idea, but NestJS basically already has all this set up for us.

Action

Add .env to the list of files in your .gitignore file at the root of your project. Make sure to commit these changes.

You should still double check, but NestJS already comes with a .gitignore by default that already includes