@nuxt-customer-portal/authentication 0.3.0

package/app/pages/signup.vue

@@ -0,0 +1,359 @@
+<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'
+import type { ApiError } from '@nuxt-customer-portal/core/shared/types/index'
+
+definePageMeta({
+  layout: 'auth',
+  public: true
+})
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: t('signup.title'),
+  description: t('signup.title')
+})
+
+const toast = useToast()
+const portalAuth = useRuntimeConfig().public.portalAuth
+
+const invitationId = useRoute().query.invitationId
+if (
+  portalAuth.registrationMode === 'disabled' ||
+  (portalAuth.registrationMode === 'invitation-only' && !invitationId)
+) {
+  await navigateTo('/login')
+}
+
+const fields = computed(() => [
+  {
+    name: 'name',
+    type: 'text' as const,
+    label: t('signup.fields.name'),
+    placeholder: t('signup.fields.namePlaceholder')
+  },
+  {
+    name: 'email',
+    type: 'text' as const,
+    label: t('signup.fields.email'),
+    placeholder: t('signup.fields.emailPlaceholder')
+  },
+  {
+    name: 'password',
+    label: t('signup.fields.password'),
+    type: 'password' as const,
+    placeholder: t('signup.fields.passwordPlaceholder')
+  }
+])
+
+const providers = computed(() =>
+  [
+    {
+      enabled: portalAuth.googleEnabled,
+      label: t('signup.providers.google'),
+      icon: 'i-simple-icons-google',
+      onClick: async () => {
+        await handleGoogleLogin()
+      }
+    },
+    {
+      enabled: portalAuth.githubEnabled,
+      label: t('signup.providers.github'),
+      icon: 'i-simple-icons-github',
+      onClick: async () => {
+        await handleGitHubLogin()
+      }
+    }
+  ].filter((provider) => provider.enabled)
+)
+
+const schema = computed(() =>
+  z.object({
+    name: z.string().min(1, t('signup.validation.nameRequired')),
+    email: z.email(t('signup.validation.invalidEmail')),
+    password: z.string().min(8, t('signup.validation.passwordMinLength'))
+  })
+)
+
+type Schema = {
+  name: string
+  email: string
+  password: string
+}
+
+const route = useRoute()
+const error = ref<string | null>(null)
+const isLoading = ref(false)
+const invitationInfo = ref<{ organizationName?: string; role?: string; email?: string } | null>(null)
+const acceptingInvitation = ref(false)
+
+// User store for checking authentication
+const userStore = useUserStore()
+const { isAuthenticated, currentUser } = storeToRefs(userStore)
+
+const fetchInvitationDetails = async (id: string) => {
+  try {
+    // Use custom endpoint to bypass inviter membership check
+    const data = await $fetch<{
+      organizationName?: string
+      role?: string
+      email?: string
+    }>(`/api/organizations/get-invitation?id=${encodeURIComponent(id)}`)
+
+    if (data) {
+      invitationInfo.value = {
+        organizationName: data.organizationName || undefined,
+        role: data.role,
+        email: data.email
+      }
+    }
+  } catch (err) {
+    console.error('Failed to fetch invitation details:', err)
+  }
+}
+
+// Handle invitation acceptance for logged-in users
+const handleLoggedInInvitation = async (invId: string) => {
+  acceptingInvitation.value = true
+
+  try {
+    // Fetch invitation details using custom endpoint to bypass inviter membership check
+    let invitationData: {
+      email?: string
+      role?: string
+      organizationName?: string
+      status?: string
+      expiresAt?: Date | string
+    } | null = null
+
+    try {
+      invitationData = await $fetch<{
+        email?: string
+        role?: string
+        organizationName?: string
+        status?: string
+        expiresAt?: Date | string
+      }>(`/api/organizations/get-invitation?id=${encodeURIComponent(invId)}`)
+    } catch (fetchErr: unknown) {
+      const apiError = fetchErr as { data?: { message?: string }; message?: string }
+      const errorMessage =
+        apiError?.data?.message ||
+        apiError?.message ||
+        t('signup.invitation.loggedIn.error', { error: 'Invitation not found' })
+      error.value = errorMessage
+      toast.add({
+        title: t('common.error'),
+        description: errorMessage,
+        color: 'error'
+      })
+      acceptingInvitation.value = false
+      return
+    }
+
+    if (!invitationData) {
+      const errorMessage = t('signup.invitation.loggedIn.error', { error: 'Invitation not found' })
+      error.value = errorMessage
+      toast.add({
+        title: t('common.error'),
+        description: errorMessage,
+        color: 'error'
+      })
+      acceptingInvitation.value = false
+      return
+    }
+
+    // Check if invitation email matches logged-in user's email
+    const userEmail = currentUser.value?.email?.toLowerCase()
+    const invitationEmail = invitationData.email?.toLowerCase()
+
+    if (userEmail !== invitationEmail) {
+      const errorMessage = t('signup.invitation.loggedIn.emailMismatch')
+      error.value = errorMessage
+      toast.add({
+        title: t('common.error'),
+        description: errorMessage,
+        color: 'error'
+      })
+      acceptingInvitation.value = false
+      return
+    }
+
+    // Accept the invitation using custom endpoint to bypass inviter membership check
+    // This is necessary because admins who create organizations are removed as members
+    try {
+      const result = await $fetch<{ success: boolean; organization?: { id: string; name: string } }>(
+        '/api/organizations/accept-invitation',
+        {
+          method: 'POST',
+          body: { invitationId: invId }
+        }
+      )
+
+      if (!result || !result.success) {
+        throw new Error('Failed to accept invitation')
+      }
+
+      // Set the organization as active if user doesn't have an active organization
+      const userStore = useUserStore()
+      if (!userStore.activeOrganizationId && result.organization) {
+        await userStore.setActiveOrganizationId(result.organization.id)
+      }
+    } catch (err: unknown) {
+      const apiError = err as { data?: { message?: string }; message?: string }
+      const errorMessage =
+        apiError?.data?.message ||
+        apiError?.message ||
+        t('signup.invitation.loggedIn.error', { error: 'Unknown error' })
+      error.value = errorMessage
+      toast.add({
+        title: t('common.error'),
+        description: errorMessage,
+        color: 'error'
+      })
+      acceptingInvitation.value = false
+      return
+    }
+
+    // Success - show success message and redirect
+    const successMessage = t('signup.invitation.loggedIn.success', {
+      organizationName: invitationData.organizationName || 'the organization',
+      role: invitationData.role || 'member'
+    })
+    toast.add({
+      title: t('common.success'),
+      description: successMessage,
+      color: 'success'
+    })
+
+    localStorage.removeItem('pendingInvitationId')
+
+    // Redirect to dashboard after short delay
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+    await navigateTo('/dashboard')
+  } catch (err) {
+    console.error('Error handling logged-in invitation:', err)
+    const errorMessage = t('signup.invitation.loggedIn.error', {
+      error: err instanceof Error ? err.message : 'Unknown error'
+    })
+    error.value = errorMessage
+    toast.add({
+      title: t('common.error'),
+      description: errorMessage,
+      color: 'error'
+    })
+  } finally {
+    acceptingInvitation.value = false
+  }
+}
+
+const onSubmit = async (payload: FormSubmitEvent<Schema>) => {
+  console.log('Submitted', payload)
+  error.value = null
+  isLoading.value = true
+
+  // Store invitation ID if present
+  const invId = route.query.invitationId as string | undefined
+  if (invId) {
+    localStorage.setItem('pendingInvitationId', invId)
+  }
+
+  try {
+    const response = await authClient.signUp.email({
+      name: payload.data.name,
+      email: payload.data.email,
+      password: payload.data.password
+    })
+    if (response.error) {
+      const errorMessage = response.error.message || t('signup.errors.unknownError')
+      error.value = errorMessage
+      toast.add({ title: t('signup.errors.errorTitle'), description: errorMessage, color: 'error' })
+    } else {
+      // Redirect to OTP verification page with email parameter and invitation ID if present
+      const verifyUrl = `/verify-email?email=${encodeURIComponent(payload.data.email)}${invId ? `&invitationId=${encodeURIComponent(invId)}` : ''}`
+      navigateTo(verifyUrl)
+    }
+  } catch (err) {
+    console.error('Email signup failed:', err)
+    const apiError = err as ApiError
+    const errorMessage = apiError.message || t('signup.errors.unknownError')
+    error.value = errorMessage
+    toast.add({ title: t('signup.errors.errorTitle'), description: errorMessage, color: 'error' })
+  } finally {
+    isLoading.value = false
+  }
+}
+const invId = route.query.invitationId as string | undefined
+if (invId) {
+  // Check if user is already logged in
+  if (isAuthenticated.value && currentUser.value) {
+    // User is logged in, try to accept invitation automatically
+    await handleLoggedInInvitation(invId)
+  } else {
+    // User is not logged in, store for later use
+    localStorage.setItem('pendingInvitationId', invId)
+    // Try to fetch invitation details to show context
+    fetchInvitationDetails(invId)
+  }
+}
+
+const loading = ref(false)
+const errorMessage = ref<string | null>(null)
+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="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('signup.title')"
+      :loading="loading"
+      :submit="{ label: t('signup.submitButton') }"
+      @submit="onSubmit"
+    >
+      <template #description>
+        {{ t('signup.description') }}
+        <ULink to="/login" class="text-primary font-medium">{{ t('signup.loginLink') }} </ULink>.
+      </template>
+
+      <template #footer>
+        {{ t('signup.footer') }}
+        <ULink :to="portalAuth.termsUrl" class="text-primary font-medium">{{ t('signup.termsLink') }}</ULink
+        >.
+      </template>
+    </UAuthForm>
+  </div>
+</template>

