Skip to content

feat(auth): add email verification UI flow #3674

@PierreBrisorgueil

Description

@PierreBrisorgueil

Context

The Node stack is adding email verification on signup (see pierreb-devkit/Node#3216). The Vue stack needs the corresponding UI.

Backend reference

See pierreb-devkit/Node#3216 for the full backend spec:

  • Signup creates account with emailVerified: false
  • Verification email sent with JWT link
  • GET /api/auth/verify/:token — verifies email
  • POST /api/auth/verify/resend — resends verification email (rate-limited)
  • OAuth users are auto-verified

Vue changes needed

1. Post-signup screen

After successful signup, redirect to a "Check your email" view instead of going straight to the app:

  • Message: "We sent a verification link to {email}"
  • "Resend email" button (calls POST /api/auth/verify/resend, rate-limited with cooldown timer)
  • "Change email" link → back to signup

2. Verification landing page

New route: /auth/verify/:token

  • On mount: calls GET /api/auth/verify/:token
  • Success → "Email verified!" + auto-redirect to app (or login)
  • Expired/invalid token → error message + "Resend verification email" button

3. Unverified user banner (optional)

If config.sign.requireEmailVerification is true and user is logged in but not verified:

  • Show a persistent banner: "Please verify your email — Check your inbox or [resend]"
  • Optionally restrict navigation to certain routes

4. Auth store updates

  • Store emailVerified flag from user object
  • Add actions: resendVerification(), verifyEmail(token)
  • Update signup flow to handle the new intermediate state

Routes

{ path: '/auth/verify/:token', component: VerifyEmailView }
{ path: '/auth/verify/pending', component: VerifyEmailPendingView }

Config

The backend exposes /api/auth/config — should include requireEmailVerification flag so the frontend knows whether to enforce the flow or not.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important — depends on P1phase:2-orgsPhase 2: Multi-tenancy & Organizations

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions