Authentication

const cwa = useCwa()

cwa.auth.signedIn.value         // boolean
cwa.auth.isAdmin.value          // boolean — roles include ROLE_ADMIN (exact match, no hierarchy)
cwa.auth.status.value           // 0=SIGNED_OUT, 1=LOADING, 2=SIGNED_IN (CwaAuthStatus enum)

cwa.auth.user                   // { '@id', username, emailAddress, roles, enabled } or undefined
cwa.auth.roles                  // string[] | undefined
cwa.auth.hasRole('ROLE_EDITOR') // boolean

<UserMenu v-if="$cwa.auth.signedIn.value" />
<NuxtLink v-else to="/login">Sign in</NuxtLink>

<ClientOnly>
    <AdminBar v-if="$cwa.auth.isAdmin.value" />
</ClientOnly>

const result = await cwa.auth.signIn({ username: 'alice@example.com', password: 'secret' })

if (result instanceof FetchError) {
    // result.statusCode === 401 → invalid credentials
    error.value = 'Invalid email or password'
} else {
    navigateTo('/')
}

import { useLogin } from '#imports'

const { credentials, signIn, submitting, error } = useLogin()

// credentials.username and credentials.password are reactive
// signIn() calls the API and, on success, navigates to the redirect target (default '/')
// error.value is the error message string, or undefined

<form @submit.prevent="signIn">
    <input v-model="credentials.username" type="email" placeholder="Email" />
    <input v-model="credentials.password" type="password" placeholder="Password" />
    <p v-if="error" class="text-red-500">{{ error }}</p>
    <button :disabled="submitting" type="submit">Sign in</button>
</form>

useLogin({ redirect: '/dashboard' })            // a fixed path
useLogin({ redirect: () => returnTo.value })    // or a getter, resolved at sign-in

// Step 1: request the reset email
import { useForgotPassword } from '#imports'
const { credentials, doSubmit, submitting, success, error } = useForgotPassword()
// credentials.username — the user's email or username
// doSubmit() → GET /password/reset/request/{username}

// Step 2: submit the new password (on the page the email links to)
import { useResetPassword } from '#imports'
const { passwords, resetPassword, submitting, success, error, inputErrors } = useResetPassword()
// passwords.first / passwords.second — the new password and its confirmation
// username and token are read from the route params automatically
// resetPassword() → POST /component/forms/password_reset/submit

// Verify email (from the link)
import { useVerifyEmail } from '#imports'
const { verifyEmail, confirmEmail, submitting, success, error } = useVerifyEmail()
// Both read username/token (and newEmail for confirmEmail) from the route params
onMounted(() => verifyEmail())

// Resend the verification email
import { useResendVerifyEmail } from '#imports'
const { resendVerifyEmail, submitting, success, error, retryIn } = useResendVerifyEmail()
resendVerifyEmail(username)             // defaults to 'current'
resendVerifyEmail(username, 'new')      // resends for a pending email change

<button type="button" :disabled="submitting || retryIn > 0" @click="resendVerifyEmail(username)">
  Resend email<template v-if="retryIn"> ({{ retryIn }}s)</template>
</button>

// app/pages/account.vue
definePageMeta({ middleware: 'cwa-auth' }) 

// app/middleware/editor.ts
export default defineNuxtRouteMiddleware(async (to) => {
    const cwa = useCwa()
    await cwa.auth.init()
    if (cwa.auth.hasRole('ROLE_EDITOR')) {
        return
    }
    if (cwa.auth.signedIn.value) {
        return navigateTo('/')
    }
    return navigateTo({ path: '/login', query: { redirect: to.fullPath } })
})

await cwa.auth.signOut()
navigateTo('/login')

<script setup lang="ts">
const cwa = useCwa()
const form = reactive({ username: '', emailAddress: '', plainPassword: '' })
const loading = ref(false)
const error = ref<string | null>(null)

async function register() {
    loading.value = true
    error.value = null
    try {
        await $fetch(`${cwa.apiUrlBase}/users`, {
            method: 'POST',
            body: form,
            credentials: 'include'
        })
        navigateTo('/login?registered=1')
    } catch (e: any) {
        error.value = e?.data?.description ?? e?.data?.detail ?? 'Registration failed'
    } finally {
        loading.value = false
    }
}
</script>

<!-- app/pages/login.vue -->
<template>
    <div class="max-w-sm mx-auto mt-16">
        <h1 class="text-2xl font-bold mb-8">Welcome back</h1>
        <form @submit.prevent="signIn" class="space-y-4">
            <input v-model="credentials.username" type="email" class="input w-full" placeholder="Email" />
            <input v-model="credentials.password" type="password" class="input w-full" placeholder="Password" />
            <p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
            <button type="submit" :disabled="submitting" class="btn-primary w-full">
                {{ submitting ? 'Signing in...' : 'Sign in' }}
            </button>
        </form>
        <NuxtLink to="/forgot-password" class="text-sm text-gray-500 mt-4 block">
            Forgot your password?
        </NuxtLink>
    </div>
</template>

<script setup lang="ts">
import { useLogin } from '#imports'
definePageMeta({
    layout: false,           // or use a minimal layout
    cwa: { disabled: true }, // stop CWA resolving this path as a content route
})
const { credentials, signIn, submitting, error } = useLogin()
</script>