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

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…

🎥 Video

Watch me build a complete demo application 👇

Top comments (0)