How To Authorize a User Using the GitHub OAuth API using Python and Flask: Part Three.

Build, Test and Deploy the Application to Heroku.

In the previous article, we created and tested the GitHub authentication application locally. In this article, we will deploy the application to Heroku. We will do the following:

• Create a Heroku account and obtain an API key
• Create the development, staging, release and production branches
• Create the development, staging and production environments on GitHub
• Create the GitHub workflows for deploying the application
• Deploy and test the application

Creating the branches

We will start by creating the necessary branches. Our workflow will look something like this:

• We create our features on the feature branch.
• The feature branch is then merged into the development branch.
• The development branch is then merged into the staging branch, which is deployed to the staging environment on Heroku.
• The staging branch is then merged into the release branch, then we create a release.
• This release branch is finally merged into the production branch which is deployed to the production environment on Heroku.

Ideally we would have deployed the code on the development ranch to the development environment on Heroku, but since the callback URL specified when registering the application with the GitHub OAuth API points to our local computer, that would be difficult to implement. First, let us ensure that the application still works; navigate to the project directory:

source venv/bin/activate
make run

Then navigate to http://localhost:5000/home and test the application.

Let us create the necessary branches; on github make a small change to the README.md file then commit this file into a new branch called staging. Do the same to create the release and production branches. We cannot create the branches from the command-line since we have a pre-commit hook that prevents us from committing code directly to the development, staging, release or production branches.

Create the application workflows

We will have a workflow for each branch. The feature development workflow will simply do code quality checks on the code published to the feature branch. This workflow will run under the development environment on GitHub. Let us create the development environment under which the feature development and the development workflows will run. On your GitHub account go to the Settings tab:

Scroll down to the Environments tab in the resulting page:

Create a new environment called Development. Then under the Development environment create a new secret. These secrets will simply mirror the values in the .env file in our project.

Do the same for CLIENT_SECRET, FLASK_APP and FLASK_ENV. Then create a file called .github/workflows/feature-development.yml file and paste in the following:

This is a very simple workflow:

• Sets up three versions of python, 3.7, 3.8 and 3.9
• Installs the dependencies
• Runs the unit tests
• You can add another step to run code quality checks

Then push the code to github and under the actions tab in your github account you should see your workflow run. Then create a file called development-workflow.yml under the .github/workflows folder. Add the following to the file:

This workflow is similar to the feature development workflow, only that it runs only when a pull request is made against the development branch or code is pushed into the development branch. You can add code quality checks. Once again push your code to GitHub, then make a pull request against the development branch.

Next, let us create the staging environment and workflow. Follow the same steps as previously to create a new environment, but this time name it Staging. Go ahead and create the same secrets as before with the same values. We will update them shortly. Then under the .github/workflows folder, create a file called staging-workflow.yml and add the following:

• Set the APP_NAME to a unique name otherwise the app will not deploy to Heroku
• We also pass our app the four environment variables that it needs as HD_ENVIRONMENT_VARIABLE_NAME i.e HD_SECRET_KEY.
• The workflow is similar to the other two and only adds the deployment to Heroku step.

To finish this off, we need to create a Procfile that will tell Heroku how to deploy our application:

Create a Heroku account

Heroku is a platform that allows one to host their own websites. Registration is free and their free tier allows you to host up-to five websites. Navigate over to Heroku and create an account, in-case you do not have one.

Create another app for staging

Then head over to GitHub OAuth and create another app.

• Choose any suitable name
• For the Homepage URL pick https://<APP_NAME>-staging.herokuapp.com i.e https://staging-oauth-staging.herokuapp.com/ in my case
• Give it any description that you want
• The for the Authorization callback URL use https://<APP_NAME>-staging.herokuapp.com/github/callback i.e https://staging-oauth-staging.herokuapp.com/github/callback
• Then register the application

• Now copy the secret id and secret key, then navigate over to your github account and under the Staging environment use these values for the CLIENT_ID and CLIENT_SECRET.

Create repository secrets

In the staging workflow, under the deployment job, there are two values that we need i.e the heroku_api_key and heroku_email.

Log into your Heroku account, then click on your avatar and then select Settings:

In the resulting page, scroll down to the API key section then click on Reveal and copy the value:

Now navigate to GitHub and select the Settings tab. In the resulting page scroll down to the Secrets tab and select Actions:

In the resulting page select New Repository secret then add the following:

In the value field paste in your Heroku API key that you copied earlier on and name it HEROKU_API_KEY. Repeat the steps to create a new secret called HEROKU_EMAIL and the value is the email address that you used to log into Heroku with.

Deploy application to Heroku

Push the code to GitHub, then first let the feature development workflow to run to completion. Then create a pull request against the development branch. let all the checks complete. Then merge the development branch into the staging branch. Let the checks complete and finalize the merge. Then head over to your application URL, https://<APP_NAME>-staging.herokuapp.com or by clicking on:

Now test out the workflow by going to the /home route. You should see the home page:

Click on the GitHub login button to authorize the application:

Click on the authorize user button to come to the dashboard:

And that’s it. We have successfully created and deployed an application that authorizes a user using the GitHub OAuth API.

Create a Release

To create our first release, we need a release workflow. This will be triggered each time we push a tag to GitHub. Create a file named release-workflow.yml under the .github/workflows folder and add the following:

Then push your code to GitHub and merge the feature branch into the development branch and the development branch into the staging then the staging into the release branch. Of-course you can just merge the feature branch directly into the release branch, but we are following best practices in this tutorial. Once all the checks have passed and the code is merged, it’s time to tag our code; we will use commitizen for this. It is part of our pre-commit hooks and keeps track of the application versions for us and also enforces the correct formatting of our commit messages, so at the command-line:

cz bump # generates a tag

You should get:

cz changelog # to generate the changelog (CHANGELOG.md)

Now let us push this latest tag to GitHub:

git push origin v0.1.0

You should get the release as indicated on your project page; I had a little bit of an issue, hence had to push the code more than once, so I ended up with v0.3.0:

Production Workflow.

The production workflow is similar to staging workflow.

• Create a new workflow called file production-workflow.yml similar to staging-workflow.yml and update the APP_NAME as well as the ‘staging’ bits with ‘production’ such as the environment.
• Create a new environment on GitHub called Production then create the appropriate secrets.
• Create a new OAuth application with the correct URLs.
• Push the code to GitHub and optionally create a new release
• If stuck, reach out to me, my socials are found at the end of this article.

Conclusion

In this article, we:

• Created the staging, release and production branches that our application uses
• Created the development and staging environments on GitHub
• Created a Heroku account account and obtained the API keys
• Created a staging OAuth application with GitHub and obtained the client id and client keys
• Created secrets for our environment
• Created secrets for our whole repository
• Created the feature development, development and staging workflows
• Deployed and tested our application to Heroku
• In the end, I challenged you to create the production workflow.

That’s it for this project. I hope you enjoyed it and learnt something. Give it a clap or share it out and do not hesitate to reach out to me in-case of an issue. The code for this application is here github-oauth-app. I am Lyle, a junior software engineer with a passion for developing, testing and deploying scalable services. You can find me on twitter, linkedin, github and here’s my portfolio. See you next time.