Sign-in

10 screens and overlays, 53 states, 4 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.

Flows

Sign in, Guest sees reason copy (iOS) — A gated action asks the guest to sign in

Sign in, Guest sees reason copy (Android) — A gated action asks the guest to sign in

Continue

Sign in to The Raw (iOS) — Sign-in sheet shows the phone form

Sign in to The Raw (Android) — Sign-in sheet shows the phone form

Enter number, Send code

Step 3

Wireframe

Sending code

Spinner in the button and the field is disabled; up to 3 silent network retries.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Button shows progress while the code is sent

Code sent

Enter the 6-digit code, Idle code slots (iOS) — Six empty slots wait for the code

Enter the 6-digit code, Idle code slots (Android) — Six empty slots wait for the code

Type the code

Step 5

Wireframe

Enter the 6-digit code

Checking code

Slots disabled with spinner; double submit is blocked.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Slots lock while the code is checked

Account stage Ready

Home (iOS) — Sheet closes back on the original screen, signed in

Home (Android) — Sheet closes back on the original screen, signed in

Branches and edge cases

Sign in to The Raw, Phone number validation (iOS) — Phone number invalid

Sign in to The Raw, Phone number validation (Android) — Phone number invalid

Errorfrom step 3

Wireframe

Error

Could not send a code

Generic send failure and invalid-number variants shown under the field.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Send fails

Errorfrom step 3

Wireframe

Offline

No connection

Send failed on a network error; No connection. Check your internet and try again.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Offline while sending

Errorfrom step 3

Wireframe

Error

Too many attempts

Send rate limit hit; Wait a few minutes, then try again.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Too many sends

Enter the 6-digit code, That code didn't work (iOS) — Wrong code

Enter the 6-digit code, That code didn't work (Android) — Wrong code

Errorfrom step 4

Wireframe

Enter the 6-digit code

Error

Too many verification attempts

More than 10 verify calls per hour per phone; Wait a few minutes.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Too many wrong codes

Enter the 6-digit code, Resend countdown (iOS) — Resend countdown running

Enter the 6-digit code, Resend countdown (Android) — Resend countdown running

Enter the 6-digit code, Send a new code available (iOS) — Resend available after countdown

Enter the 6-digit code, Send a new code available (Android) — Resend available after countdown

Errorfrom step 4

Wireframe

Enter the 6-digit code

Error

Resend hits the server cap

3 sends per hour per phone, counting the first send; the second resend can fail.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Resend over 3 per hour

Gatefrom step 5

Account needs details

Errorfrom step 5

Wireframe

Enter the 6-digit code

Error

Account stage unknown after good code

Retry card replaces the form when the profile never arrives.

Not reachable on a device: Needs the account query to stall after a good code

Account stage unknown

Enter the 6-digit code, Closed account signed out silently (iOS) — Closed account

Enter the 6-digit code, Closed account signed out silently (Android) — Closed account

Flow diagram

Tap a provider

Step 2

Wireframe

Social button loading

Spinner on the pressed provider; both social buttons disabled.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Provider button shows a spinner (native sheet over it)

Provider returns

Branches and edge cases

Sign in to The Raw, Apple only on iOS (iOS) — Apple button only on iOS

Sign in to The Raw, Social cancelled (iOS) — User cancels native sheet

Errorfrom step 2

Wireframe

Error

Raw social sign-in error

Provider or Better Auth message shown in red, not normalised (for example Play Services missing).

Not reachable on a device: Needs a network fault, crash, race or code change to show

Provider error

Edgefrom step 2

Wireframe

Edge

Accounts link silently by email

Same email via Google, Apple or phone links to the existing user with no UI.

Needs data: Capture audit 2026-10-30. ios: Prior user decision: phone OTP only; no real provider sign-in. android: Prior user decision: phone OTP only; no real provider sign-in.

Email matches an existing account

Gatefrom step 2

New user: details prefilled

Edgefrom step 2

Wireframe

Edge

Closed account via social, no message

Social sign-in succeeds, app signs out, user sees the form again with no explanation.

Needs data: Capture audit 2026-10-30. ios: Prior user decision: phone OTP only; no real provider sign-in. android: Prior user decision: phone OTP only; no real provider sign-in.

Closed account

Flow diagram

Create account details

Step 1

Details form opens with name and email prefilled

Tap Create account

Step 2

Wireframe

Welcome to The Raw

Submitting

Button spinner; stays disabled after success until the sheet closes.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Button shows progress while the profile saves

Saved

Step 3

Account created confirmation

Sheet closes

Branches and edge cases

Errorfrom step 1

Invalid fields

Edgefrom step 1

Wireframe

Welcome to The Raw

