Serverless OAuth Login with GitHub and OpenJS Architect
Published: 2020-12-03 16:54:14

## 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: 

[![Deploy to Begin](https://static.begin.com/deploy-to-begin.svg)](https://begin.com/apps/create?template=https://github.com/begin-examples/learn-static-oauth)

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. 

```bash
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](https://docs.github.com/en/free-pro-team@latest/developers/apps/creating-an-oauth-app) 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:
```bash
# 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.
![screenshot of environment variables console](https://dev-to-uploads.s3.amazonaws.com/i/0081qnr933ehdydohomz.jpg)

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

![screenshot of completed app](https://dev-to-uploads.s3.amazonaws.com/i/sxo0z2ygfitk86twfir5.png)

## 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.