Users appreciate the convenience of a Google login button.

Deploying a Flask Project with Google Login on Heroku

Now that you’ve successfully added a Google login option to your Flask project — perhaps with the help of Alexander VanTol’s excellent RealPython how-to article—you might be wondering how to keep the new feature functional after you’ve deployed.

Before we get into the nuts and bolts, it is worth understanding why this process is a bit complicated. Your Google login script needs credentials (a Client ID and Client Secret) to function, but keeping these safe from prying eyes requires a different approach in deployment than in development.

Locally, you can protect your Client ID and Client Secret by using environment variables exported to the project in the terminal. These variables allow you to import credentials rather than key them into your project, minimizing the likelihood that you will accidentally expose the data on your versioning platform. To do this, define the ID and Secret in a config class using the os module.

First, in your config.py file, import the os module:

import os

Then, in a Config class, instantiate your Client ID, Client Secret, and Discovery URL with the os module, environ variable, and get method:

class Config():
    GOOGLE_CLIENT_ID = os.environ.get('GOOGLE_CLIENT_ID', None)
    GOOGLE_CLIENT_SECRET = os.environ.get('GOOGLE_CLIENT_SECRET', None)
    GOOGLE_DISCOVERY_URL = "https://accounts.google.com/.well-known/openid-configuration"

Now, the project can access these variables even though you never keyed them directly into the project.

To make the variables available to the project, use export statements in the terminal in the same way that you export your Flask app before running it. If you are using a Python virtual environment on a Mac or Linux machine, deactivate it first using the deactivate command. Then, export your ID and Secret as strings:

export GOOGLE_CLIENT_ID='numbersandletters2340856098'
export GOOGLE_CLIENT_SECRET='morenumbersandletters123123'

(Note the lack of spaces around the = and the quotation marks around the strings.)

In Windows, use set instead of export:

set GOOGLE_CLIENT_ID='numbersandletters2340856098'
set GOOGLE_CLIENT_SECRET='morenumbersandletters123123'

Your project can now use these variables locally. If you have set your home and callback URLs correctly in the Google Cloud console where you obtained your Client ID and Secret, your Google login should be functional.

Now comes the fun part: setting environment variables on Heroku so that the deployed version can also use the credentials safely.

Thankfully, your config.py and Config class can remain unchanged as you deploy because you’ll be adding the ID and Secret to the app’s deployment environment. But you will be exporting the credentials differently there.

From your app’s home page on Heroku navigate to Settings. There, in the Config Vars section, click on the Reveal Config Vars button.

Rows of key/value pairs should now be visible. For both the ID and the Secret, add a new variable using exactly the same casing and underscoring as in your config.py (e.g., GOOGLE_CLIENT_ID). If you receive an error message when trying to add the vars, reopen Heroku in an icognito or private tab and try again. Note: omit quotation marks when typing or pasting the values.

Your users will thank you for the convenience of being able to log in with Google, and you’ll have the peace of mind that comes from knowing you haven’t exposed your credentials to make this happen.