How to Add a Contactless Check-in System to Your App (Copy-Paste Prompts Included)

No. The attendee receives a QR code by email and simply shows it at the venue. The staff-facing scanner runs in the browser on any phone over HTTPS — no app download required on either side. For a fully self-service kiosk, the attendee scans their own code at a tablet running the check-in page in browser kiosk mode. FlutterFlow builds a native iOS/Android kiosk app if you need a more locked-down experience for high-volume events.

The server-side idempotency check handles this. The second person who scans the same QR code receives the 'Already Checked In at [time]' response — the system does not check them in. For high-security events where you need to catch this in real time, add a photo of the registrant to the success response so staff can visually verify the person matches. The check_in_token is single-use by design: once checked_in = true, no further UPDATE runs on that row.

With the schema as designed, each registration is per-event. For multi-session check-in, extend the schema: add a sessions table (id, event_id, name, start_time), a session_registrations table linking registrations to sessions, and a session_check_ins table recording the per-session scan. Each session gets its own QR code or the same attendee QR code is checked against a session-specific validation endpoint. This extension adds about 4–6 hours to the build.

Build a manual override in the admin dashboard: a search field that looks up attendees by name or email, and a 'Check In Manually' button that calls the same validation Edge Function with the check_in_token retrieved from the DB. This gives staff a backup that does not bypass the idempotency check — manually checking in an already-checked-in attendee still returns the 'Already Checked In' response.

A Supabase Edge Function triggered by the registrations INSERT sends an email via Resend with the QR code as an inline base64 PNG generated server-side using the qrcode npm package (available in Deno). The email template (built with React Email) includes the event name, date, venue, and clear instructions to show the QR at the door. Set up the Edge Function as a Database Webhook trigger on the registrations table for the INSERT event so it fires automatically on every new registration.

Staff use any phone running the /admin/scan page in their browser — html5-qrcode activates the device camera and decodes QR codes in real time without additional hardware. For high-volume events (hundreds of check-ins in minutes), a handheld Bluetooth HID barcode scanner reads faster and more reliably than a phone camera in bright sunlight. Bluetooth HID scanners work with the web app out of the box — they send keystrokes to the active input field, and the check-in page can listen for that input pattern.

The CSV export button in the admin dashboard calls a Supabase Edge Function that reads all registrations for the event using the service_role key (to bypass RLS), formats them as CSV with columns for name, email, checked_in status, and check-in timestamp, and returns the response with Content-Type: text/csv and Content-Disposition: attachment headers. The browser triggers a file download automatically. The same function can be extended to return XLSX format using a Deno-compatible spreadsheet library if your event clients need Excel format.

Yes. The check-in page at /check-in/[token] is designed to be the kiosk screen. Point a tablet at the check-in page in browser kiosk mode (Full Screen + Home button disabled). Attendees scan their own QR code using the admin scanner page, or the kiosk displays an html5-qrcode reader fullscreen. After 3 seconds on the success or error screen, the page auto-resets. For a fully locked-down kiosk, use a dedicated Android tablet with a kiosk browser app (Fully Kiosk Browser) that prevents attendees from leaving the check-in page.