qr code login methods authentication coverAuthentication

QR Code Login Methods and Authentication

Compare QR code login via native apps and passkeys for secure, convenient authentication. Discover the best method for your organization.

Blog-Post-Author

Vincent

Created: August 27, 2024

Updated: August 29, 2024


Our mission is to make the Internet a safer place, and the new login standard passkeys provides a superior solution to achieve that. That's why we want to keep you up to date on the latest developments in the industry.

1. Introduction: Authentication With QR Codes#

Secure and convenient authentication methods are more crucial than ever. With the increasing number of online services we access daily on different devices, traditional password-based systems are becoming less effective and more cumbersome. Especially for companies with a large number of users on their native apps (iOS or Android Apps) this has led to increasing demand for QR code-based logins, which offer a quick and easy way to authenticate users without the need for typing in complex passwords or even usernames.

In this context, questions like the following emerge:

  • How does QR code-based authentication with native apps work?
  • How does it compare to QR code-based authentication with passkeys?

native qr code revolutNative QR Code Revolut qr code passkeys applePasskeys QR Code Apple

Prominent examples for QR codes in native app logins are app-first services like WhatsApp, TikTok or Revolut. At the same time, there is a fast growing list of companies supporting passkey logins.

In this article, we will explore QR code-based authentication techniques. We will not focus on TOTP QR codes used for second factor initialization (with additional apps like Authy or Google Authenticator).

We will also compare different QR based authentication methods, examining their strengths, weaknesses, and potential vulnerabilities.

By the end, you'll have a clearer understanding of whether QR code-based authentication is the right choice for your security needs.

2. What are QR Codes?#

QR codes, or Quick Response codes, are two-dimensional barcodes that can store a variety of information, ranging from URLs to plain text. Originally developed in 1994 by Denso Wave, a subsidiary of the Toyota Group, QR codes were designed to track automotive parts quickly and efficiently. Since then, QR codes have evolved and found their place in various industries due to their ability to store a large amount of data in a small, scannable square.

The term "QR Code" is actually a trademark of Denso Wave, although the technology itself has become widely adopted and is not restricted by the trademark. QR codes are characterized by their black and white square patterns, which can be scanned using a smartphone or dedicated scanning device to access the encoded information.

Support for QR codes has been integrated into mobile operating systems such as iOS and Android for several years. Both platforms natively support QR code scanning through their respective camera apps, making it easier for users to interact with QR codes without the need for additional software.

Substack Icon

Subscribe to our Passkeys Substack for the latest news, insights and strategies.

Subscribe

Generally, QR codes used in conjunction with apps leverage custom URLs or app links. These links can trigger the app to open automatically if it is installed on the device. If the app is not installed, the QR code can direct the user to the relevant app store to download and install the app, thus facilitating a smooth user experience. Here you can see a list of paths that Revolut has registered for App Handling:

https://revolut.com/.well-known/apple-app-site-association
{ "applinks": { "apps": [], "details": [ { "appID": "QUZEZSEARC.com.revolut.revolut", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.test", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.retail.india", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.retail.india-debug", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.invest", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.invest-debug", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.revolutx", "paths": ["/app/*"] }, { "appID": "QUZEZSEARC.com.revolut.revolutx-debug", "paths": ["/app/*"] } ] } }

As you can see all links containing starting with “"/app/*" are handled you will see an example in the next section. By embedding custom URLs and app links within QR codes, businesses and developers can create tailored experiences that lead users directly to the desired app or service, enhancing both convenience and security in user interactions.

3. QR Code Login via Native Apps#

QR code login via native apps leverages the seamless interaction between a mobile device's camera and specific URLs embedded within QR codes. The process typically begins with a user scanning a QR code displayed on a website or another device using the camera of their smartphone. The QR code contains a custom URL that is specifically designed to interact with a particular native app, such as those found on iOS or Android devices.

For example, a service like Revolut might use a QR code with a URL such as https://revolut.com/app/challenges/qr/e2d78521-d38a-4773-b1b8-27a902a36b4b. This URL is bound to be recognized by the Revolut app installed on the user’s device.

scan native qr code

When the QR code is scanned, the app automatically catches this link, recognizes it and displays the corresponding app (in this example above see “Revolut” being identified as the matching App), and proceeds to handle the login process internally. This interaction is facilitated by deep linking mechanisms that both iOS and Android support, which allow specific links to open directly within an installed app rather than in a web browser:

confirm native qr code login

If the app is not installed on the device, the operating system typically prompts the user to install the app by redirecting them to the appropriate app store, whether it be the Apple App Store for iOS devices or the Google Play Store for Android devices.

native qr code no app installed native qr code install revolut

This ensures that even if the user does not have the app installed initially, they can quickly and easily obtain it, continuing the process after installation.

In most cases, existing customers who have already installed the app will experience a smooth login process. They scan the QR code, the app opens automatically, and the authentication is completed without the need to enter a username or password. This method provides primarily convenience for users, as no sensitive information is transmitted during the QR code scanning process.

