Component Reference

All components are exported from @mindfulauth/astro/components:

import {
  MAuthPublic,
  MAuthProtected,
  MAuthForm,
  MAuthEmailInput,
  MAuthPasswordInput,
  MAuthNameInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
  MAuthTwoFACodeInput,
  MAuthTwoFASection,
  MAuthPasswordChangePending,
  MAuthChangePassword,
  MAuthEnable2FA,
  MAuthDisable2FA,
  MAuthAddAuthMethod,
} from '@mindfulauth/astro/components';

---

Layout Components

Layout components wrap entire pages. They inject the necessary auth scripts and set up the page structure.

Nesting layouts

Nest MAuthPublic or MAuthProtected inside your own layout component. Your layout handles the page <title> and structure, while the MAuth component injects the necessary auth scripts.

MAuthPublic

Wraps public (unauthenticated) pages such as login, register, and forgot-password.

Pages using this layout:

• Login
• Register
• Forgot Password
• Magic Link Login
• Magic Link Register
• Reset Password
• Email Verification
• Resend Verification

Prop	Type	Required	Default	Description
scripts	ScriptName[]	Yes	—	Auth scripts to include (see Auth Scripts)

---
import { MAuthPublic } from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Login">
  <MAuthPublic scripts={['LoginScript']}>
    <!-- page content -->
  </MAuthPublic>
</MyLayout>

MAuthProtected

Wraps protected (authenticated) pages. The middleware enforces authentication before the page renders.

Required for all authenticated pages

