DEV Community

Cover image for How to add Discord like QR Code Login
Abdullah Adeel
Abdullah Adeel

Posted on

How to add Discord like QR Code Login

#typescript #webdev #javascript #python

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.

PC: https://discord.com/login (discord login screen)

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

GitHub logo 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

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
    Enter fullscreen mode Exit fullscreen mode

  • Create a virtual environment by running

    python -m venv env
#OR
python -m virtualenv env
    Enter fullscreen mode Exit fullscreen mode

  • Activate the virtual environment

     # Linux or Mac
 source env/bin/activate
 # Windows
 env\Scripts\activate
    Enter fullscreen mode Exit fullscreen mode

  • Install dependencies

    pip install -r requirements.txt
    Enter fullscreen mode Exit fullscreen mode

  • To setup the database, either use docker or install postgresql on your machine.

    • To use docker, run 
      docker-compose -f local.yml up -d
      Enter fullscreen mode Exit fullscreen mode
    • To install postgresql on your machine, follow the instructions here

  • Apply migrations

    python manage.py makemigrations
python manage.py migrate
    Enter fullscreen mode Exit fullscreen mode

  • To run the…

View on GitHub

🎥 Video

Watch me build a complete demo application 👇

Latest comments (0)

Read next

andrepolischuk profile image

Tools for frontend monitoring with Prometheus

Andrey Polischuk -

mjgs profile image

Latest Newsletter: Good Output (Issue #159)

Mark Smith -

fabrikapp profile image

How to Use Typed Routes in Next.js

Fabrikapp -

fabrikapp profile image

The Evolution of Next.js: A Deep Dive into the Latest Updates Since Version 14.2

Fabrikapp -