How to implement QR code cross login from mobile app as authentication method for website or webapp in a vendor agnostic way?

Question

I am using Django 2.2 for my webapp.

And I have been looking for tutorials that cater for QR code cross login to webapp using mobile app.

Basically the workflow is like this:

expected workflow

1. User arrives at website on desktop
2. Given a choice of username/password or QR code login (We assume user is registered)
3. User chooses QR code to login
4. User is prompted to install mobile app (can be android or iOS)
5. User installs mobile app and logins using username/password.
6. On mobile app, user then agrees to future login using QR code as alternative (this is done once)
7. After this, in future logins, when User chooses QR code to login as per step 3. They use the mobile app to scan QR code generated on the website login page.
8. The mobile app then uses FaceID or FingerPrint ID (assuming iOS) to then allow login. The user presses a Yes button on the mobile app to confirm login.
9. Somehow the webapp is notified dynamically and allows login on the desktop browser.

I don't quite get how the mobile and the web app at the backend all work with one another to achieve this seamlessly.

What I did find

I did find this library https://github.com/aruseni/django-qrauth which seems no longer maintained. But I still cannot quite get how the flow works between mobile app and webapp backend.

I also found this https://medium.com/@ksarthak4ever/django-two-factor-authentication-2ece42748610 which seems to use the mobile phone as a 2FA device. Not exactly the use case I am looking for unless I misunderstood.

I did find this article https://backendless.com/how-to-implement-mobile-to-web-cross-login-using-a-qr-code/ which is what gave me the term "cross login". However, the article is tilted heavily towards this particular vendor.

I am looking for an "understanding" of the concept without being reliant on the specifics of the vendor implementation.

What I am not looking for

In case, my question is poorly phrased and gets misunderstood, I have included this section to make clear what I am not looking for.

I am not looking for the use case where the QR code serves as a 2FA confirmation for the authenticator app.

I am also not looking at code examples yet. I just want a clear understanding first of how things work between the mobile and web app. I believe JWT is needed though I am guessing.

A workflow is more appreciated than actual code because I want to gain an understanding first of how this works.

Answer 1

I think you wanna do something like WhatsApp’s web where the users log to the web app by QR code, if I was doing such implementation I’ll do it as follows.

1. When the user arrives to the login page, we create a logInSession with a random token and we save it to the database.
2. we send that random token to the browser, which will render QR code based on the random token. We start a pooling for ‘log_me_in’ view to check if the user scanned the barcode.
3. The user goes to the mobile app and select log-on browser activity which will launch the camera.
4. Once QR is read on the phone, make a request to the backend with the scanned token and update the logInSession with the username.
5. With the next call to ‘log_me_in’ view, log the user in based on the username and tell js to redirect to homepage.

Hope this is clear enough.

Answer 2

The key concept is that login occurs when a user and browser are matched. A user means a user(or a user device) already recognized(authenticated) by the server.

1. user's PC browser requests QR login to server (without any account information)
2. server makes login request key and send the key to the user's browser. the key is displayed as QR code. (the role of this key is to identify the browser)
3. user's already logged-in device(user) read the key(QR) and sends a login acceptance request to the server with the key.
4. At this point, the server knows who both the user and the browser are.
5. The server allows the browser to log in as the user.

---

• The key to identify browser could be session or web socket channel or any other form of information.
• The server must store the key until the login process is complete.
• If a valid login acceptance request is received, the server should prompt the browser to log in.(server->client, push). there are several techniques for accomplishing this.(polling via AJAX, Web socket, push notification services, etc..)

---

I'll explain it with Django-channels web socket framework. (In this case login request key and channel name is same. but different key and channel name is also okay.)

1. browser: user chooses QR login. (without any account information)
2. Backend: web socket channel is made. name of the channel is securely randomly generated string(FOO). key(FOO) is stored in redis as Django-channels[redis] made a channel named that string(FOO). send the key(FOO) to user's browser.
3. browser: get the key(=channel name=FOO) and open the web socket channel(FOO). and also displays QR code(FOO).
4. user(smart phone): user launch smart phone app(already logged in). and scan the QR code(FOO). user smart phone app send a login acceptance request to the server with QR code's information(FOO)
5. Backend: server send securely generated login key(BAR) via web socket channel(FOO).
6. browser: get login key(BAR) via web socket channel(name is FOO) and redirect to login url with login key(BAR).
7. server: get the login key(BAR) and let the browser to log in as the user

login request key(FOO) could be a JWT(contains key, url, expire, etc..) or just secure string(varies depending on the scenario). it doesn't contains account information and server must store it.

login key(BAR) is usually a JWT. with JWT, it contains account information and server does not have to store the key.(stateless)