Third Party Authentication in Flask

Overview

The use of third party apps to assist in login is fairly common. It improves a user's experience whenever they want to access content that is protected.

Tools Used

• Rauth
• Flask framework
• Python 3 for programming
• SQLite database
• Flask-Bootstrap for crossplatform responsiveness
• Flask-WTF for web form creation
• Flask-Migrate for database management
• Flask-Mail to handle password reset requests
• Twitter API
• FaceBook API
• Heroku for deployment

Features

• User authentication
• Password Reset
• Message flashing for improved user feedback
• Error handling and useful redirects
• Social Logins

Deployed Application

• Flask third party auth - Heroku
• Flask Third Parth Auth - Render

Contributors

• Gitau Harrison

Testing Deployed App

• Click on either LOGIN WITH FACEBOOK or LOGIN WITH TWITTER buttons
• Enter your account details upon request
• You should be able to log in

Testing Locally

You will need:

• Facebook app account
• Twitter developer account

Learn how to create a Facebook and a Twitter app in this third party authentication guide. From this guide you will learn how to generate your Facebook and Twitter apps' API Keys and Secret_ID. You will need them to run this application locally.

Additional Notes on Twitter Developer API

Twitter API working you need "Elevated" Access Level

Screenshot from below Page: https://developer.twitter.com/en/docs/twitter-api/getting-started/about-twitter-api#v2-access-leve

Additionally you need to add the below URL to your Callback URI / Redirect URL settings in Twitter developer API http://127.0.0.1:5000/callback/twitter

If you have only "Essential" Twitter API Access - you will get the below error message in response.

127.0.0.1 - - [07/Jul/2022 03:37:32] "GET /authorize/twitter HTTP/1.1" 302 -
{'errors': [{'message': 'You currently have Essential access which includes access to Twitter API v2 endpoints only. If you need access to this endpoint, you’ll need to apply for Elevated access via the Developer Portal. You can learn more here: https://developer.twitter.com/en/docs/twitter-api/getting-started/about-twitter-api#v2-access-leve', 'code': 453}]}
social_id:twitter$None

To test this application, first

1. Clone it:

$ git clone git@github.com:GitauHarrison/third-party-authentication-using-flask.git

2. Create and activate your virtual environment:

$ mkvirtualenv flask_auth_test # I am using virtualenvwrapper

3. Install necessary dependancies as seen in requirements.txt:

(flask_auth_test)$ pip3 install -r requirements.txt

4. Run the application:

(flask_auth_test)$ flask run

5. Before you can run your server, remember to create a .env file following the guidance seen in the .env-template. Create a .env file in the root directory:

(flask_auth_test)$ touch .env

6. Update the .env file with all the necessary details. Here is a sample:

TWITTER_ID=
TWITTER_SECRET=
FACEBOOK_ID=
FACEBOOK_SECRET=

7. Run flask server:

(flask_auth_test)$ flask run

Once your application is running, you can access your localhost on http://127.0.0.1:5000/. I have not used ngrok. If you wish to do so, to provision temporary public URLs that will allow access to your application, learn how you can set it up here.

With the application running:

• Click on either social login buttons
• Authorize your account to sign you up
• You should be able to see the home page

References

1. If you do not know how to make a flask application, learn how to do that here.

2. This application makes use of ngrok. Learn how to incorporate it in your flask app here.

3. If you would like to know how to know how to integrate social logins (rather than simply running this application), read more here.