The Auth Login Surface

Three layered atoms compose one screen.

Eight new files plus a route-redirect tweak. All under mobile/.

Three layers, one Skia canvas, one GPU pass per frame.

Blob choreography

Each blob has its own drift period, breath period, and phase offset. All four numbers are coprime so the composition never repeats identically.

A single master clock loops 0 → 1 over 120 seconds. Each blob derives its drift angle and breath phase from that clock modulo its own period. The Y delta on every orbit uses width (not height) as the radius scalar — gives a circular orbit in screen-px instead of an aspect-stretched ellipse, which reads as subtle drift rather than obvious vertical motion on a tall viewport.

One atom, four providers, brand-colored icons.

Frost-fill pill, 56pt tall, full pill-radius. The icon sits in an absolutely positioned View at left: 24 so the label can dead-center across the full pill width — matching the AllTrails / Auth0 SDK convention rather than a flow-laid icon+label row.

Accessibility & interaction

• accessibilityRole="button" + accessibilityLabel matches the visible label.
• accessibilityState={ disabled } exposed to the a11y tree.
• android_ripple={ color: colors.line, borderless: false } for Android press feedback (iOS uses the native Pressable dim).
• A static style array (not the function form) so the alignSelf: stretch width resolves correctly inside flex parents.

The three atoms composed into one route at app/(auth)/login.tsx.

Fine-print copy (verbatim)

“By continuing to use Ambasdr, you agree to our Terms of Service and Privacy Policy. Personal data added to Ambasdr is public by default — refer to our Privacy FAQ to make changes.”

The wording is ported verbatim from the AllTrails reference screenshot Lennox shared, with every “AllTrails” replaced by “Ambasdr”. The three links use testIDs legal-link-terms, legal-link-privacy, and legal-link-privacy-faq.

All interactive handlers on this screen are UI-only logs. Real auth wiring is Gerald’s lane.

OAuth handlers

// On press of any OAuth button:
console.log(`[oauth-stub] provider=${provider}`);
router.replace("/(onboarding)/username");

The route forward to /(onboarding)/username is temporary — it’s the current name-collection step. When the onboarding v2 single-field name step lands, the redirect target moves with it.

Legal-link handlers

// On press of any legal link span:
console.log(`[legal-stub] route=/legal/${route}`);
// no navigation — pure log until pages are ported

What Gerald owns next

• Auth0 SDK install + tenant configuration for the four providers (LinkedIn is not in Auth0’s default social list and may need a custom connection).
• Redirect URI registration for the Expo dev URL + production scheme.
• Token exchange, session storage, and the “already onboarded” check that decides between (home) and (onboarding) after sign-in.
• The /legal/terms, /legal/privacy, and /legal/privacy-faq routes (existing web legal pages have a mobile-ready content source).

39 unit tests across three files. Full suite stays green at 199 tests.

How this work landed on staging-mobile.

• PR #18 — original PR. Merged prematurely without /ambasdr-review running first. Reverted on staging-mobile via commit 5f4937d.
• PR #20 — cherry-picked the six commits from the reverted branch onto the new staging-mobile tip. Survived a two-pass /ambasdr-review (the second pass cleared H1 + H2 blockers and lifted Design / Documentation / Test Coverage to A). Merged via a5649fb.

Net change at merge: 14 files, +899 / −160 lines, including the deletion of app/(onboarding)/welcome.tsx + its test and story (the onboarding v2 design drops the welcome interstitial).

First screen in the onboarding v2 redesign sequence. Stacked PRs from here flesh out the form steps.

Once the full flow lands on staging-mobile, it ships to main as a single squashed PR — one logical “Onboarding v2 redesign” unit on the production history.