We've all experienced the new form of logging into your account where you log in by scanning a QR code from a mobile app. The first time I interacted with it was with Discord. By now millions of people have been on this 👇 page to experience this amazing platform.
Besides beautifully crafted graphics, you can observe a QR code that you can scan using the discord mobile app to log in instantly.
In this article, I'll show you my approach that I reverse-engineered to achieve the same login experience in my application.
❓ 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.
👩💻 What's the stack?
In this article, I am going to use the following stack but you should be able to mimic this approach with any backend and frontend technology out there.
Backend
- Django
- Redis
- PostgreSQL
Frontend
- Nextjs (React/Typescript)
🎳 Architecture
To get better understanding of application architecture, visit this.
😺 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
foldercd 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
- To use docker, run
-
Apply migrations
python manage.py makemigrations python manage.py migrate
-
To run the…
🎥 Video
Watch me build a complete demo application 👇
Top comments (0)