Authentication (User Guide)

The seven authentication screens. These render full-screen, outside the dashboard shell (no sidebar or header), the way real sign-in pages do.

Where to find them: Pages → Authentication. Routes are under /auth/*. Each comes in a tidy, responsive layout that collapses to a single column on mobile.

Login

What it is: the sign-in screen, in two design variants you can choose between.

Where to find it:

• V1 (split layout — branded showcase beside the form): /auth/login
• V2 (form on a hero background): /auth/login-v2

How to use it

1. Enter your email and password.
2. Optionally use a social sign-in button or the "remember me" option.
3. Submit — invalid fields show inline errors and the card gives a small shake; a valid submit shows a success state.

Register

What it is: the account-creation screen, also in two variants.

Where to find it:

• V1: /auth/register
• V2: /auth/register-v2

How to use it: fill in your details; the password field includes a strength meter and a show/hide toggle. Submit to create the account (validation is enforced).

Forgot password

What it is: the screen to request a password-reset link.

Where to find it: /auth/forgot-password.

How to use it: enter your email and submit; a success screen confirms the reset email was "sent".

Reset password

What it is: the screen to set a new password (reached from the reset link).

Where to find it: /auth/reset-password.

How to use it: enter and confirm a new password (with the strength meter) and submit; a success screen confirms the change.

Lock screen

What it is: a lock screen showing the current user's identity, for quick re-entry without full sign-out.

Where to find it: /auth/lock-screen.

How to use it: enter your password to unlock and return to the app.

Tips

• In the template, sign-in is presentational — it validates and confirms but doesn't yet write a session or redirect. Your developers connect it to your real authentication when deploying (see the developer Authentication guide).
• Validation states covered on these screens: default, focused, error (red field + card shake), success, disabled, and loading.

Related