All files in src/pages/[memberid]/* must use this layout to ensure the auth scripts are injected and the page structure is correct.

Prop	Type	Required	Default	Description
scripts	ScriptName[]	No	—	Auth scripts to include (see Auth Scripts)

---
import { MAuthProtected } from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Dashboard">
  <MAuthProtected scripts={['SecurityScript']}>
    <!-- page content -->
  </MAuthProtected>
</MyLayout>

---

Form Components

Form components are used inside MAuthPublic or MAuthProtected pages to build authentication forms.

MAuthForm

The container for any Mindful Auth form. Identifies the form to auth scripts via formName.

Prop	Type	Required	Default	Description
formName	string	Yes	—	Unique identifier used by auth scripts to bind to this form
class	string	No	—	CSS class(es) on the <form> element

The formName value must match what the corresponding auth script expects. Using an incorrect value will silently break the form:

formName	Required script
"login"	LoginScript
"register"	RegisterPasswordScript
"forgot-password"	ForgotPasswordScript
"magic-login"	MagicLoginScript
"magic-register"	MagicRegisterScript
"resend-verification"	ResendVerificationScript
"reset-password"	ResetPasswordScript

<MAuthForm formName="login" class="auth-form">
  <!-- form fields -->
</MAuthForm>

MAuthEmailInput

An email address input field.

Prop	Type	Required	Default	Description
label	string	No	"Email"	Label text
placeholder	string	No	—	Input placeholder
class	string	No	—	CSS class(es) on the wrapper element

<MAuthEmailInput label="Email" placeholder="you@example.com" class="my-input" />

MAuthPasswordInput

A password input field. Use fieldName to distinguish between different password fields on the same form.

Prop	Type	Required	Default	Description
label	string	Yes	—	Label text
fieldName	'password' | 'confirm-password' | 'new-password'	Yes	—	Sets the data-mindfulauth-field attribute used by auth scripts
class	string	No	—	CSS class(es) on the wrapper element

<MAuthPasswordInput label="Password" fieldName="password" />
<MAuthPasswordInput label="Confirm Password" fieldName="confirm-password" />

MAuthNameInput

A name input field for registration forms.

Prop	Type	Required	Default	Description
label	string	No	"Name"	Label text
class	string	No	—	CSS class(es) on the wrapper element

<MAuthNameInput label="Full Name" class="my-input" />

MAuthSubmitButton

The form submit button.

Prop	Type	Required	Default	Description
label	string	Yes	—	Button text
class	string	No	—	CSS class(es) on the <button> element

<MAuthSubmitButton label="Log In" class="btn-primary" />

MAuthMessage

A message/status area where auth scripts display success or error feedback.

Prop	Type	Required	Default	Description
defaultText	string	No	""	Initial text shown before any auth action
class	string	No	—	CSS class(es) on the message element

<MAuthMessage defaultText="Please log in to continue." class="auth-message" />

MAuthTurnstile

Renders a Cloudflare Turnstile CAPTCHA widget. The widget is automatically initialized by TurnstileInit (included in layout scripts).

Prop	Type	Required	Default	Description
theme	'light' | 'dark' | 'auto'	No	'light'	Widget color theme
size	'flexible' | 'normal' | 'compact'	No	'flexible'	Widget size
language	string	No	'auto'	Widget language code
appearance	'always' | 'execute' | 'interaction-only'	No	'always'	When to show the widget
class	string	No	—	CSS class(es) on the wrapper element

<MAuthTurnstile theme="dark" size="compact" language="en" appearance="always" class="my-turnstile" />

MAuthTwoFACodeInput

An input field for 2FA verification codes. Used on login and 2FA setup pages.

Prop	Type	Required	Default	Description
name	string	Yes	—	Input name attribute
label	string	No	"2FA Code"	Label text
class	string	No	—	CSS class(es) on the wrapper element

<MAuthTwoFACodeInput name="totp-code" label="Authentication Code" class="my-input" />

MAuthTwoFASection

A conditional section that is shown only when 2FA verification is required during login. Auth scripts toggle its visibility automatically.

Prop	Type	Required	Default	Description
class	string	No	—	CSS class(es) on the section element

<MAuthTwoFASection class="twofa-section">
  <MAuthTwoFACodeInput name="totp-code" label="2FA Code" />
</MAuthTwoFASection>

MAuthPasswordChangePending

A notice displayed when a password change is required before the user can proceed. Auth scripts toggle its visibility automatically.

Prop	Type	Required	Default	Description
class	string	No	—	CSS class(es) on the element

<MAuthPasswordChangePending class="pending-notice" />

---

Security Section Components

These components are used on account security pages (typically [memberid]/index.astro). They include their own forms and are controlled by SecurityScript.

MAuthChangePassword

A self-contained change-password form.

Prop	Type	Required	Default	Description
class	string	No	—	CSS class on the section wrapper
formClass	string	No	—	CSS class on the inner <form>
buttonClass	string	No	—	CSS class on the submit button
title	string	No	"Change Password"	Section heading
submitLabel	string	No	"Update Password"	Submit button text

<MAuthChangePassword
  class="section"
  formClass="form"
  buttonClass="btn"
  title="Change Password"
  submitLabel="Update Password"
/>

MAuthEnable2FA

A self-contained 2FA setup flow including QR code display, verification, and recovery codes.

Prop	Type	Required	Default	Description
class	string	No	—	CSS class on the section wrapper
setupClass	string	No	—	CSS class on the setup container
formClass	string	No	—	CSS class on the verification form
qrWrapperClass	string	No	—	CSS class on the QR code outer wrapper
qrDisplayClass	string	No	—	CSS class on the QR code display area
buttonClass	string	No	—	CSS class on action buttons
recoveryCodesClass	string	No	—	CSS class on the recovery codes container
recoveryListClass	string	No	—	CSS class on the recovery codes list
recoveryCodesTitle	string	No	"Save Your Recovery Codes"	Recovery codes section heading
copyLabel	string	No	"Copy Codes"	Copy button text
title	string	No	"Two-Factor Authentication"	Section heading
setupTitle	string	No	"Scan the QR Code"	QR code step heading
enableLabel	string	No	"Enable 2FA"	Button to start the 2FA setup flow
verifyLabel	string	No	"Verify & Enable"	Submit button for the verification step

<MAuthEnable2FA
  class="section"
  setupClass="setup"
  formClass="form"
  qrWrapperClass="qr-wrapper"
  qrDisplayClass="qr-display"
  buttonClass="btn"
  recoveryCodesClass="recovery"
  recoveryListClass="recovery-list"
  recoveryCodesTitle="Save Your Recovery Codes"
  copyLabel="Copy Codes"
  title="Two-Factor Authentication"
  setupTitle="Scan the QR Code"
  enableLabel="Enable 2FA"
  verifyLabel="Verify & Enable"
/>

MAuthDisable2FA

A self-contained form to disable 2FA on the account.

Prop	Type	Required	Default	Description
class	string	No	—	CSS class on the section wrapper
formClass	string	No	—	CSS class on the <form>
buttonClass	string	No	—	CSS class on the submit button
title	string	No	"Disable Two-Factor Authentication"	Section heading
submitLabel	string	No	"Disable 2FA"	Submit button text

<MAuthDisable2FA
  class="section"
  formClass="form"
  buttonClass="btn"
  title="Disable Two-Factor Authentication"
  submitLabel="Disable 2FA"
/>

MAuthAddAuthMethod

A button to add a new authentication method (e.g., adding a password to a magic-link-only account).

Prop	Type	Required	Default	Description
class	string	No	—	CSS class on the section wrapper
buttonClass	string	No	—	CSS class on the button
title	string	No	"Add Authentication Method"	Section heading
submitLabel	string	No	"Add Authentication Method"	Button text

<MAuthAddAuthMethod
  class="section"
  buttonClass="btn"
  title="Add Authentication Method"
  submitLabel="Add Authentication Method"
/>

---

Auth Scripts

Auth scripts are the client-side JavaScript that power authentication flows. You specify which scripts to load per page via the scripts prop on MAuthPublic or MAuthProtected.

Automatic script injection

MainScript is always included automatically. Other scripts are injected based on what you pass to the scripts prop.

Script Name	Description
MainScript	Core script — always included automatically. Handles frame-busting, fetch wrapper, 2FA cache, cookie checks, and logout.
TurnstileInit	Automatically included if you use MAuthTurnstile on the page. Fetches the tenant site key and renders the Turnstile widget.
LoginScript	Handles password login with 2FA support.
RegisterPasswordScript	Handles password-based registration.
ForgotPasswordScript	Handles the forgot-password form submission.
MagicLoginScript	Handles magic link login form submission.
MagicRegisterScript	Handles magic link registration form submission.
ResendVerificationScript	Handles the resend-verification-email form.
ResetPasswordScript	Handles password reset (requires token + optional 2FA).
VerifyEmailScript	Auto-runs on page load to complete email verification.
VerifyMagicLinkScript	Handles magic link verification with Turnstile and optional 2FA.
SecurityScript	Powers the security settings page — change password, enable/disable 2FA, add auth method.

---

For complete page examples covering every authentication flow, see the Page Examples guide.