What happens technically is that an existing logged-in session on a mobile phone is used to authenticate a new session on the desktop. There are different techniques for doing that. A very elaborated version is published in the WhatsApp Security Whitepaper under Client Registration Ă  Companion Device Registration Ă  Link Using QR-Code.

whatsapp multi device sessionTaken from https://engineering.fb.com/2021/07/14/security/whatsapp-multi-device/

As WhatsApp supports multi device access and end to end encryption since 2021 the architecture is not perfectly suited for authentication – as the protocol is primarily designed for a multi device messaging application. There are simpler approaches to achieve a secure handshake, depending on the actual authentication implementation. What needs to be kept in mind is that you always need to ensure secure handling of user sessions and the communication channels between the device and the server. Regardless of the complexity of the QR code authentication login implementation, some key security principles should always be followed:

  1. Session Integrity: The existing logged-in session on the mobile phone, used to authenticate a new session on a desktop or another device, must be securely validated. This typically involves checking the authenticity of the session using secure tokens or other cryptographic methods to prevent session hijacking or replay attacks.
  2. Encrypted Communication: All communication between the mobile app, the server, and the device requesting authentication should be encrypted using HTTPS. This helps ensure that sensitive information, including session tokens and login details, cannot be intercepted or tampered with during transmission.
  3. Secure Token Generation: Any tokens or credentials generated for the QR code authentication process should be generated securely. This could include pinning it to the requesting device so it cannot be used on other devices as precautionary measure (e.g. Browser-Agent).
  4. Login Verified by the User: Before finalizing the authentication process, it is recommended to have a step where the user can verify or confirm the login attempt. This could be in the form of a notification on the mobile device requiring user approval and showing authentication details, adding an extra layer of security (as it can be seen in the screenshot above).
  5. Time-Based Restrictions: Implement time-based restrictions on QR code validity to minimize the risk of the QR code being used for unauthorized access if it falls into the wrong hands. Limiting the time window in which a QR code can be used helps reduce potential security threats. It should refresh automatically and have maximum validity lower than 120 seconds to avoid man in the middle attacks.
  6. Location-Based Restriction: Limitations regarding login attempts, such as “impossible travel” detections, should also be enforced with QR codes. This could involve automatically intercepting login attempts based on suspicious IP-based intelligence, such as generating a QR code in the USA while the app is opened for authentication in Europe.
  7. Rate-Limiting, Logging and Monitoring: Implement appropriate rate-liming, logging and monitoring to detect and respond to any suspicious activities associated with QR code logins. This helps in identifying potential security breaches and taking timely actions to protect user accounts.
  8. User Notification: Successful login attempts on a new device should trigger an email notification to the user with important information (such as when and where the login was attempt with which device and IP address) and instructions on what to do if the login was not triggered by the user (such as immediate contact of the service, monitoring the account, or removing all logged-on devices if the system supports it).

By following these best practices, companies can implement QR code-based authentication that is both user-friendly and secure, leveraging the convenience of mobile devices while maintaining robust security measures to protect user data and sessions.

Slack Icon

Become part of our Passkeys Community for updates and support.

Join

Now let’s take a look on QR code logins via passkeys.

4. QR Code Login via Passkeys#

Passkey-based authentication offers a secure, cross-device authentication system that is integrated into the iOS and Android ecosystems and is specified in the WebAuthn standard. Currently, only passkeys created on iOS or Android can be used for cross-device authentication (CDA) via QR codes.

4.1 How Do QR Code Logins with Passkeys Work?#

Let’s analyze how the QR code login with passkeys work. The following chart shows a high-level overview of the different steps.

flow qr code login passkeys

For both iOS and Android, passkeys are stored within the platform's native authenticator (e.g. Face ID, Touch ID or Android Biometrics). This ensures that a user’s passkeys are available across all their devices logged into the same Apple ID (for iOS) or Google account (for Android) on modern operating system versions.

4.2 What are the Requirements for QR Code-Based CDA?#

  • Both Devices Need an Active Internet Connection: Both devices involved in the authentication process must have an active internet connection. This is crucial for synchronizing data and verifying the credentials during the authentication process.
  • Both Device Need to Support Bluetooth: Both devices need to support Bluetooth, and Bluetooth must be activated. Bluetooth is used to establish proximity between the devices, ensuring that the devices are near each other during authentication, thereby mitigating the risk of phishing from a remote location.

4.3 Weaknesses of QR Code Logins via Passkeys#

  • Device-Bound Desktop Passkeys: Passkeys that are device-bound and on desktops, e.g. on Windows platforms, are not eligible for QR code-based CDA.
  • Reliance on Bluetooth: Relying on Bluetooth can sometimes be a drawback due to potential connectivity issues or device settings that might interfere with the Bluetooth proximity check. While establishing proximity can enhance security, it might also cause usability challenges if the devices fail to connect via Bluetooth. However, once devices are successfully paired, subsequent connections typically become more straightforward.
