Designing an auth flow that feels native to your app

TL;DR

• Auth is your brand's first surface, and it's usually the least designed part of the app
• Lock down four shared components: form field, CTA, inline error, legal footer
• Three micro-interactions (success scale, error shake, checkmark morph) do most of the "feels premium" work
• Design every password-reset screen so nobody is left stranded
• Build dark mode into auth from day one, or pay for it later

Most mobile app auth flows look like an afterthought. Probably because they were an afterthought. An engineer wired it up in a day, the designer never got a review round, and by the time UX gets involved the login screen is a fossil. Nobody wants to redo it because "it works."

But auth is where every user starts. It's your brand's first surface. Investing a design cycle here has an outsized effect on the app's perceived quality.

Here's the design system I'd insist on for any Expo + Supabase mobile app I was leading.

Auth screens as brand ambassadors

Every auth screen (login, signup, magic-link sent, password reset, error, success) must feel like the same app. That's obvious to say and rarely true in practice. On any given RN codebase I've reviewed, the login screen uses one form-input pattern and the signup screen uses another, because they were built by different people three months apart.

Baseline design contract:

• One AuthFormField component. All auth screens use it. It has label, input, error, and helper text slots.
• One AuthCTA button. Full-width, one primary color, one loading state.
• One AuthToast error component. Appears inline under the failing field, not as a top banner.
• One legal footer with terms + privacy links. Every screen renders it in the same position.

If your Figma library has an "Auth" section, it should contain exactly these four components. If it has more, you have redundancy waiting to drift.

If you'd rather not build the contract from scratch, Applighter's Expo + Supabase template ships auth screens with these standards baked in: one shared form field, one CTA, motion and haptics on success, and full dark-mode support.

Motion + haptics

Three micro-interactions that raise perceived quality:

1. On successful login: brief scale-up on the button (transform: scale(1.05) back to 1) with a light haptic (Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)).
2. On error: shake the failing input horizontally (200ms, 3 cycles) with a warning haptic.
3. On magic-link sent: a checkmark-morph animation on the CTA button, then transition to the "Check your email" screen with a subtle slide-up.

All three take 5-10 lines of code with Reanimated. All three feel like the app was designed by someone who cares.

Empty-state design for password reset

The password-reset flow has three screens users can land on stranded:

1. "Enter your email" screen, after tapping "Forgot password."
2. "Check your email" screen, after submitting.
3. "Password updated" screen, after tapping the emailed link and setting a new password.

All three should tell the user exactly what happens next and offer a graceful exit. "Didn't get the email? Check spam or resend." "Password updated. Sign in now." Never leave a user staring at a spinner or a success message with no next step.

Dark mode from day one

Retrofitting dark mode on an auth flow is far harder than building it dark-mode-native. Every color decision, every SVG, every image asset needs a light-mode + dark-mode variant. Do it upfront: use design tokens (colors.background.primary not #fff), test in Xcode's dark-mode toggle, and ship both.

If your v1 launches without dark mode on auth, the day you add it will be the day you find 30 hardcoded #333 values in your auth stylesheet.

Treat auth as a full design cycle

If you're rolling your own, treat the auth flow as a full design cycle, not a checkbox. Users decide "is this legit" within the first few seconds of opening your app. Earn it.

What does your auth flow look like right now: designed, or wired up in a day? Drop a comment with the worst auth screen sin you've shipped (mine involved a top-banner error toast).