Flask Social Login with Github - Free sample included
Tags: webdev, flask, oauth2, appseed
Published: 2021-09-30 13:54:53

---
title: Flask Social Login with Github - Free sample included
published: true
description: The article presents an open-source sample that implements a social login over Github using Flask and Flask-Dance Library.
tags: webdev, flask, oauth2, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mdnzxk7laytbb7ozh02.jpg
canonical_url: https://blog.appseed.us/flask-social-login-with-github/
---
Hello Coders!

This article presents an open-source sample that implements Github **[Social Login on top of Flask](https://blog.appseed.us/flask-social-login-with-github/)**, a popular web framework written in Python. The project source code can be downloaded and used from Github (MIT Licence) and also configured to work with other well-known OAuth2 providers like Google, Twitter, or Facebook.

*Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

> **[Flask Social Login](https://github.com/app-generator/flask-social-login)** - Source Code (Github)

---

The code uses `Flask-Dance` to bridge the authentication flow to the Github OAuth interface. In order to make the app more appealing a few simple pages styled with Bootstrap 5 are also provided.

---

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68h4g0wp0i60qpfvz67u.png)

---

The authentication flow provided by `Flask-Dance` library requires only a few lines of code to implement a Social Authentication via Github (and not only).

The first thing we need to do is to access Github and create a new OAuth application that will provide `OAUTH_CLIENT_ID` and `OAUTH_SECRET_KEY` required by `Flask-dance` library.

---

> **Create OAuth APP on Github**

In order to do this, we need to access `Github` -> `Settings` (top right corner) -> `Developer Settings` from the left menu.

---

![Flask Social Login - Create OAuth App on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3qzuv1t6vrz541127em.png)

---

Access the `OAuth Apps` item from the left menu and click to create a new `APP`:

---

![Flask Social Login - OAuth APPS Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv4qxgyup4t23hsj0dx2.png)

---

Once the new page is loaded we can create a sample APP. The most important settings are listed bellow:

- **Client ID** - (readonly) generated by Github - to be saved in `.env` file
- **Client Secrets** - we need to generate one and use it in `.env` file
- Application Name - important for public services
- Homepage URL: `https://localhost:5000`
- Authorization callback URL: `https://localhost:5000/login/github/authorized`

Please note that all URLs use `HTTPS` schema, something that we need to take care in our project. Once the project is saved, we can go back to our project, save the information provided by Github and start it.

---

## Flask Social Login - Compile project

As mentioned before, source code is published on Github and we can start and test this simple project with a few lines type in the terminal. Please note that the project requires a [minimal programming kit](https://docs.appseed.us/content/tutorials/minimal-programming-kit) already installed in the workstation:

- **Python3** - a modern script language used for many types of projects  
- **GIT** - a command-line tool used to download sources from Github
- A **modern code editor** - `VSCode` or `Atom`

---

Once all tools are installed and accessible in the terminal we can proceed further and compile the project by following the instruction provided by the `README` file.

---

> **Step #1** - Clone sources (public repository)

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/flask-social-login.git
$ cd flask-social-login
```

---

> **Step #2** - Create a virtual environment

```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
```

---

> **Step #3** - Install dependencies

```bash
$ # Install requirements
$ pip3 install -r requirements.txt
```

---

> **Step #4** - Set Up Environment

```bash
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
```

---

> **Step #5** - [Creating an OAuth App](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) (on Github)

- SignIN to Github
- Access `Settings` -> `Developer Settings` -> `OAuth Apps`
- Edit your OAuth App
  - `App Name`
  - `App Description`
  - (mandatory) `HomePage`: `https://localhost:5000`
  - (mandatory) `Authorization callback URL`: `https://localhost:5000/login/github/authorized`
  - Generate a new `secret key`

---

> **Step #6** - Rename `.env.sample` to `.env` and edit the file

- `GITHUB_OAUTH_CLIENT_ID` - value provided by Github (step #5)
- `GITHUB_OAUTH_CLIENT_SECRET` - value provided by Github (step #5)

---

> **Step #7** - (optional) Enable DEBUG Environment (local development)

```bash
$ # Set up the DEBUG environment
$ (Unix/Mac) export FLASK_ENV=development
$ (Windows) set FLASK_ENV=development
$ (Powershell) $env:FLASK_ENV = "development"
```

---

> **Step #8** - Start the project (HTTPS)

```bash
$ flask run --cert=adhoc
$
$ # Access the app in browser: HTTPS://127.0.0.1:5000/
```

---

At this point, the app should be up & running in the browser ready to successfully authenticate users via Github. 

---

![Flask Social Login - HOMEpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ydjj1bt8h7m1p3pxfqs.png)

---

> **Thanks for reading!** For more resources, please access:

- [AppSeed](https://appseed.us/) - for support and more [Flask](https://appseed.us/admin-dashboards/flask) Starters
- [Flask User Authentication](https://blog.appseed.us/flask-user-authentication-free-sample/) - blog article (provides free sample)