OAuth Authentication with Flask - Connect to Google, Twitter, and Facebook

In this article, we are going to build a flask application that will use the OAuth protocol to get user information. First, we need to understand the OAuth protocol and its procedure.

What is OAuth?

OAuth stands for Open Authorization and was implemented to achieve a connection between online services. The OAuth Community Site defines it as “An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.”. A popular example of OAuth would be the Sign in with Google button present on various websites. Here the website service connects with the google service to provide you with an easy option to authorize your resource to the desired service. There are two versions of OAuth OAuth1.0 and OAuth2.0 now.

Terminologies in OAuth

• Client: It is the application or service trying to connect to the other service.
• Provider: It is the service to which the client connects.
• Authorization URL: It is the URL provided by the provider to which the client sends requests.
• Client ID and Secret:  It is provided by the provider and used when the authorization request is sent to the provider by the client.
• Authorization Code: It is a code that is retrieved by the client on successful authentication by the user and it is sent to the provider’s authorization server.
• Callback URL: It is the URL set by the client to which the provider sends the authorization code and the user resources are retrieved by the client service.

Steps involved to setup OAuth

Step 1: Register your application as a client on the provider website. You will receive the client credentials which include the client ID and client secret.

Step 2: The client application sends an authorization request to the provider’s authorization URL.

Step 3: The user authenticates themselves on the provider’s site and allows resources to be used by the client service.

Step 4: The provider sents the authorization code to the client

Step 5: The client sends the authorization code to the provider’s authorization server.

Step 6: The provider sends the client tokens which can be used for accessing user resources.

Now that the concept of OAuth is clear we can start building our application. There are various libraries available to us that can be used to achieve OAuth. The library we will be using is AuthLib which supports OAuth 1.0 and OAuth 2.0.

Installing required dependencies

To install the required dependencies type the below command in the terminal.

pip install -U Flask Authlib requests

Note: It is recommended to create a virtual environment before installing these dependencies.

Retrieve the client credentials from the providers

• Google: Create your Google OAuth Client at https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2C&followup=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2C&ifkv=AdBytiPUuIh-G6TD1Q33vbBNhxaRsts_jcZm3f0J9U-YwtEg4QSrpuTM2Mo1l7gTHaeqotYEWzEKxQ&osid=1&passive=1209600&service=cloudconsole&flowName=WebLiteSignIn&flowEntry=ServiceLogin&dsh=S-231695386%3A1753259859847420 make sure to add http://localhost:5000/google/auth/ into Authorized redirect URIs.
• Twitter: Create your Twitter Oauth 1.0 Client at https://developer.x.com/en by creating an app. Add http://localhost:5000/twitter/auth/ into Authorized redirect URIs.
• Facebook: Create your Facebook OAuth Client at https://developers.facebook.com/ by creating an app. Add http://localhost:5000/facebook/auth/ into Authorized redirect URIs.

The client credentials can be used directly in the program but in actual production, these credentials are to be stored in environment variables.

Create the UI 

Create a folder called templates and inside create an index.html file. Paste the following code inside the index.html file. It is a simple code that creates buttons for every provider.

Creating the Flask app

Initialize the flask application

Let's create a simple flask application that will do nothing and will simply render the above-created HTML file onto the home page.

Run the server using the following command to make sure that the application is running successfully and the index.html page is displayed. 

After creating the apps let's see how to add the Oauth for google, Twitter, and Facebook. But at first let's initialize the OAuth.

Initialize OAuth

Here we have initialized the OAuth using the OAuth(app) class and we have changed our server name to localhost:5000. Now let's see how to create the OAuth for different Platforms.

Create OAuth for Google

Create OAuth for Twitter

Create OAuth for Facebook

Run the app

Start server with: 

python app.py

Then visit: 

http://localhost:5000/

👁 Image

Note: The OAuth configuration for every provider is different and depends on the version of OAuth. Every provider has its own documentation on implementing the protocol so make sure to check it out.