❓ What we're going to build?

In this article, I'll explain my approach to adding a QR code login. The app built as a reference has two main screens. Let's briefly discuss what it does.
Suppose a user is logged in on Device A and wants to log in on Device B. On Device A, the user will navigate to the page to enter (for simplicity; since both clients are browser based) a code shown on Device B's login screen. On success, the user will be automatically logged in on Device B.

😺 GitHub Repo

The demo project source code can be found on GitHub

mabdullahadeel / yt-django-qr-code-login

Tutorial showing how to add qr code login with django, channels on the backend and nextjs frontend

Discord Like QR Code Login

This repo holds the code for a demo app that shows how to use QR codes to login to a web app.

Important Links

Youtube Tutorial -> https://youtu.be/8Pi5wp732Xw
Medium Post -> https://medium.com/@abdadeel/how-to-add-discord-like-qr-code-login-d2cef2f5657f
Architecture Diagram -> http://bit.ly/3IfywmD

Backend

Tech Stack

Django
Django Rest Framework
Django Channels
Postgresql
Redis

Prerequisites

Python >=3.9

How to run

Clone the repo
Move to the backend folder
```
 cd backend
```
Create a virtual environment by running
```
python -m venv env
#OR
python -m virtualenv env
```

Activate the virtual environment

 # Linux or Mac
 source env/bin/activate
 # Windows
 env\Scripts\activate

Install dependencies
```
pip install -r requirements.txt
```
To setup the database, either use docker or install postgresql on your machine.
- To use docker, run
```
docker-compose -f local.yml up -d
```
- To install postgresql on your machine, follow the instructions here
Apply migrations
```
python manage.py makemigrations
python manage.py migrate
```
To run the…