Subreddit Icon

Discuss passkeys news and questions in r/passkey.

Join Subreddit

4.4 Strengths of QR Code Logins via Passkeys#

  • No Remote Phishing Attacks: The use of Bluetooth for proximity checks ensures that both devices are physically near each other during the authentication process, reducing the risk of phishing attacks from remote locations.
  • Synced Passkeys Provider Better UX: The synchronization of passkeys across devices also provides a seamless user experience, as users do not need to manage multiple sets of credentials.

4.5 How to Improve the UX for QR Code Logins via Passkeys#

When implementing passkey-based Cross-Device Authentication (CDA), it's crucial to provide clear guidance to users on the process. Users should be informed that a QR code will be displayed and that they need to use their mobile phone to scan it.

cross device login passkeys

In our opinion, it is important to ensure that QR codes are not shown if the user does not have a passkey that can be utilized for CDA. Additionally, it's necessary to verify that the user's current operating system and browser supports CDA before displaying a QR code.

StateOfPasskeys Icon

Want to find out how many people can use passkeys?

View Adoption Data

To manage these scenarios effectively, we have outlined all the critical cases in this article, so we won’t go into details here. Our passkey intelligence system is designed to automatically handle these situations, ensuring that QR codes are only displayed when appropriate and guiding users smoothly through the authentication process. This ensures a seamless experience while maintaining high security and compatibility across various devices and operating systems.

5. Comparison of QR Code Based Logins#

In this section, we will summarize the two primary QR code-based login methods discussed in this article: QR code login via native apps and QR code login via passkeys. Each method offers unique advantages and is suited for different use cases based on factors such as security, user experience, and implementation complexity.

  • QR Code Login via Native Apps leverages deep linking to connect a QR code with a specific app installed on a mobile device. When a user scans the QR code, the associated app is triggered, facilitating a seamless and secure login process. This method is commonly used in app-first applications like WhatsApp, TikTok, and Revolut, where users are familiar with the app environment and can easily authenticate without needing to enter a password.
  • QR Code Login via Passkeys utilizes a more advanced, cross-device authentication approach that integrates directly with the operating system's platform authenticators (there’s no need to install any native app). This method is designed to provide a high level of security, using synchronized passkeys and requiring both devices to be in close proximity (verified via Bluetooth) during the authentication process. This method offers strong protection against phishing attacks and provides a streamlined user experience across multiple devices.

Let’s see how both methods compare and have different characteristics:

Comparison Table: QR Code Login via Native Apps vs. QR Code Login via Passkeys

CharacteristicQR Code Login via Native AppsQR Code Login via Passkeys
App RequirementYes, requires native appNo
Passkey rollout requiredNo, independentYes, users need to opt-in to passkeys
Implementation EffortHighHigh
Phishing Resistance MFANoYes (phishing resistant & MFA)
Proximity CheckNoYes
User ExperienceSeamless if app is installedSeamless if passkey exists
Security LevelMediumVery High

We have focused on authentication-based characteristics in the comparison table, and the surrounding requirements outlined in section three apply to both alternatives. Location-based and time-based restrictions are not needed with passkeys, as they employ phishing resistance and proximity checks via WebAuthn.

Demo Icon

Want to try passkeys yourself? Check our Passkeys Demo.

Try Passkeys

6. Conclusion#

As outlined in the introduction, we have taken a look into the two most common scenarios of cross-device-authentication, lets shortly summarize them:

  • QR Code Login via Native Apps is ideal for companies with a strong user base on their native apps, are not considering implementing passkeys yet and are not too concerned with phishing attacks. This method provides convenience and security by using the app’s existing authentication mechanisms, reducing friction for users who frequently use the app, but does not help with infrequent app logins.
  • QR Code Login via Passkeys offers a more secure and flexible option, especially for environments where cross-device authentication is necessary and passkeys are also under consideration or already used as authentication factor. By leveraging platform-level authentication and Bluetooth-based proximity checks, this method brings they only future proof phishing-resistant multi-factor authentication method also to cross-device cases.

To answer our questions from the introduction:

  • How do the two approaches different: Each organization should choose the method that best fits its needs, considering factors such as user base, security requirements, and the desired user experience. For app-centric services, integrating QR code login via native apps may suffice. However, for those prioritizing maximum security, cross-device capabilities, QR code login via passkeys presents a robust solution.

Regardless of the current evaluation of which solution fits into the existing authentication architecture, it should be kept in mind that passkeys are an investment in the future of authentication, as the ecosystem is clearly moving in this direction. Starting early to collect passkeys can be combined with different CDA strategies.

Share this article


LinkedInTwitterFacebook

Enjoyed this read?

🤝 Join our Passkeys Community

Share passkeys implementation tips and get support to free the world from passwords.

🚀 Subscribe to Substack

Get the latest news, strategies, and insights about passkeys sent straight to your inbox.


We provide UI components, SDKs and guides to help you add passkeys to your app in <1 hour

Start for free