@nuxt-customer-portal/authentication 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @nuxt-customer-portal/authentication
+
+## 0.3.0
+
+Declare the Nuxt UI dependency used by the package's public components and types,
+so npm installations do not depend on another package's dependency layout.
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.3.0
+- @nuxt-customer-portal/ui@0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuxt Customer Portal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Authentication layer
+
+Owns login, signup, password recovery, and email-verification user interfaces. Shared identity infrastructure is provided by portal core.

package/app/middleware/check-verification-error.ts

@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware((to, _from) => {
+  // Check if navigating to the email verified page and if there's an error query param
+  if (to.path === '/email-verified' && to.query.error) {
+    console.log(`Middleware: Found error (${to.query.error}) on /email-verified, redirecting to /verification-error`)
+    // Redirect to the verification error page, preserving the error query param
+    // Use replace: true to avoid adding the intermediate /email-verified page to history
+    return navigateTo(
+      {
+        path: '/verification-error',
+        query: { error: to.query.error }
+      },
+      { replace: true }
+    )
+  }
+  // Otherwise, allow navigation to proceed
+})

package/app/pages/forgot-password.vue

@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+definePageMeta({
+  layout: 'centerform',
+  public: true
+})
+
+const { t } = useI18n()
+const router = useRouter()
+
+useSeoMeta({
+  title: t('forgotPassword.title'),
+  description: t('forgotPassword.description')
+})
+
+// State management
+const currentStep = ref(1) // 1: email entry, 2: OTP + password
+const email = ref('')
+const otpCode = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const isLoading = ref(false)
+const error = ref('')
+const success = ref('')
+const resendCooldown = ref(0)
+let cooldownTimer: NodeJS.Timeout | null = null
+
+// Auto-focus email input on mount
+onMounted(() => {
+  const input = document.querySelector('input[type="email"]') as HTMLInputElement
+  if (input) {
+    input.focus()
+  }
+})
+
+// Clean up timer on unmount
+onUnmounted(() => {
+  if (cooldownTimer) {
+    clearInterval(cooldownTimer)
+  }
+})
+
+// Start cooldown timer
+const startCooldownTimer = () => {
+  resendCooldown.value = 60
+  if (cooldownTimer) {
+    clearInterval(cooldownTimer)
+  }
+  cooldownTimer = setInterval(() => {
+    resendCooldown.value--
+    if (resendCooldown.value <= 0) {
+      clearInterval(cooldownTimer!)
+      cooldownTimer = null
+    }
+  }, 1000)
+}
+
+// Handle OTP input formatting (6 digits only)
+const handleOtpInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value.replace(/\D/g, '').slice(0, 6)
+  otpCode.value = value
+  target.value = value
+}
+
+// Email validation schema
+const emailSchema = computed(() =>
+  z.object({
+    email: z.email(t('forgotPassword.validation.invalidEmail'))
+  })
+)
+
+// Password reset validation schema
+const resetSchema = computed(() =>
+  z
+    .object({
+      otp: z.string().min(6, t('forgotPassword.validation.otpLength')),
+      newPassword: z.string().min(8, t('forgotPassword.validation.passwordMinLength')),
+      confirmPassword: z.string().min(8, t('forgotPassword.validation.passwordMinLength'))
+    })
+    .refine((data) => data.newPassword === data.confirmPassword, {
+      message: t('forgotPassword.validation.passwordsMatch'),
+      path: ['confirmPassword']
+    })
+)
+
+// Step 1: Send verification code
+const sendVerificationCode = async (payload: FormSubmitEvent<{ email: string }>) => {
+  isLoading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    const result = await authClient.emailOtp.sendVerificationOtp({
+      email: payload.data.email,
+      type: 'forget-password'
+    })
+
+    if (result.data?.success) {
+      email.value = payload.data.email
+      currentStep.value = 2
+      success.value = t('forgotPassword.messages.codeSent')
+      startCooldownTimer()
+
+      // Auto-focus OTP input
+      await nextTick()
+      const otpInput = document.querySelector('input[type="text"]') as HTMLInputElement
+      if (otpInput) {
+        otpInput.focus()
+      }
+    } else {
+      error.value = result.error?.message || t('forgotPassword.messages.userNotFound')
+    }
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    error.value = errorMessage || t('forgotPassword.messages.userNotFound')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Resend verification code
+const resendCode = async () => {
+  if (resendCooldown.value > 0) {
+    return
+  }
+
+  isLoading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    const result = await authClient.emailOtp.sendVerificationOtp({
+      email: email.value,
+      type: 'forget-password'
+    })
+
+    if (result.data?.success) {
+      success.value = t('forgotPassword.messages.codeSent')
+      startCooldownTimer()
+    } else {
+      error.value = result.error?.message || t('forgotPassword.messages.resendError')
+    }
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    error.value = errorMessage || t('forgotPassword.messages.resendError')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Step 2: Reset password with OTP
+const resetPassword = async (
+  payload: FormSubmitEvent<{ otp: string; newPassword: string; confirmPassword: string }>
+) => {
+  isLoading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    const resetResult = await authClient.emailOtp.resetPassword({
+      email: email.value,
+      otp: payload.data.otp,
+      password: payload.data.newPassword
+    })
+
+    if (resetResult.data?.success) {
+      router.push('/dashboard')
+    } else {
+      console.error(resetResult.error)
+      error.value = t('forgotPassword.messages.resetError')
+    }
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    console.error('Error resetting password:', errorMessage)
+    error.value = errorMessage || t('forgotPassword.messages.resetError')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Auto-submit when 6 digits are entered
+watch(otpCode, async (newValue) => {
+  if (newValue.length === 6 && currentStep.value === 2) {
+    // Only auto-submit if passwords are also filled
+    if (newPassword.value && confirmPassword.value) {
+      const formData = {
+        otp: newValue,
+        newPassword: newPassword.value,
+        confirmPassword: confirmPassword.value
+      }
+      await resetPassword({ data: formData } as FormSubmitEvent<{
+        otp: string
+        newPassword: string
+        confirmPassword: string
+      }>)
+    }
+  }
+})
+</script>
+
+<template>
+  <CustomPageCard
+    :title="t('forgotPassword.title')"
+    :description="currentStep === 1 ? t('forgotPassword.description') : t('forgotPassword.step2Description', { email })"
+    :success="success"
+    :error="error"
+  >
+    <!-- Step 1: Email Entry -->
+    <div v-if="currentStep === 1">
+      <UForm :schema="emailSchema" :state="{ email }" class="space-y-4" @submit="sendVerificationCode">
+        <UFormField :label="t('forgotPassword.fields.email')" name="email" required>
+          <UInput
+            v-model="email"
+            class="mb-4 w-full"
+            type="email"
+            :placeholder="t('forgotPassword.fields.emailPlaceholder')"
+            :disabled="isLoading"
+            size="lg"
+          />
+        </UFormField>
+
+        <UButton :loading="isLoading" :disabled="!email || isLoading" color="primary" size="lg" block type="submit">
+          {{ t('forgotPassword.buttons.sendCode') }}
+        </UButton>
+      </UForm>
+    </div>
+
+    <!-- Step 2: OTP + Password Reset -->
+    <div v-if="currentStep === 2" class="space-y-4">
+      <UForm
+        :schema="resetSchema"
+        :state="{ otp: otpCode, newPassword, confirmPassword }"
+        class="space-y-4"
+        @submit="resetPassword"
+      >
+        <!-- OTP Input -->
+        <div class="flex flex-col items-center w-full">
+          <UFormField
+            name="otp"
+            required
+            class="w-full flex flex-col items-center"
+            :label="t('forgotPassword.fields.otp')"
+          >
+            <UInput
+              id="otp"
+              v-model="otpCode"
+              size="xl"
+              type="text"
+              maxlength="6"
+              inputmode="numeric"
+              pattern="[0-9]*"
+              class="w-32 text-center"
+              :placeholder="$t('verify.codePlaceholder')"
+              :disabled="isLoading"
+              @input="handleOtpInput"
+            />
+          </UFormField>
+        </div>
+        <USeparator />
+        <!-- New Password -->
+        <UFormField :label="t('forgotPassword.fields.newPassword')" name="newPassword" required>
+          <UInput
+            v-model="newPassword"
+            type="password"
+            :placeholder="t('forgotPassword.fields.newPasswordPlaceholder')"
+            :disabled="isLoading"
+            class="w-full"
+          />
+        </UFormField>
+
+        <!-- Confirm Password -->
+        <UFormField :label="t('forgotPassword.fields.confirmPassword')" name="confirmPassword" required>
+          <UInput
+            v-model="confirmPassword"
+            type="password"
+            :placeholder="t('forgotPassword.fields.confirmPasswordPlaceholder')"
+            :disabled="isLoading"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UButton
+          :loading="isLoading"
+          :disabled="otpCode.length !== 6 || !newPassword || !confirmPassword || isLoading"
+          color="primary"
+          size="lg"
+          block
+          type="submit"
+        >
+          {{ t('forgotPassword.buttons.resetPassword') }}
+        </UButton>
+      </UForm>
+
+      <!-- Resend Code -->
+      <div class="text-center">
+        <UButton :disabled="resendCooldown > 0 || isLoading" variant="ghost" size="sm" @click="resendCode">
+          {{
+            resendCooldown > 0
+              ? t('forgotPassword.messages.resendIn', { seconds: resendCooldown })
+              : t('forgotPassword.buttons.resendCode')
+          }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Back to Login -->
+    <div class="text-center mt-10">
+      <NuxtLink to="/login" class="text-sm text-primary hover:text-primary/80">
+        {{ t('forgotPassword.buttons.backToLogin') }}
+      </NuxtLink>
+    </div>
+  </CustomPageCard>
+</template>

package/app/pages/login.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { signIn } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+definePageMeta({
+  layout: 'auth',
+  public: true
+})
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: t('login.title'),
+  description: t('login.title')
+})
+
+const router = useRouter()
+const route = useRoute()
+const portalAuth = useRuntimeConfig().public.portalAuth
+const fields = computed(() => [
+  {
+    name: 'email',
+    type: 'text' as const,
+    label: t('login.fields.email'),
+    placeholder: t('login.fields.emailPlaceholder'),
+    required: true
+  },
+  {
+    name: 'password',
+    label: t('login.fields.password'),
+    type: 'password' as const,
+    placeholder: t('login.fields.passwordPlaceholder')
+  },
+  {
+    name: 'remember',
+    label: t('login.fields.remember'),
+    type: 'checkbox' as const
+  }
+])
+
+const providers = computed(() =>
+  [
+    {
+      enabled: portalAuth.googleEnabled,
+      label: t('login.providers.google'),
+      icon: 'i-simple-icons-google',
+      onClick: async () => {
+        await handleGoogleLogin()
+      }
+    },
+    {
+      enabled: portalAuth.githubEnabled,
+      label: t('login.providers.github'),
+      icon: 'i-simple-icons-github',
+      onClick: async () => {
+        await handleGitHubLogin()
+      }
+    }
+  ].filter((provider) => provider.enabled)
+)
+
+const schema = computed(() =>
+  z.object({
+    email: z.email(t('login.validation.invalidEmail')),
+    password: z.string().min(8, t('login.validation.passwordMinLength'))
+  })
+)
+
+const loading = ref(false)
+const errorMessage = ref<string | null>(null)
+const successMessage = ref<string | null>(null)
+type Schema = {
+  email: string
+  password: string
+  remember?: boolean
+}
+
+const onSubmit = async (payload: FormSubmitEvent<Schema>) => {
+  console.log('Submitted', payload)
+
+  loading.value = true
+  try {
+    await signIn.email(
+      {
+        email: payload.data.email,
+        password: payload.data.password
+      },
+      {
+        onRequest: () => {
+          loading.value = true
+          errorMessage.value = null
+        },
+        onResponse: (_ctx) => {
+          // Typically handled by onError or onSuccess
+        },
+        onSuccess: async (_ctx) => {
+          // Check for pending invitation and accept it after successful login
+          const pendingInvitationId = localStorage.getItem('pendingInvitationId')
+          if (pendingInvitationId) {
+            try {
+              const { authClient } = await import('@nuxt-customer-portal/core/app/utils/auth-client')
+              const result = await authClient.organization.acceptInvitation({
+                invitationId: pendingInvitationId
+              })
+              if (result.error) {
+                console.error('Failed to accept invitation after login:', result.error)
+              } else {
+                console.log('Invitation accepted successfully after login')
+                localStorage.removeItem('pendingInvitationId')
+              }
+            } catch (err) {
+              console.error('Error accepting invitation after login:', err)
+            }
+          }
+          const redirectTo = route.query.redirect?.toString() || '/dashboard'
+          window.location.href = redirectTo
+        },
+        onError: (ctx) => {
+          const error = ctx.error
+          console.error('Credentials login error:', error)
+
+          // Check if the error indicates email needs verification
+          if (error?.message?.includes('Email not verified')) {
+            // Redirect to OTP verification page with login context
+            const redirectTo = route.query.redirect?.toString() || '/dashboard'
+            router.push(
+              `/verify-email?email=${encodeURIComponent(payload.data.email)}&redirect=${encodeURIComponent(redirectTo)}&from=login`
+            )
+          } else {
+            errorMessage.value = error?.message || t('login.errors.invalidCredentials')
+          }
+          loading.value = false
+        }
+      }
+    )
+  } catch (error) {
+    console.error('Unexpected login error:', error)
+    errorMessage.value = t('login.errors.unexpectedError')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleGitHubLogin = async () => {
+  loading.value = true
+  errorMessage.value = null
+  try {
+    const redirectTo = route.query.redirect?.toString() || '/dashboard'
+    await signIn.social({ provider: 'github', callbackURL: redirectTo })
+  } catch (error) {
+    console.error('GitHub sign in initiation failed:', error)
+    errorMessage.value = t('login.errors.githubError')
+    loading.value = false
+  }
+}
+
+const handleGoogleLogin = async () => {
+  loading.value = true
+  errorMessage.value = null
+  try {
+    const redirectTo = route.query.redirect?.toString() || '/dashboard'
+    await signIn.social({ provider: 'google', callbackURL: redirectTo })
+  } catch (error) {
+    console.error('Google sign in initiation failed:', error)
+    errorMessage.value = t('login.errors.googleError')
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <UAlert v-if="successMessage" color="success" :description="successMessage" variant="outline" />
+    <UAlert v-if="errorMessage" color="error" :description="errorMessage" variant="outline" />
+
+    <!-- Company Logo -->
+    <div class="flex justify-center mb-8">
+      <AppLogo class="w-auto h-8 shrink-0" />
+    </div>
+
+    <UAuthForm
+      :fields="fields"
+      :schema="schema"
+      :providers="providers"
+      :title="t('login.title')"
+      icon="i-lucide-lock"
+      :loading="loading"
+      :submit="{ label: t('login.submitButton') }"
+      @submit="onSubmit"
+    >
+      <template #description>
+        <template v-if="portalAuth.registrationMode === 'open'">
+          {{ t('login.description') }}
+          <ULink to="/signup" class="text-primary font-medium">{{ t('login.signupLink') }} </ULink>.
+        </template>
+      </template>
+
+      <template #password-hint>
+        <ULink to="/forgot-password" class="text-primary font-medium" tabindex="-1">{{
+          t('login.forgotPassword')
+        }}</ULink>
+      </template>
+
+      <template #footer>
+        {{ t('login.footer') }}
+        <ULink :to="portalAuth.termsUrl" class="text-primary font-medium">{{ t('login.termsLink') }}</ULink
+        >.
+      </template>
+    </UAuthForm>
+  </div>
+</template>