Serverless OAuth Login with GitHub and OpenJS Architect

OAuth Login

Restricting access to protected content is a very common feature. In this article, we'll take a look at how to implement OAuth from GitHub to create a serverless application with a login as well as grab some account information. We will be using Node.js and OpenJS Architect as the deployment framework. We will also set up automated deploys with Begin.

Get Started

To get started click the button below:

You will be prompted to log in with your GitHub credentials. That's all you need to create a Begin account and deploy the example app on live AWS infrastructure with staging and production endpoints.

Clone your repo to work locally

Architect has a local development server, called Sandbox, which emulates the behavior of your deployed app. We can clone the repo and run a local copy. You can find a link to the repo Begin creates in the lower-left corner of the Begin console.

git clone https://github.com/[your-github-username]/learn-static-oauth.git
cd learn-static-oauth
npm install

Create a GitHub OAuth application

This next step requires you to go to your developer settings in your GitHub account. Follow these instructions to create three total applications for testing, staging, and production.

Application Name	Homepage URL	Authorization callback URL
My App Local	http://localhost:3333	http://localhost:3333/login
My App Staging	https://foo-123-staging.begin.app	https://foo-123-staging.begin.app/login
My App Production	https://foo-123.begin.app	https://foo-123.begin.app/login

Add environment variables

Environment variables are how we are going to secure our secret keys. Your environment variables should not be checked into revision control, add prefs.arc to your .gitignore file. Create a prefs.arc file now with the following contents:

# prefs.arc file
@env
testing
  GITHUB_CLIENT_ID 4fe0a991a87d7668e267
  GITHUB_CLIENT_SECRET 0434fabb4c9dba388c0532fb3934a3c7afc191e9
  GITHUB_REDIRECT http://localhost:3333/login

You will also need to update the environment variables in the Begin console. To add your environment variables, open Environments in the left nav of your project's console.

Start your app

npm start

This command will start Sandbox and you should be able to preview your app at http://localhost:3333

Next Steps

Try out your app in staging and follow on for Part 2 where we'll take a closer look at the code in the Lamba functions.