package/app/pages/verify-email.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const email = ref(decodeURIComponent((route.query.email as string) || ''))
+const otpCode = ref('')
+const isLoading = ref(false)
+const error = ref('')
+const success = ref('')
+const resendCooldown = ref(0)
+let cooldownTimer: NodeJS.Timeout | null = null
+const emailRef = ref<{ input: HTMLInputElement } | null>(null)
+const invitationId = ref<string | null>(null)
+const acceptingInvitation = ref(false)
+onMounted(async () => {
+  emailRef.value?.input?.focus()
+
+  // Check for invitation ID in query params or localStorage
+  const invIdFromQuery = route.query.invitationId as string | undefined
+  const invIdFromStorage = import.meta.client ? localStorage.getItem('pendingInvitationId') : null
+  if (invIdFromQuery || invIdFromStorage) {
+    invitationId.value = invIdFromQuery || invIdFromStorage || null
+    if (import.meta.client && invIdFromQuery) {
+      localStorage.setItem('pendingInvitationId', invIdFromQuery)
+    }
+  }
+
+  // Only auto-send OTP for login verification, not signup verification
+  // Signup verification already sends an OTP during the signup process
+  const isLoginVerification = route.query.redirect || route.query.from === 'login'
+  if (email.value && isLoginVerification) {
+    console.log('Login verification detected, sending OTP...')
+    // Reset cooldown to ensure resendCode can run
+    resendCooldown.value = 0
+    await resendCode()
+  } else if (email.value) {
+    console.log('Signup verification detected, starting cooldown timer...')
+    // For signup verification, start the cooldown timer since an OTP was already sent
+    // This prevents immediate resend after page load
+    startCooldownTimer()
+  }
+})
+
+// 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)
+}
+
+// Clean up timer on unmount
+onUnmounted(() => {
+  if (cooldownTimer) {
+    clearInterval(cooldownTimer)
+  }
+})
+// 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
+}
+
+// Verify the OTP code
+const verifyCode = async () => {
+  if (otpCode.value.length !== 6) {
+    error.value = t('verify.invalidCodeLength')
+    return
+  }
+
+  isLoading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    // For users who are verifying during login, we need to sign them in
+    // Check if this is a login verification (has redirect param) or signup verification
+    const isLoginVerification = route.query.redirect || route.query.from === 'login'
+    console.log('Verification context:', { isLoginVerification, email: email.value, redirect: route.query.redirect })
+
+    let result
+    if (isLoginVerification) {
+      // For login verification, use signIn.emailOtp (sign-in type OTP)
+      console.log('Using signIn.emailOtp for login verification')
+      result = await authClient.signIn.emailOtp({
+        email: email.value,
+        otp: otpCode.value
+      })
+      console.log('signIn.emailOtp result:', result)
+    } else {
+      // For signup verification, use verifyEmail (email-verification type OTP)
+      console.log('Using verifyEmail for signup verification')
+      result = await authClient.emailOtp.verifyEmail({
+        email: email.value,
+        otp: otpCode.value
+      })
+      console.log('verifyEmail result:', result)
+    }
+
+    // Check for success - signIn.emailOtp returns user data, verifyEmail fallback returns status
+    const isSuccess = result.data?.user || (result.data as unknown as { status: boolean })?.status === true
+
+    console.log('Verification success check:', {
+      isSuccess,
+      hasUser: !!result.data?.user,
+      hasStatus: !!(result.data as unknown as { status: boolean })?.status
+    })
+
+    if (isSuccess) {
+      success.value = t('verify.success')
+      console.log('Verification successful, checking session...')
+
+      // For signup verification, the user might not be signed in yet
+      // Don't try to accept invitation here - wait until after login
+      if (!isLoginVerification) {
+        console.log('Signup verification successful, user may need to sign in')
+        // Keep invitation ID in localStorage for acceptance after login
+        if (invitationId.value && import.meta.client) {
+          localStorage.setItem('pendingInvitationId', invitationId.value)
+        }
+        // Show a message and redirect to login
+        const invitationMessage = invitationId.value
+          ? ' After signing in, your invitation will be accepted automatically.'
+          : ''
+        success.value = t('verify.success') + invitationMessage + ' Please sign in to continue.'
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+        const redirectTo = (route.query.redirect as string) || '/dashboard'
+        const loginPath = '/login'
+        const fullPath = `${loginPath}?email=${encodeURIComponent(email.value)}&redirect=${encodeURIComponent(redirectTo)}`
+        console.log('Redirecting to login:', fullPath)
+        window.location.href = fullPath
+        return
+      }
+
+      // For login verification, user should be signed in
+      // Wait a moment for session to be established
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // Check if session is established
+      try {
+        const sessionCheck = await authClient.getSession()
+        console.log('Session after verification:', sessionCheck)
+      } catch (sessionError) {
+        console.log('Session check error:', sessionError)
+      }
+
+      // Accept invitation if present (user is now signed in)
+      if (invitationId.value) {
+        await acceptPendingInvitation()
+      }
+
+      console.log('Redirecting...')
+      // The user should now be automatically signed in after email verification
+      // Use window.location for a full page refresh to ensure session state is updated
+      const redirectTo = (route.query.redirect as string) || '/dashboard'
+      console.log('Redirecting to:', redirectTo)
+      window.location.href = redirectTo
+    } else {
+      console.log('Verification failed:', result.error)
+      error.value = (result.error?.message as string) || t('verify.invalidCode')
+    }
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    error.value = errorMessage || t('verify.error')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Resend OTP code
+const resendCode = async () => {
+  console.log('resendCode called, cooldown:', resendCooldown.value)
+  if (resendCooldown.value > 0) {
+    console.log('Cooldown active, skipping resend')
+    return
+  }
+
+  console.log('Starting resend process...')
+  isLoading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    // Determine OTP type based on context
+    const isLoginVerification = route.query.redirect || route.query.from === 'login'
+    const otpType = isLoginVerification ? 'sign-in' : 'email-verification'
+
+    await authClient.emailOtp
+      .sendVerificationOtp({
+        email: email.value,
+        type: otpType
+      })
+      .then((result) => {
+        if (result.data?.success) {
+          success.value = t('verify.codeSent')
+          // Start the cooldown timer after successful resend
+          startCooldownTimer()
+        } else {
+          error.value = result.error?.message || t('verify.resendError')
+        }
+      })
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    error.value = errorMessage || t('verify.resendError')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Accept pending invitation
+const acceptPendingInvitation = async () => {
+  if (!invitationId.value) {
+    return
+  }
+
+  acceptingInvitation.value = true
+  try {
+    console.log('Accepting invitation:', invitationId.value)
+    const result = await authClient.organization.acceptInvitation({
+      invitationId: invitationId.value
+    })
+
+    if (result.error) {
+      console.error('Failed to accept invitation:', result.error)
+      // Don't show error to user, just log it - they can accept manually later
+    } else {
+      console.log('Invitation accepted successfully')
+      // Clear stored invitation ID
+      if (import.meta.client) {
+        localStorage.removeItem('pendingInvitationId')
+      }
+    }
+  } catch (err) {
+    console.error('Error accepting invitation:', err)
+  } finally {
+    acceptingInvitation.value = false
+  }
+}
+
+// Auto-submit when 6 digits are entered
+watch(otpCode, (newValue) => {
+  if (newValue.length === 6) {
+    verifyCode()
+  }
+})
+
+definePageMeta({
+  layout: 'centerform',
+  public: true
+})
+
+useSeoMeta({
+  title: () => t('verify.title')
+})
+</script>
+
+<template>
+  <CustomPageCard
+    :title="$t('verify.title')"
+    :description="$t('verify.subtitle', { email })"
+    :success="success"
+    :error="error"
+  >
+    <!-- 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('verify.enterCode')">
+        <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>
+
+    <!-- Resend Code -->
+    <div class="text-center">
+      <UButton :disabled="resendCooldown > 0 || isLoading" variant="ghost" size="sm" @click="resendCode">
+        {{ resendCooldown > 0 ? t('verify.resendIn', { seconds: resendCooldown }) : t('verify.resendCode') }}
+      </UButton>
+    </div>
+  </CustomPageCard>
+</template>