Edge

Apple name optional

Name is not required for Apple accounts.

Needs data: Capture audit 2026-10-30. ios: Prior user decision: phone OTP only; no real provider sign-in. android: Prior user decision: phone OTP only; no real provider sign-in.

Apple name is optional

Stop creating your account?, Next sign-in picks up here (iOS) — Close the sheet

Stop creating your account?, Next sign-in picks up here (Android) — Close the sheet

Errorfrom step 2

Email already used

Errorfrom step 2

Wireframe

Welcome to The Raw

Error

Phone already used

Another account uses this number. Enter a different one.

Needs data: Capture audit 2026-10-30. ios: Prior user decision: phone OTP only; no real provider sign-in. android: Prior user decision: phone OTP only; no real provider sign-in.

Phone already used

Errorfrom step 2

Wireframe

Welcome to The Raw

Error

Sign-in has expired

Authentication required; Close this and sign in again.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Sign-in has expired

Errorfrom step 2

Wireframe

Welcome to The Raw

Error

We couldn't save your details

Any other failure or network throw; check your connection and try again.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Network or other failure

Flow diagram

Tap Terms

Terms of Service (iOS) — Terms of Service PDF renders

Terms of Service (Android) — Terms of Service PDF renders

Branches and edge cases

Privacy Policy (iOS) — Privacy Policy link

Privacy Policy (Android) — Privacy Policy link

Edgefrom step 2

Wireframe

Loading Terms of Service...

Spinner while the PDF renders.

Not reachable on a device: Needs a network fault, crash, race or code change to show

PDF is loading

Errorfrom step 2

Wireframe

Error

Unable to Load Document

PDF failed to render; Retry button.

Not reachable on a device: Needs a network fault, crash, race or code change to show

PDF fails to load

Flow diagram

Screens and states

Modalauth/_layout

Sign-in sheet

Modal container for login, code entry and account details.

src/app/auth/_layout.tsx

Entry

Sign in required action
Account details push
Deep link to login

Exits

Close → back to originating screen
Valid redirect → that screen
Nothing below → Home

States · 1

Edge

Swipe-to-dismiss off on details · Account details page has no back button and no swipe dismiss.src/app/auth/_layout.tsx:36

Sheetauth/login

Sign in to The Raw

Choose Google, Apple (iOS) or phone number; copy changes by sign-in reason.

src/app/auth/login.tsx

Entry

Gated action
SignInRequired button
Deep link /auth/login

Exits

Send code → code entry
Terms → Terms of Service
Privacy Policy → Privacy Policy
Country prefix → country picker
Close → leave sheet
Social success → account stage branch

States · 15

Gate

Default form (guest) · Reason-based title and subtitle; unknown reason falls back to the default copy.src/app/auth/login.tsx:27

Signing you in · Any non-guest stage shows a spinner while the account stage resolves.src/app/auth/login.tsx:27

Error

We couldn't load your account · Signed in but profile never arrived; Try again button.src/features/auth/components/signing-in-state.tsx:23

Edge

Phone number validation · Enter at least 8 digits; Use digits only; send disabled until 8+ digits; leading zeros stripped.src/features/auth/components/forms/phone-login-form-input.tsx:29

Sending code · Spinner in the button and the field is disabled; up to 3 silent network retries.src/integrations/convex/phone-auth-hooks.ts:127

Error

Too many attempts · Send rate limit hit; Wait a few minutes, then try again.src/features/auth/errors/auth-error-messages.ts

Error

Account deleted or suspended · Phone number belongs to a closed account; message points to support.packages/backend/convex/routes/auth.ts:36

Offline

No connection · Send failed on a network error; No connection. Check your internet and try again.src/features/auth/errors/auth-error-messages.ts

Error

Could not send a code · Generic send failure and invalid-number variants shown under the field.src/features/auth/components/forms/phone-login-form-input.tsx:122

Social button loading · Spinner on the pressed provider; both social buttons disabled.src/features/auth/components/forms/redesigned-phone-login-form.tsx:47

Error

Raw social sign-in error · Provider or Better Auth message shown in red, not normalised (for example Play Services missing).src/features/auth/hooks/use-social-auth.ts:83

Edge

Social cancelled · User cancels the Google or Apple sheet; nothing is shown.src/features/auth/hooks/use-social-auth.ts:93

Edge

Apple only on iOS · Continue with Apple is hidden on Android.src/features/auth/components/forms/redesigned-phone-login-form.tsx:98

Edge

Closed account via social, no message · Social sign-in succeeds, app signs out, user sees the form again with no explanation.packages/backend/convex/routes/auth.ts:129

Edge

