# Add QR Code Login for Mobile App Authentication

| | |
|--|--|
| **ID** | `bug_001` |
| **Priority rank** | 4 |
| **Severity** | medium |
| **Category** | feature_request |
| **Time range** | 1.5s – 38.5s |
| **Key moment** | 4.5s |
| **Affected element** | Login form |

> ⚠️ **About the red box in `screenshot.png`:** It is an AI-generated guess at the affected
> UI element. **It is correct most of the time but not always** — sometimes the actual
> element is near the box rather than exactly inside it, and occasionally the box lands
> on an unrelated element.
>
> When acting on this bug:
> 1. Read the **narration quote** and **detailed visual walkthrough** below first — they
>    describe what is actually wrong.
> 2. Look at the **full screenshot**, not just inside the red box.
> 3. If you need precise pixel coordinates, consult `omniparser_elements.json` in this
>    folder — it lists every UI element the detector found on this screen, with bounding
>    boxes and confidence. You can search by label or look at elements adjacent to the
>    red box.

## Description

On the login screen, there is no way to quickly log in without typing credentials. The user wants a QR code to be displayed on the web login page. Scanning this QR code with their mobile phone should open the Athena mobile app, authenticate the session, and then automatically log the user in on the web interface, similar to how services like TikTok or Discord handle web logins.

## What the narrator said

> "I want a QR code right here below the login that I so I can pull this website up on like a Tesla and scan it with a QR code and that QR code links to a URL that will then open up the mobile app on my phone and it'll authenticate the user..."

## Detailed visual walkthrough

The video opens on the login screen for a web application titled "Athena v2". The page has a dark background with a centered login form. The form contains three input fields labeled "john.doe", "Admin password", and "2FA Code", with the placeholder text "Required if enabled" under the third field. Below the fields is a blue "Sign in" button. The screen is static, and there is no cursor movement or interaction with the UI elements throughout the clip.

The narrator begins speaking, requesting a new feature. "Alright, first of all, I want a QR code right here below the login," he says, indicating the area under the "Sign in" button. He explains the desired functionality: a user could navigate to this login page on a device like a Tesla's web browser, then scan the QR code with their phone.

He continues, "that QR code links to a URL that will then open up the mobile app on my phone and it'll authenticate the user that I'm currently logged in on my phone." This mobile authentication would then signal the server, which in turn would automatically log the user into the web session, bypassing the need to manually enter a username and password. He compares this desired behavior to the QR code login feature found on platforms like TikTok. The video ends with the login screen unchanged.

## Suggested fix

Implement a QR code-based login flow. The web client should poll a backend endpoint for authentication status after displaying a unique QR code. The mobile app, upon scanning the code, sends an authentication confirmation to the backend, which then resolves the poll on the web client, completing the login.

## Bounding boxes drawn on `screenshot.png`

- **Login form** at `[ymin=226, xmin=406, ymax=464, xmax=593]` (normalized 0-1000)

## Files in this folder

- `clip.mp4` — Video clip (1.5s – 38.5s, plus 2s padding on each side)
- `screenshot.png` — Key frame at 4.5s with red bounding box (see note above on accuracy)
- `screenshot_raw.png` — Same frame, no annotations
- `clip_description.md` — The detailed walkthrough above as a standalone file
- `bug.json` — Structured data
- `omniparser_elements.json` — every UI element detected on this screen by the OmniParser YOLOv8 model, with pixel-space bounding boxes and confidence scores. Useful if the red box in `screenshot.png` is on the wrong element — you can pick a different one from this list.
- `motion/` — Additional keyframes showing motion/state-change (if any):
  _(none — this is a static issue)_
