Security Question Setup

Full-height security-question setup screen: a native select of preset questions, an answer input below it, and Skip and Continue buttons for finishing or deferring the step.

By Staaarter Team

Auth

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/security-question-setup.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth48.tsx instead.

Usage

The file also exports auth48Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth48, auth48Demo } from "@/components/blocks/auth/auth48";

export default function Page() {
  return <Auth48 {...auth48Demo} />;
}

Props

Prop	Type	Default	Description
heading	ReactNode	none	Main heading above the form.
description	string	undefined	Supporting copy under the heading.
questions	string[]	none	Preset security questions listed in the select.
answerLabel	string	none	Label for the answer field.
answerPlaceholder	string	undefined	Placeholder text for the answer input.
skipLabel	string	none	Label for the skip button.
continueLabel	string	none	Label for the continue button.
className	string	none	Extra classes for the outer section element.

Behavior notes

Static server component; a native <select> does not need client-side JavaScript to be interactive, so no "use client" is required.
Both Skip and Continue are left inert, no real submit handler or navigation, since persisting the chosen question/answer or skipping the step both require a backend.

More Auth Blocks

View all →

centered-sign-in-card

Centered Sign In Card

Full-height centered sign-in card with social buttons, a password show/hide toggle, and remember-me.

split-screen-sign-up

Split-Screen Sign Up

Two-column registration screen with a sign-up form on one side and a full-bleed photo with a customer quote on the other.

email-verification-code

Email Verification Code

Full-height OTP screen with a 6-digit segmented code input, auto-advancing focus, and a live resend countdown.

forgot-password-request

Forgot Password Request

Full-height password recovery screen with a single email field, a send-reset-link button, and a back-to-sign-in link.

set-new-password

Set New Password

Full-height reset-password screen with independent show/hide toggles per field and a live password-requirements checklist.

magic-link-sign-in

Magic Link Sign In

Full-height passwordless sign-in screen with an email field, a send-magic-link button, and social login as a fallback.