Page Examples

Authentication Pages

Complete page examples for every authentication page. Each example uses MAuthPublic nested inside your own layout component.

For details on each component and its props, see the Component Reference.

---

Login Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthEmailInput,
  MAuthPasswordInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
  MAuthTwoFASection,
  MAuthTwoFACodeInput,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Login">
  <MAuthPublic scripts={['TurnstileInit', 'LoginScript']}>
    <MAuthForm formName="login">
      <MAuthEmailInput label="Email" />
      <MAuthPasswordInput label="Password" fieldName="password" />
      <MAuthTurnstile theme="light" size="flexible" />
      <MAuthTwoFASection>
        <MAuthTwoFACodeInput name="totp-code" label="2FA Code" />
      </MAuthTwoFASection>
      <MAuthSubmitButton label="Log In" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Register Page (Password)

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthNameInput,
  MAuthEmailInput,
  MAuthPasswordInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Register">
  <MAuthPublic scripts={['TurnstileInit', 'RegisterPasswordScript']}>
    <MAuthForm formName="register">
      <MAuthNameInput label="Name" />
      <MAuthEmailInput label="Email" />
      <MAuthPasswordInput label="Password" fieldName="password" />
      <MAuthPasswordInput label="Confirm Password" fieldName="confirm-password" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Create Account" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Magic Link Login Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthEmailInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Magic Login">
  <MAuthPublic scripts={['TurnstileInit', 'MagicLoginScript']}>
    <MAuthForm formName="magic-login">
      <MAuthEmailInput label="Email" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Send Magic Link" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Magic Link Register Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthNameInput,
  MAuthEmailInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Create Account with Magic Link">
  <MAuthPublic scripts={['TurnstileInit', 'MagicRegisterScript']}>
    <MAuthForm formName="magic-register">
      <MAuthNameInput label="Name" />
      <MAuthEmailInput label="Email" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Create Account" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Forgot Password Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthEmailInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Forgot Password">
  <MAuthPublic scripts={['TurnstileInit', 'ForgotPasswordScript']}>
    <MAuthForm formName="forgot-password">
      <MAuthEmailInput label="Email" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Send Reset Link" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Resend Verification Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthEmailInput,
  MAuthSubmitButton,
  MAuthMessage,
  MAuthTurnstile,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Resend Verification Email">
  <MAuthPublic scripts={['TurnstileInit', 'ResendVerificationScript']}>
    <MAuthForm formName="resend-verification">
      <MAuthEmailInput label="Email" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Resend Verification Email" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Reset Password Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthPasswordInput,
  MAuthTwoFACodeInput,
  MAuthTurnstile,
  MAuthSubmitButton,
  MAuthMessage,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Reset Password">
  <MAuthPublic scripts={['TurnstileInit', 'ResetPasswordScript']}>
    <MAuthForm formName="reset-password">
      <MAuthPasswordInput label="New Password" fieldName="new-password" />
      <MAuthPasswordInput label="Confirm Password" fieldName="confirm-password" />
      <MAuthTwoFACodeInput name="totp-code-reset" label="2FA Code" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Reset Password" />
      <MAuthMessage />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Verify Magic Link Page

---
import {
  MAuthPublic,
  MAuthForm,
  MAuthTwoFACodeInput,
  MAuthTurnstile,
  MAuthSubmitButton,
  MAuthMessage,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Verify Magic Link">
  <MAuthPublic scripts={['TurnstileInit', 'VerifyMagicLinkScript']}>
    <MAuthMessage defaultText="Verifying..." />
    <MAuthForm formName="verify-magic-link">
      <MAuthTwoFACodeInput name="totp-code-magic" label="2FA Code" />
      <MAuthTurnstile />
      <MAuthSubmitButton label="Verify & Sign In" />
    </MAuthForm>
  </MAuthPublic>
</MyLayout>

Email Verification Page

---
import {
  MAuthPublic,
  MAuthMessage,
} from '@mindfulauth/astro/components';
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout title="Email Verified">
  <MAuthPublic scripts={['VerifyEmailScript']}>
    <MAuthMessage defaultText="Verifying your email..." />
  </MAuthPublic>
</MyLayout>

---

Protected Pages

Protected pages live inside src/pages/[memberid]/ and use MAuthProtected. The middleware enforces authentication before the page renders — no extra checks needed in the page itself.

Security / Profile Page

This is the most important protected page [memberid]/index.astro. It mounts the security section components and must pass SecurityScript.

---
import { MAuthProtected } from '@mindfulauth/astro/components';
import {
  MAuthChangePassword,
  MAuthEnable2FA,
  MAuthDisable2FA,
  MAuthAddAuthMethod,
} from '@mindfulauth/astro/components';
import MyLayout from '../../layouts/MyLayout.astro';
---
<MyLayout title="Profile">
  <MAuthProtected scripts={['SecurityScript']}>
    <MAuthChangePassword title="Change Password" submitLabel="Update Password" />
    <MAuthEnable2FA
      title="Two-Factor Authentication"
      setupTitle="Scan the QR Code"
      enableLabel="Enable 2FA"
      verifyLabel="Verify & Enable"
      recoveryCodesTitle="Save Your Recovery Codes"
      copyLabel="Copy Codes"
    />
    <MAuthDisable2FA title="Disable Two-Factor Authentication" submitLabel="Disable 2FA" />
    <MAuthAddAuthMethod title="Add Authentication Method" submitLabel="Add Authentication Method" />
  </MAuthProtected>
</MyLayout>

Generic Protected Page

Any other page inside [memberid]/ just needs MAuthProtected with no scripts — the middleware handles auth enforcement.

---
import { MAuthProtected } from '@mindfulauth/astro/components';
import MyLayout from '../../layouts/MyLayout.astro';

const recordId = Astro.locals.recordId;
---
<MyLayout title="Dashboard">
  <MAuthProtected>
    <h1>Dashboard</h1>
    <p>Member ID: {recordId}</p>
  </MAuthProtected>
</MyLayout>