OAuth - Deploying OAuth WebApp to Heroku

This page describes how to deploy OAuth Code on Heroku. After you follow these steps, you should be able to access your web application through the Heroku URL and log users in/out with Github's OAuth.

NOTE: If you are working on your local machine, make sure to install heroku before using it in the command line (you can do so from their website). If you're working on Repl.it, download the heroku CLI just as you did in Part 4 of Lab 8 (make sure to include the .gitignore file!).

Ok, let's get into it.

Step 1: Create Heroku app and deploy

First make sure you are in the directory with all your web app files, and type this:

1) heroku login

2) heroku create

You only need to do “heroku create” once for your web app. You are basically initializing the connection between your web application and heroku.

1. • Save the link that ends with herokuapp.com. This heroku URL will be used to register your Github OAuth.

3) git push heroku master

1. • Do this step every time you want to update your website's code with your own.

Step 2 : Register on Github

If you already registered your app on Github, then update the links with whatever was outputted from heroku create.

If you haven't registered it yet, then go here to register it.

Step 3 : Setup Environment Vars on Heroku

1. Log in to your Heroku account online and select your app.

2. Then under “Settings,” you will find a section called “Config Vars.” This is where you will assign values to the 4 configuration variables listed below (these are needed to be able to access Github's OAuth). The screenshot below demonstrates how to assign values to the config vars.

The 4 Config Vars in Heroku:

GITHUB_CLIENT_ID : This is the Client ID value generated in the previous step. Think of this as the "username" for your app to access Github's OAuth.

GITHUB_CLIENT_SECRET : This is the Client Secret value generated in the previous step. Think of this as the "password" for your app to access Github's OAuth.

APP_SECRET_KEY : This can be random. Just type on the keyboard randomly. In reality, this should be more secure, but it's fine in this case.

GITHUB_ORG : This is the Github org that you want to require users to be in. Use this: ucsd-cse-spis-2020

After you add these 4 Config Vars, it should look something like this (with your own values filled in):

If, after doing this, you're still running into issues, then go to the next page to figure out how to test locally.