Add username selection step to email signup flow - #2505
Merged
MusabShakeel576 merged 1 commit intoSep 10, 2026
Conversation
The handle other people see was assigned from the email prefix, never chosen. Onboarding now asks for it, between OTP verification and the push-notification prompt. The field seeds from the email prefix — the name the account would have been given automatically — so the common case is one tap, and it seeds from an already-chosen handle when the flow is resumed. Input is sanitised per keystroke to what a handle may contain, availability is checked once typing settles, and again on Continue because the debounced answer may be stale or may never have run on a slow connection. A check that cannot reach the server does not block the step: account creation validates the name again and is the real gate. Paths that must not change, and do not: - The shared review account already exists and keeps its own handle, so it skips this step exactly as it skips the passkey one. - Login, recovery and passkey creation are untouched; only the passkey screen's back marker moves to the new previous step. - The chosen handle is omitted from the signup request when absent, so the server still derives one — which is also what happens if this build reaches a backend without the step. A handle claimed between the check and account creation now returns the user to this step rather than to the passkey they already created, so `emailSignUp` surfaces the server's reason instead of throwing the raw response — which also means real failures reach the user in place of the generic "Failed to create account". `Input` gains an optional `prefix` for the "@" inside the field. With no prefix the rendered classes are unchanged, so every existing field is untouched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XyNemE6Ss9mG2t2UXYVnNV
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. Additional checks performed:
All clear. |
MusabShakeel576
deleted the
claude/account-creation-onboarding-xvw63f
branch
September 10, 2026 12:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduces a new username selection step in the email-first signup flow, allowing users to choose their own username instead of having one automatically derived from their email address.
Key Changes
New Username Step Component (
app/signup/username.tsx): Implements a full-featured username selection screen with:Username Utilities (
lib/utils/username.ts+ tests): Provides validation and formatting functions:normalizeUsername(): Lowercases and trims for consistent storagesanitizeUsernameInput(): Real-time keystroke cleanup (lowercasing, character filtering, length limiting)getUsernameFormatError(): Format validation (length, allowed characters)isUsernameTakenError(): Distinguishes username conflicts from other signup failuressuggestUsernameFromEmail(): Derives initial suggestion from verified emailAPI Integration (
lib/api.ts):checkUsernameAvailability()endpoint to validate username availabilityemailSignUp()to accept optional username parameterState Management (
store/useSignupFlowStore.ts):usernamefield to signup flow statesetUsername()actionemail→otp→username→passkey→creating→completeUI Component Enhancement (
components/ui/input.tsx):prefixprop to support fixed content (e.g., "@" symbol) inside input fieldsFlow Updates:
app/signup/otp.tsxto route to username step instead of passkeyapp/signup/passkey.tsxback button to return to username stepapp/signup/creating.tsxto handle missing username and route back if neededTracking & Navigation:
USERNAME_STEP_VIEWED,USERNAME_SUBMITTED,USERNAME_UNAVAILABLESIGNUP_USERNAMEpath constantNotable Implementation Details
https://claude.ai/code/session_01XyNemE6Ss9mG2t2UXYVnNV