Skip to content

Connect Create Account flow to backend (nonce, verify, profile) and navigate to Pay Screen #30

@D240021

Description

@D240021

🔖 Title
Connect Create Account flow to backend (nonce, verify, profile) and navigate to Pay Screen


📄 Description
Wire CreateAccountScreen and useCreateAccount to the TrustUp API so registration/login uses the real wallet auth flow, persists tokens, loads or updates the user profile, and then sends the user to PayScreen. Replace the current mock account creation (setTimeout + Alert) with API calls aligned with the backend DTOs.

Pull request (definition of done): The implementer must open the PR with the repository PR template fully completed, stating which parts of this issue were completed (nonce/verify, token storage, users/me, wallet signing, navigation to Pay), checklist per what was done, screenshots or test notes as required, and a link to this issue. Do not leave required sections empty.

API flow (frontend)

  1. Nonce (public)
    POST /api/v1/auth/nonce
    Body (example): { "wallet": "<Stellar address>" }
    Response: nonce and expiresAt (validate expiry on the client if applicable).

  2. Sign and authenticate (register + login)
    On the client: sign the nonce with the wallet as required by the app / VerifyRequestDto.
    POST /api/v1/auth/verify
    Body: wallet, nonce, signature (and any other fields required by the DTO).
    Response: accessToken and refreshToken. Persist accessToken (and refreshToken if the client implements refresh).

  3. Authenticated requests
    Header: Authorization: Bearer <accessToken>.

UX post-condition: After the profile is created/updated and authentication succeeds, navigate to components/pages/PayScreen.tsx (equivalent route in the navigator, e.g. 'Pay Screen' if using types/Navigation.ts).

Scope / regression: Keep existing form validation and NativeWind styling unless explicitly changed. Handle network errors and 4xx/5xx responses with clear user-facing messages. Do not log tokens in production.

Current structure

  • hooks/auth/use-create-account.ts: createAccount only mocks success (console.log, setTimeout, Alert); no API calls.
  • components/pages/CreateAccountScreen.tsx: uses useCreateAccount; navigation typed as any; only goBack().
  • App.tsx: renders CreateAccountScreen inside MainLayout without a visible NavigationContainer/stack in the current file; no post-login flow to Pay.
  • types/Navigation.ts: defines 'Pay Screen', 'Invest Screen', 'Create Account' but wiring may not be implemented in App.tsx.
  • Base URL: documented in docs/contributing.md as EXPO_PUBLIC_API_URL (e.g. http://localhost:4000/api/v1).

Target structure

  • Central HTTP client or api/auth, api/users modules (per Contributing Guide) using EXPO_PUBLIC_API_URL.
  • Secure token storage (e.g. expo-secure-store or project pattern) and a helper to attach Authorization.
  • Stellar/nonce signing implementation per SDK or wallet used in the app; types aligned with backend VerifyRequestDto.
  • After successful verify + profile (GET/PATCH as needed): navigate to Pay (PayScreen).
  • Replace any on navigation props with stack types when available.

✅ Tasks to complete

  • Read docs/contributing.md and align file names, TypeScript, and NativeWind.
  • Review real DTOs in TrustUp API (VerifyRequestDto, nonce/verify responses, users/me) and document any corrected assumptions in the PR.
  • Implement POST .../auth/nonce and POST .../auth/verify with error handling and loading (isSubmitting).
  • Persist accessToken (and refreshToken if applicable) and send authenticated requests with Authorization: Bearer ....
  • Call GET /api/v1/users/me and/or PATCH /api/v1/users/me to sync form data with the profile per API contract.
  • Wire navigation so that after a successful flow the app shows PayScreen (introduce minimal stack/tab pattern if missing).
  • Remove or reduce the mock (setTimeout/Alert fake success) in favor of the real flow; adjust success/error UI as needed.
  • Lint and tests green; type navigation without any where possible.
  • Open PR with the full repo template: specify what was completed for this issue, checklist/screenshots per template, link to this issue.
  • Manual regression: full flow against staging/local API; confirm navigation to Pay; confirm token on follow-up requests if any screen uses it.

📚 Documentation/context for AI

  • docs/contributing.md — API URL, .env, NativeWind.
  • hooks/auth/use-create-account.ts — current form logic and mock.
  • components/pages/CreateAccountScreen.tsx, components/pages/PayScreen.tsx.
  • App.tsx, types/Navigation.ts.
  • TrustUp API backend: /api/v1/auth/nonce, /api/v1/auth/verify, /api/v1/users/me.

🗒️ Additional notes

  • Nonce signing depends on the Stellar stack and chosen wallet (Freighter, etc.); if split into sub-issues, link them; in a single PR, document new dependencies.
  • Any global navigation change should be the minimum needed for “Create Account → Pay” and be described in the PR.

🎨 Design Reference
N/A (functional flow; keep existing UI except error/loading messaging).

Metadata

Metadata

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions