vueda

Appearance

View Markdown

Auth & MFA Views ​

This page shows the eight account views in the default theme: sign in, forgot password, reset password, Two-Factor Authentication, Reauthentication, device setup, change password, and recovery codes. Each view renders inside one of two card layouts, AuthorizingForm or AuthForm. Build Auth Views describes how the views route, submit, redirect, and report errors. Components describes the rules every component page shares.

Each demo mounts the real view with its own user store. The demo replaces the store actions that the view calls with offline stand-ins, so submitting shows the real loading, error, and toast states. Toasts from every demo appear in one overlay in the corner of the window, as in an app.

Card layouts ​

AuthorizingForm centers its card in the viewport, and the card's heading is the page heading. AuthForm places its card at the top of the content column, under the layout's page title. Its card heading reads as a section heading. Both cards use the same frame. Both pass submission to an inner ActionForm. AuthorizingForm also handles the redirect after sign-in, and AuthForm handles Reauthentication redirects.

The cards below are diagrams that label each region. The live demos in the sections that follow show the rendered chrome.

Theme keys: AuthorizingForm and AuthForm. AuthorizingForm.inner and AuthForm.inner set the card frame, and AuthorizingForm.header and AuthForm.header set the heading type.

ViewSignIn ​

ViewSignIn is an AuthorizingForm card with an email field and a password field. One full-width "Sign In" button sits in a strip across the bottom of the form. While the request runs, the button shows a spinner and ignores clicks. A rejected sign-in shows a Non-Field Error above the fields, and the button stays enabled so the user can try again.

The forgotPasswordTo prop adds a "Forgot password?" link below the form. Without it, no link shows. The first demo sets it.

ViewForgotPassword ​

ViewForgotPassword is an AuthorizingForm card with one email field and a full-width "Send Reset Link" button. A "Back to sign in" link sits below the form and goes to the signInTo route.

A successful request shows a "Check Your Email" toast. The toast does not say whether an account uses the address, because the server answers the same way either way. Validation errors from the server show in the form. A failed request shows a "Reset Link Not Sent" toast.

ViewResetPassword ​

ViewResetPassword is the page that a password reset email links to. Its route passes the link's pk and token as props. The view is an AuthorizingForm card with a new password field, a confirmation field, and a full-width "Reset Password" button.

On mount the view asks the server whether the link is valid. The form shows while the check runs. When the server rejects the link, an "Invalid Reset Link" message replaces the card, with a "Request a new link" button and a "Sign in" link. The message renders without the card frame. The invalid-message slot replaces it.

A successful reset shows a "Password Reset" toast and goes to the signInTo route. The demo's in-memory router keeps the form on screen after that navigation.

ViewTwoFactorAuth ​

ViewTwoFactorAuth is an AuthorizingForm card shown after the password step passes, while the server waits for a second factor. It lists the account's verified methods in a WidgetSelectDropdown, with each label in upper case. Choosing a method reveals a six-slot WidgetOTPInput for the code. The method field is a dropdown; #427 tracks a card-based picker.

The buttons stack in one column under the fields:

  • For sms and email, a Send button requests a code. After a send, it is disabled and shows a countdown chip for 60 seconds.
  • "Verify" is the primary submit. It stays disabled until a code is entered.
  • "Use a recovery code" swaps the method and code fields for one monospaced text input. In that state the button reads "Back to verified methods" and swaps them back.

A rejected code shows its error under the code field.

The server keeps a waiting sign-in in the session, so a page reload stays on this step. When no sign-in is waiting, for example because it expired, the view shows a "Your sign-in has expired" toast and goes to the sign-in route.

Theme keys: ViewTwoFactorAuth. ViewTwoFactorAuth.buttons stacks the buttons, ViewTwoFactorAuth.cooldownChip styles the countdown, ViewTwoFactorAuth.recoveryToggle places the toggle, and ViewTwoFactorAuth.recoveryInput styles the recovery-code input.

ViewReauthenticate ​

ViewReauthenticate asks a signed-in user to confirm their identity before a request that needs a recent session, such as setting up a two-factor device. The server decides which proof counts, and the store's authPendingFlow names it. For reauthenticate, the view is an AuthorizingForm card with one password field and a full-width "Verify" button. For mfa_reauthenticate, it renders ViewTwoFactorAuth, because a password alone does not count for an account with a device. Both forms read "Confirm your identity".

Both forms wait until the session is recent, then go to the redirect query value with an "Identity Confirmed" toast. A user whose session is already recent goes on without a prompt. A rejected password shows its error under the password field. Any other failure shows a "Verification Failed" toast.

Theme keys: AuthorizingForm for the password form, and ViewTwoFactorAuth for the code form.

ViewSetupDevice ​

ViewSetupDevice is a three-step enrollment flow in an AuthForm card: Choose, Verify, and Done. It takes required app and model props and reads its method choices from that model's config through useModelConfig. The demo seeds a small device model into its store for this.

A step track above the fields shows progress. Upcoming steps are dimmed, the current step's number is filled, and a finished step shows a check in place of its number. Each step shows:

  • Choose: a method dropdown and a "Choose Device" button. Choosing email or SMS reveals a destination field: an email address or a phone number.
  • Verify: the method and destination fields are disabled, a six-slot code input appears, and the button reads "Verify Device". For the authenticator app, a QR code and a manual key strip show the secret so a user without a camera can type it.
  • Done: a completion panel with a check icon, "Device added", and a short description replaces the fields, and the button reads "Continue".

A rejected code keeps the flow at Verify and shows the error under the code field.

Theme keys: ViewSetupDevice.

ViewChangePassword ​

ViewChangePassword is an AuthForm card with three password fields: current, new, and confirmation. Each is a FormField around a WidgetTextInput, so it shows labels and errors the same way as any model form. The card heading and subtitle come from AuthForm's header and subTitle props, which the demo passes. The view sets AuthForm's requireRecentAuth to false, because the server checks the current password instead of a recent session.

The buttons are ActionForm's default pair, "Yes, continue" and "Cancel, go back". A field error from the server shows under its field. The validation summary above the fields appears only for errors that no rendered field shows.

Theme keys: AuthForm and ActionForm. ActionForm.buttons lays out the button pair, and ActionForm.validation styles the validation summary.

ViewRecoveryCodes ​

ViewRecoveryCodes is an AuthForm card whose content depends on whether the signed-in user has a two-factor device.

With a device, the card shows the unused codes in a bordered panel:

  • A warning Alert says each code works once.
  • The codes form a numbered, two-column monospaced list.
  • Download, Print, and Copy All buttons sit under the list. Copy All reads "Copied!" after a copy.
  • An action bar below the panel explains regeneration and holds a "Generate new recovery codes" button and a "Go Back" button. Generating replaces the list and shows a toast.

Printing the page leaves out the warning, the buttons, and the action bar, so the printout shows the codes.

The recovery-codes endpoint returns the unused codes and the code counts but does not identify used codes, so the list shows only unused codes (#428).

The server shows and regenerates codes only for a session that recently confirmed a second factor. When it refuses, AuthForm sends the user to the reauthenticate route, which returns them here after they confirm a code.

Without a device, a warning alert asks the user to set up two-factor first. The action bar then holds a "Set up a device" button and a "Go Back" button.

Theme keys: ViewRecoveryCodes.

Customization surface ​

These tokens apply across the eight views:

Theme keys shared by the views:

The single-button strip in ViewSignIn, ViewForgotPassword, ViewResetPassword, and the ViewReauthenticate password form has no theme key. To restyle it, replace the view's action-bar slot (ViewSignIn.action-bar, ViewForgotPassword.action-bar, ViewResetPassword.action-bar, or ViewReauthenticate.action-bar).