Accounts link silently by email · Same email via Google, Apple or phone links to the existing user with no UI.packages/backend/convex/auth.ts:429

Captured states

Select Country

Pick the phone prefix: Malaysia, Singapore, Indonesia or Brunei.

src/features/auth/components/forms/phone-login-country-picker.tsx

Entry

Tap flag or prefix on login

Exits

Select country → close and set prefix
Dismiss → close

States · 2

Edge

Always populated · Four fixed options, default Malaysia +60; no loading or empty state.src/shared/constants/countries.ts:15

Edge

Disabled while sending · Prefix button is disabled while a code is being sent.src/features/auth/components/forms/phone-login-form-input.tsx:100

Enter the 6-digit code

Enter the SMS code; the sixth digit submits automatically.

src/app/auth/verify.tsx

Entry

Send code on login

Exits

Good code, returning user → originating screen
Good code, new user → account details
Change Number → login
Help icon → support menu

States · 11

Edge

Idle code slots · Six empty slots, number pad, SMS autofill.src/features/auth/components/forms/otp-verification/otp-input-section.tsx:39

Checking code · Slots disabled with spinner; double submit is blocked.src/features/auth/components/forms/otp-verification/index.tsx:104

Error

That code didn't work · Wrong, expired or used-up code look identical; boxes clear. Code lives 15 min, 3 wrong guesses kill it.packages/backend/convex/auth.ts:579

Error

Too many verification attempts · More than 10 verify calls per hour per phone; Wait a few minutes.packages/backend/convex/routes/auth.ts:66

Offline

No connection · Network error on verify; can also catch verify errors containing fetch or connection.src/features/auth/errors/auth-error-messages.ts:36

Edge

Resend countdown · Send a new code in 30s, growing by 30 s each resend; resets when the screen remounts.src/features/auth/components/forms/otp-verification/resend-code-section.tsx:51

Success

Send a new code available · Countdown ended; button shows a spinner while sending.src/features/auth/components/forms/otp-verification/resend-code-section.tsx:62

Error

Resend hits the server cap · 3 sends per hour per phone, counting the first send; the second resend can fail.packages/backend/convex/routes/auth.ts:23

Edge

Missing phone redirects to login · Opened without a phone param; replaced by login.src/app/auth/verify.tsx:24

Error

Account stage unknown after good code · Retry card replaces the form when the profile never arrives.src/app/auth/verify.tsx:37

Edge

Closed account signed out silently · A deleted or suspended account is blocked at send time. If the account closes after sending a code, verification signs it out underneath; dev capture observed the sheet remaining on Checking code.packages/backend/convex/routes/auth.ts:36

Captured states

Contact Support

InlineSupportHelpButton

Contact Support

Header help menu on the code screen with WhatsApp and email support.

src/features/auth/components/support-help-button.tsx

Entry

Help icon on code screen

Exits

WhatsApp Support → WhatsApp chat
Email Support → mail composer

States · 2

Error

WhatsApp is not installed · Danger toast for 4 s when WhatsApp cannot open.src/features/auth/components/support-help-button.tsx:25

Edge

Email open failure unhandled · No catch if the mail app cannot open; nothing is shown.src/features/auth/components/support-help-button.tsx:36

Welcome to The Raw

Sheetauth/profile-completion

Welcome to The Raw

Collect name, email, phone and optional details to create the account.

src/app/auth/profile-completion.tsx

Entry

New user after sign-in
Unfinished sign-up on restart
Edit Profile without a profile

Exits

Create account → originating screen
Close → stop creating dialog

States · 13

Gate

Guest blank view · User signed out while here; blank view while the sheet closes.src/app/auth/profile-completion.tsx:47

Signing you in · Any stage other than needs-details shows the signing-in state.src/app/auth/profile-completion.tsx:50

Edge

Prefilled from provider · Name from profile or provider unless it looks like a phone number; synthetic emails blanked.src/app/auth/profile-completion.tsx:109

Edge

Apple name optional · Name is not required for Apple accounts.src/features/profile-completion/services/profile-completion-service.ts

Edge

Phone field only if unverified · Phone number is shown when the account has no verified number, such as Google or Apple.src/features/profile-completion/components/account-details-form.tsx

Error

Field validation · Enter your first name, Enter an email like name@example.com, phone format, birthday must be 13+.src/features/profile-completion/validation/profile-validation.ts

Submitting · Button spinner; stays disabled after success until the sheet closes.src/features/profile-completion/components/account-details-form.tsx:58

Error

Email already used · Another account uses this email. Enter a different one.src/features/profile-completion/hooks/use-submit-account-details.ts:22

Error

Phone already used · Another account uses this number. Enter a different one.src/features/profile-completion/hooks/use-submit-account-details.ts:22

Error

Sign-in has expired · Authentication required; Close this and sign in again.src/features/profile-completion/hooks/use-submit-account-details.ts:22

Error

We couldn't save your details · Any other failure or network throw; check your connection and try again.src/features/profile-completion/hooks/use-submit-account-details.ts:22

Success

Account created · Profile saved, sheet closes; onboarding is marked offered. Home may still offer notification permission if this device has not answered the pre-prompt.src/features/auth/hooks/use-post-auth-redirect.ts:5

Edge

Returning user skips this screen · A complete profile never sees it; a social user missing a phone sees it again.src/features/profile-completion/services/profile-completion-service.ts

Captured states

Prefilled from provider

Field validation

Email already used

Account created

Stop creating your account?

Wireframe

Stop creating your account?

Not captured yet

DialogBrowseAsGuestDialog

Stop creating your account?

Confirm leaving account setup and browsing as a guest.

src/app/auth/profile-completion.tsx

Entry

Close on account details

Exits

Browse as guest → sign out, sheet closes
Keep going → stay on form

States · 2

Edge

Next sign-in picks up here · Body: You can keep browsing as a guest. Next time you sign in, you'll pick up here.src/app/auth/profile-completion.tsx:64

Error

Sign-out failure is invisible · Dialog closes and the user stays signed in with no message.src/app/auth/profile-completion.tsx:78

Captured states

Signing you in

Wireframe

Signing you in

Not reachable on a device: Transient state lasting under a second after sign-in

InlineSigningInState

Signing you in

Interstitial between a good credential check and the account stage answering.

src/features/auth/components/signing-in-state.tsx

Entry

Login
Code entry
Account details

Exits

Try again → re-check account

States · 2

Signing you in · Spinner while the account stage resolves.src/features/auth/components/signing-in-state.tsx:23

Error

We couldn't load your account · Stage unknown. You're signed in. Check your connection, then try again.src/features/auth/components/signing-in-state.tsx:23

Authentication Error

Wireframe

Authentication Error

Not reachable on a device: Needs a render error in the auth sheets

InlineAuthErrorBoundary

Authentication Error

Fallback for render errors inside sign-in and notification permission screens.

src/features/auth/components/auth-error-boundary.tsx

Entry

Render error in login, code, details or notification permission

Exits

Try Again → reset
Go Back → Home

States · 2

Error

Something went wrong during authentication · Dev builds also show the error message.src/features/auth/components/auth-error-boundary.tsx

Edge

Go Back may leave sheet stacked · Back to Home from inside the sheet may leave the sheet under Home; unverified.src/features/auth/components/auth-error-boundary.tsx:82

GateSignInRequired

Sign in

Guest placeholder that opens the sign-in sheet with a reason-based message.

src/shared/components/ui/sign-in-required.tsx

Entry

Guest opens beauty quiz or beauty profile

Exits

Sign in → sign-in sheet
Signed in → original action runs

States · 3

Gate

Guest sees reason copy · Title and subtitle come from the sign-in reason, with a Sign in button.src/shared/hooks/use-require-sign-in.ts:36

Edge

Signed-in user skips the sheet · Callback runs immediately when already signed in.src/shared/hooks/use-require-sign-in.ts:32

Edge

Closing as guest clears the request · Dismissing the sheet drops the pending action; switching accounts also drops it.src/features/auth/hooks/use-resume-sign-in-request.ts:29

Captured states

Sign-in

FlowsCopy Anchor Link

Sign in with phoneCopy Anchor Link

Sign in with Google or AppleCopy Anchor Link

Create account detailsCopy Anchor Link

Legal pages from sign-inCopy Anchor Link

Screens and statesCopy Anchor Link

Sign-in sheetCopy Anchor Link

Sign-in sheet

Sign in to The RawCopy Anchor Link

Sign in to The Raw

Select CountryCopy Anchor Link

Select Country

Enter the 6-digit codeCopy Anchor Link

Enter the 6-digit code

Contact SupportCopy Anchor Link

Contact Support

Welcome to The RawCopy Anchor Link

Welcome to The Raw

Stop creating your account?Copy Anchor Link

Stop creating your account?

Signing you inCopy Anchor Link

Signing you in

Authentication ErrorCopy Anchor Link

Authentication Error

Sign inCopy Anchor Link

Sign in

On this page

Flows

Sign in with phone

Sign in with Google or Apple

Create account details

Legal pages from sign-in

Screens and states

Sign-in sheet

Sign in to The Raw

Select Country

Enter the 6-digit code

Contact Support

Welcome to The Raw

Stop creating your account?

Signing you in

Authentication Error

Sign in