How to add Discord like QR Code Login

2 min readJan 2, 2023
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.

An image that shows discord login screen with email and password field on the left and a qr code that can be scanned to login instantly. I image also contains cartoonish background.
PC: (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.


  • Django
  • Redis
  • PostgreSQL


  • Nextjs (React/Typescript)

🎳 Architecture

a simple architecture diagram of the system

😺 GitHub Repo

The demo project source code can be found on GitHub

🎥 Video

Watch me build a complete demo application 👇




An engineer who loves to play around with tech and share learnings!