vineroute// field manual
Rider
Driver
Dispatch
Systems
The Rider/Sign in
01 / 08

Sign in

One door, two roles

AuthOTPOnboarding

Overview

A near-empty screen that does a lot of work. The wordmark sits at the top in Instrument Serif, with a small uppercase eyebrow that anchors the brand voice. The hero copy is a line about morning shuttles, followed by five small route-color dots that hint at the catalog without naming it. The CTA is a black PrimaryButton that pushes /sign-in/email. Below it, a secondary outline button labelled DEMO · JUMP TO ADMIN that deep-links to the dispatch web console for stakeholders demoing the product on a laptop. The screen is wrapped in SafeAreaView.

How it works

1

On mount the screen is static — there is no API call yet. Vineroute defers the network until the user commits to email entry, so the first paint is instant on cold start.

2

The CONTINUE WITH EMAIL button calls `router.push('/sign-in/email')` via expo-router. The demo button calls `Linking.openURL('http://localhost:3000')` in development and the deployed admin URL in production.

3

Five accent dots line up below the hero — the literal hex colors are `#8AAA72`, `#A7A36B`, `#7E3A3A`, `#607B8B`, `#C99731`, the five preset route colors from the admin catalog. They are decorative, not interactive, but they preview the visual language of the route table.

4

The bottom legal line is rendered in DM Sans at 12px with a 0.18em letter-spacing, matching the rest of the app's caption style.

Key decisions

Same screen for rider and driver

We seriously considered shipping a separate driver app from day one. But the auth surface is identical, the design DNA is identical, and the user only knows what role they have after sign-in. Keeping one entry point means one bundle, one TestFlight, one set of secrets. Role is resolved server-side and the app routes to the right tab shell.

Demo button is a feature, not a debug flag

Stakeholders watching a demo on a laptop want the admin console, not the phone. Burying it in dev menus makes that demo brittle. So DEMO · JUMP TO ADMIN is a real button on a real screen — it just happens to deep-link to the web app. The cost is one extra row of pixels; the win is a working demo on a stranger's machine.

No password field anywhere visible

Passwords aren't a feature riders want to remember. OTP is the only mechanism on mobile. Admins have a password fallback for the web console because they sign in 20 times a day on the same laptop, but the rider flow has nothing to forget.

Sign in

Quick Reference

Routeapps/mobile/app/(auth)/sign-in.tsx
StoreLocal component state
APIsNone — pre-auth
Components
PrimaryButtonSafeAreaViewLinking (expo)
NextOTP entry