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.
Top comments (0)