Skip to content

feat(settings): add passwordless otp ui#20104

Draft
StaberindeZA wants to merge 1 commit intomainfrom
fxa-13017-frontend-otp
Draft

feat(settings): add passwordless otp ui#20104
StaberindeZA wants to merge 1 commit intomainfrom
fxa-13017-frontend-otp

Conversation

@StaberindeZA
Copy link
Contributor

Because

  • The passwordless otp signup/signin needs its own pages that vary slightly from existing signin flows.

This pull request

  • Adds signin and signup pages, containers and components

Issue that this pull request solves

Closes: #FXA-13017

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Any other information that is important to this pull request.

@StaberindeZA StaberindeZA force-pushed the fxa-13017-frontend-otp branch from ac00840 to 11bd7a8 Compare February 25, 2026 15:05
Because:

- The passwordless otp signup/signin needs its own pages that vary
  slightly from existing signin flows.

This commit:

- Adds signin and signup pages, containers and components

Closes #FXA-13017
@StaberindeZA StaberindeZA force-pushed the fxa-13017-frontend-otp branch from 11bd7a8 to 9f206b5 Compare February 26, 2026 18:01
Comment on lines +40 to +42
getClientId(): string | undefined {
return this.opts?.clientId || undefined;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason for this change is so that a clientId can be sent to the passwordless routes in auth-server, which check if passwordless OTP is enabled for specific clientIds.

return;
}

if (isSignup) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed different behavior depending on whether its sign up or sign in, so I mostly copied the logic from Signin/index.tsx and Signup/index.tsx

default: /^$/,
env: 'PASSWORDLESS_FORCED_EMAIL_REGEX',
},
allowedClientIds: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ross mentioned that they wanted to roll this out to settings first, so we might need to update this to support that, not sure how but we can file a follow up.

const wantsKeys = integration.wantsKeys();
const isOAuth = isOAuthWebIntegration(integration);

// Passwordless eligibility:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏽

goToSettingsWithAlertSuccess();
} else {
// Navigate to relying party
if (origin === 'signup') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Surprised lint didn't catch this but origin isn't defined in file?

}
} else {
const isFullyVerified =
result.verified && result.verified;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo?

*[other] Enter the code that was sent to <email>{ $email }</email> within { $expirationMinutes } minutes. <link>Use a different account</link>
}

signin-passwordless-code-input-label = Enter 6-digit code
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be 8-digit code


const cmsInfo = integration?.getCmsInfo();
// Use SigninTokenCodePage as fallback since SigninPasswordlessCodePage doesn't exist in CMS yet
const title = (cmsInfo as any)?.SigninPasswordlessCodePage?.pageTitle ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there might be some types you could use cmsInfo as any

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants