DEV Community

Cover image for Flask Social Authentication - Github & Twitter (With Sample)
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Flask Social Authentication - Github & Twitter (With Sample)

Hello Coders!

This article presents an open-source project that implements social login for Github and Twitter using Flask and Flask-Dance library. The source code can be downloaded from Github (MIT License) and used in real projects or eLearning activities.

Thanks for reading!


Flask Social Login - Github Authentication


✨ How to use the product

Once the source code is downloaded from the public repository, we
need to create the OAuth applications on Github and Twitter and use the credentials (ApplicationID and SecretKEY) for project configuration.


πŸ‘‰ Github Setup - Create an OAuth App

  • Sign IN to Github
  • Access Settings -> Developer Settings -> OAuth Apps
  • Edit your OAuth App
  • Set Callback URL: https://localhost:5000/login/github/authorized
  • Generate a secret key (used in the configuration)

πŸ‘‰ Twitter Setup - Create an OAuth App

  • Sign IN to Twitter
  • Access Developer Section
  • Create a new APP
  • Edit User authentication settings
  • Set the OAuth version: v1 or v2 (recommended)
  • Set Callback URL: https://localhost:5000/login/twitter/authorized

Create a new .env in the root of the project based on .env.sample and save the credentials provided by Github and Twitter. To compile and start the project, follow the steps:

πŸ‘‰ Install modules

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Set up the environment for Flask

$ export FLASK_APP=run.py
$ export FLASK_ENV=development
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Start the app using HTTPS

$ flask run --cert=adhoc
Enter fullscreen mode Exit fullscreen mode

The --cert=adhoc argument forces Flask to start using HTTPS protocol, required by OAuth redirects for bot platforms.

If all goes well, we should be able to access the app in the browser, authenticate via Github and Twitter and also inspect the information provided by each platform when /ping route is accessed:

Flask Social Login - Github Authentication


Flask Social Login - Twitter Authentication

Flask Social Login - Twitter Authentication


Github Account info - provided by the /ping route

Flask Social Login - User Information provided by Github.


Thanks for reading! For more resources, feel free to access:

Top comments (7)

Collapse
 
uithemes profile image
ui-themes

Thank you! how hard it is to extend the code for Google?

Collapse
 
sm0ke profile image
Sm0ke

The codebase requires only three things for each provider:

  • App_IS
  • Secret KEY
  • New blueprint provided by Flask-Dance (copy/paste work)

πŸš€πŸš€

Collapse
 
uithemes profile image
ui-themes

Sounds easy :)
Thanks again

Collapse
 
crearesite profile image
WebsiteMarket

Super useful, ty!

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€

Collapse
 
codewithyaku profile image
CodeWithYaku

Thank you very much for sharing

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€