How I Linked a Smart Mirror to Any User Account with a Simple QR Code

---
title: "How I Linked a Smart Mirror to Any User Account with a Simple QR Code"
excerpt: "Covers the first-time linking flow, Firebase Auth, and QR-based device registration."
date: "2024-11-05"
slug: "qr-code-user-linking"
coverImage: "/assets/blog/qr-code-user-linking/cover.jpg"
ogImage:
  url: "/assets/blog/qr-code-user-linking/cover.jpg"
author:
  name: "Matthew"
  picture: "/assets/blog/authors/matthew.png"
---

When I started building my Magic Mirror web app, I knew I wanted it to feel personal. That meant not just showing general data — but showing your calendar, your Spotify, your email. To make that happen, I needed a secure way to link any physical mirror to a specific user account — with no keyboard, no login screen, and no friction.

Here’s how I did it — with a little help from Firebase Auth and some QR code magic ✨

🔐 The Problem: How to Securely Link a Mirror to a User?

Most smart devices require painful setup: typing into tiny screens, managing Wi-Fi passwords, etc. I wanted something smoother — something like:

1. On startup, the mirror shows a QR code.
2. You scan it with your phone → redirected to my web app.
3. You log in (or sign up) with Google.
4. That mirror is now permanently linked to your account.

⚙️ The Flow in a Nutshell

1. Mirror boots up and generates a unique mirrorId (or loads a saved one).
2. It requests a one-time claim token from the backend.
3. The mirror shows a QR code linking to something like:
   https://magicmirror.app/claim?token=abc123
4. On your phone, you scan the QR → go to the site.
5. You log in with Firebase Auth.
6. The backend links that mirrorId to your user ID in the database.
7. The mirror polls for confirmation and updates its config.

Boom — you're in. 🔗

🔐 Firebase Authentication

I chose Firebase for a few reasons:

• Super easy Google OAuth setup
• Secure and battle-tested
• No need to build my own auth system

Once the user logs in via Firebase, I grab their uid and call my backend API:

await fetch("/api/claim-mirror", {
  method: "POST",
  body: JSON.stringify({ token, uid }),
});