@nuxtagentic/identity 0.0.0-stage → 0.1.0

package/runtime/components/settings/SingleSignOn.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+import { computed, onMounted, ref } from 'vue'
+import type { SsoProvider } from '@cloudconfig/core/client'
+import { useOrganizationAdmin, useSsoClient } from '../../composables/useOrganizationAccess'
+import { fieldUi, formFieldUi } from '../../settings-ui'
+
+const sso = useSsoClient()
+const { organization, isAdmin } = useOrganizationAdmin()
+const authBase = String(
+  (useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined)?.authBasePath ??
+    '/api/auth',
+)
+const providers = ref<SsoProvider[]>([])
+const available = ref(true)
+const isBusy = ref(false)
+const error = ref('')
+const adding = ref(false)
+const protocol = ref<'oidc' | 'saml'>('oidc')
+const form = ref({
+  providerId: '',
+  issuer: '',
+  domain: '',
+  clientId: '',
+  clientSecret: '',
+  entryPoint: '',
+  cert: '',
+  metadata: '',
+})
+const verification = ref<{ providerId: string; name: string; value: string }>()
+const origin = computed(() => (import.meta.client ? location.origin : ''))
+const own = computed(() =>
+  providers.value.filter(
+    (provider) => String(provider.organizationId) === String(organization.value?.id),
+  ),
+)
+
+async function load() {
+  try {
+    providers.value = await sso.providers()
+  } catch (cause) {
+    const status = (cause as { status?: number }).status
+    // Without the SSO plugin the routes do not exist; hide the section.
+    if (status === 404) {
+      available.value = false
+    } else {
+      error.value = cause instanceof Error ? cause.message : 'Could not load identity providers.'
+    }
+  }
+}
+onMounted(load)
+
+async function run(work: () => Promise<unknown>) {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  try {
+    await work()
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Something went wrong.'
+  } finally {
+    isBusy.value = false
+  }
+}
+
+function slugify(value: string) {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+async function register() {
+  const organizationId = Number(organization.value?.id)
+  if (!organizationId) {
+    return
+  }
+  await run(async () => {
+    const providerId = slugify(
+      form.value.providerId || `${organization.value?.slug}-${protocol.value}`,
+    )
+    if (protocol.value === 'oidc') {
+      await sso.registerOidc({
+        providerId,
+        issuer: form.value.issuer.trim(),
+        domain: form.value.domain.trim().toLowerCase(),
+        clientId: form.value.clientId.trim(),
+        clientSecret: form.value.clientSecret.trim(),
+        organizationId,
+      })
+    } else {
+      await sso.registerSaml({
+        providerId,
+        issuer: form.value.issuer.trim(),
+        domain: form.value.domain.trim().toLowerCase(),
+        entryPoint: form.value.entryPoint.trim(),
+        organizationId,
+        ...(form.value.metadata.trim() ? { idpMetadata: form.value.metadata.trim() } : {}),
+        ...(form.value.cert.trim() ? { cert: form.value.cert.trim() } : {}),
+      })
+    }
+    adding.value = false
+    form.value = {
+      providerId: '',
+      issuer: '',
+      domain: '',
+      clientId: '',
+      clientSecret: '',
+      entryPoint: '',
+      cert: '',
+      metadata: '',
+    }
+    await load()
+  })
+}
+
+async function requestVerification(provider: SsoProvider) {
+  await run(async () => {
+    const domain = provider.domain.split(',')[0]!.trim()
+    verification.value = {
+      providerId: provider.providerId,
+      ...(await sso.requestDomainVerification(provider.providerId, domain)),
+    }
+  })
+}
+
+async function verify(provider: SsoProvider) {
+  await run(async () => {
+    await sso.verifyDomain(provider.providerId)
+    verification.value = undefined
+    await load()
+  })
+}
+
+async function remove(provider: SsoProvider) {
+  await run(async () => {
+    await sso.remove(provider.providerId)
+    await load()
+  })
+}
+
+async function copy(value: string) {
+  error.value = ''
+  try {
+    await navigator.clipboard.writeText(value)
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not copy to the clipboard.'
+  }
+}
+</script>
+
+<template>
+  <SettingsSection
+    v-if="available && organization"
+    title="Single sign-on"
+    description="People on your verified email domain sign in through your identity provider and join this organization."
+  >
+    <p
+      v-if="error"
+      role="alert"
+      class="text-[13px] text-error"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-if="!isAdmin"
+      class="text-sm text-muted"
+    >
+      Organization owners and admins set up single sign-on.
+    </p>
+    <template v-else>
+      <div
+        v-for="provider in own"
+        :key="provider.providerId"
+        class="grid gap-2 rounded-md border border-default p-3"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="min-w-0">
+            <p class="truncate text-sm text-highlighted">{{ provider.issuer }}</p>
+            <p class="mt-0.5 truncate text-[13px] text-muted">
+              {{ provider.domain }} ·
+              {{ provider.domainVerified ? 'domain verified' : 'domain not verified yet' }}
+            </p>
+          </div>
+          <div class="flex shrink-0 gap-2">
+            <UButton
+              v-if="!provider.domainVerified"
+              label="Verify domain"
+              color="neutral"
+              variant="outline"
+              :disabled="isBusy"
+              class="h-9 rounded-md px-3 text-sm font-normal"
+              @click="requestVerification(provider)"
+            />
+            <UButton
+              label="Remove"
+              color="neutral"
+              variant="ghost"
+              :disabled="isBusy"
+              class="h-9 rounded-md px-3 text-sm font-normal"
+              @click="remove(provider)"
+            />
+          </div>
+        </div>
+        <div
+          v-if="verification?.providerId === provider.providerId"
+          class="grid gap-2"
+        >
+          <p class="text-[13px] text-muted">
+            Add this TXT record at your DNS host, then verify. Sign-in through this provider starts
+            working once the domain is verified.
+          </p>
+          <UInput
+            :model-value="verification.name"
+            readonly
+            aria-label="TXT record name"
+            :ui="fieldUi"
+          />
+          <UInput
+            :model-value="verification.value"
+            readonly
+            aria-label="TXT record value"
+            :ui="fieldUi"
+          />
+          <div class="flex gap-2">
+            <UButton
+              label="Copy value"
+              color="neutral"
+              variant="outline"
+              size="sm"
+              @click="copy(verification.value)"
+            />
+            <UButton
+              label="Verify"
+              color="neutral"
+              size="sm"
+              :loading="isBusy"
+              @click="verify(provider)"
+            />
+          </div>
+        </div>
+      </div>
+      <form
+        v-if="adding"
+        class="grid gap-4"
+        @submit.prevent="register"
+      >
+        <div
+          class="grid grid-cols-2 gap-1 rounded-lg border border-default p-0.5"
+          role="radiogroup"
+          aria-label="Protocol"
+        >
+          <UButton
+            v-for="value in ['oidc', 'saml'] as const"
+            :key="value"
+            :label="value === 'oidc' ? 'OpenID Connect' : 'SAML 2.0'"
+            color="neutral"
+            :variant="protocol === value ? 'soft' : 'ghost'"
+            role="radio"
+            :aria-checked="protocol === value"
+            class="h-8 justify-center rounded-md text-[13px]"
+            @click="protocol = value"
+          />
+        </div>
+        <UFormField
+          label="Email domain"
+          description="Comma-separate several domains served by the same provider."
+          :ui="formFieldUi"
+        >
+          <UInput
+            v-model="form.domain"
+            required
+            placeholder="acme.com"
+            :ui="fieldUi"
+          />
+        </UFormField>
+        <UFormField
+          :label="protocol === 'oidc' ? 'Issuer URL' : 'IdP entity ID'"
+          :ui="formFieldUi"
+        >
+          <UInput
+            v-model="form.issuer"
+            required
+            :placeholder="
+              protocol === 'oidc' ? 'https://acme.okta.com' : 'http://www.okta.com/exk…'
+            "
+            :ui="fieldUi"
+          />
+        </UFormField>
+        <template v-if="protocol === 'oidc'">
+          <UFormField
+            label="Client ID"
+            :ui="formFieldUi"
+          >
+            <UInput
+              v-model="form.clientId"
+              required
+              :ui="fieldUi"
+            />
+          </UFormField>
+          <UFormField
+            label="Client secret"
+            :ui="formFieldUi"
+          >
+            <UInput
+              v-model="form.clientSecret"
+              required
+              type="password"
+              autocomplete="off"
+              :ui="fieldUi"
+            />
+          </UFormField>
+          <p class="text-[13px] text-muted">
+            Redirect URI for your identity provider:
+            <code class="break-all text-highlighted">
+              {{ origin }}{{ authBase }}/sso/callback/{{
+                slugify(form.providerId || `${organization.slug}-oidc`)
+              }}
+            </code>
+          </p>
+        </template>
+        <template v-else>
+          <UFormField
+            label="Single sign-on URL"
+            :ui="formFieldUi"
+          >
+            <UInput
+              v-model="form.entryPoint"
+              required
+              type="url"
+              :ui="fieldUi"
+            />
+          </UFormField>
+          <UFormField
+            label="IdP metadata XML"
+            description="Or paste the signing certificate below."
+            :ui="formFieldUi"
+          >
+            <UTextarea
+              v-model="form.metadata"
+              :rows="3"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            label="Signing certificate (PEM)"
+            :ui="formFieldUi"
+          >
+            <UTextarea
+              v-model="form.cert"
+              :rows="3"
+              class="w-full"
+            />
+          </UFormField>
+          <p class="text-[13px] text-muted">
+            ACS URL for your identity provider:
+            <code class="break-all text-highlighted">
+              {{ origin }}{{ authBase }}/sso/saml2/sp/acs/{{
+                slugify(form.providerId || `${organization.slug}-saml`)
+              }}
+            </code>
+          </p>
+        </template>
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            type="submit"
+            label="Add identity provider"
+            :loading="isBusy"
+            class="h-10 rounded-md px-4 text-sm font-medium"
+          />
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            label="Cancel"
+            :disabled="isBusy"
+            class="h-10 rounded-md px-4 text-sm font-normal"
+            @click="adding = false"
+          />
+        </div>
+      </form>
+      <UButton
+        v-else
+        type="button"
+        color="neutral"
+        variant="outline"
+        icon="i-lucide-plus"
+        label="Add identity provider"
+        class="h-10 w-fit rounded-md px-4 text-sm font-normal"
+        @click="adding = true"
+      />
+    </template>
+  </SettingsSection>
+</template>

package/runtime/components/settings/TwoFactor.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { useCloudConfigAccount, useRuntimeConfig } from '#imports'
+import { useCloudConfigTwoFactor } from '@cloudconfig/nuxt/two-factor'
+import { useCurrentUser } from '../../composables/useCurrentUser'
+import { ref, onMounted } from 'vue'
+
+import type { TwoFactorStatus } from '@cloudconfig/core/client'
+
+const { hasPassword } = defineProps<{ hasPassword?: boolean }>()
+const auth = useCloudConfigTwoFactor()
+const account = useCloudConfigAccount()
+const user = useCurrentUser()
+const config = useRuntimeConfig().public.cloudconfig as { twoFactor?: { passkey: boolean } }
+const passkeyEnabled = config.twoFactor?.passkey !== false
+const status = ref<TwoFactorStatus | null>(null)
+const keys = ref<{ id: string; name?: string | undefined }[]>([])
+const isBusy = ref(false)
+const isEnrollingEmail = ref(false)
+const code = ref('')
+const password = ref('')
+const error = ref('')
+const message = ref('')
+
+async function load() {
+  status.value = await account.getTwoFactorStatus()
+  if (passkeyEnabled) {
+    const result = await auth.passkey.listUserPasskeys()
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Could not load passkeys.')
+    }
+    keys.value = result.data ?? []
+  }
+}
+
+async function run(action: () => Promise<void>) {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  message.value = ''
+  try {
+    await action()
+  } catch (cause) {
+    error.value =
+      cause instanceof Error ? cause.message : 'Could not update two-factor authentication.'
+  } finally {
+    isBusy.value = false
+  }
+}
+
+onMounted(() => run(load))
+
+function sendCode() {
+  return run(async () => {
+    const result = await auth.twoFactor.sendOtp({})
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Could not send the verification code.')
+    }
+    isEnrollingEmail.value = true
+    code.value = ''
+    message.value = `We sent a verification code to ${user.value?.email}.`
+  })
+}
+
+function verifyCode() {
+  return run(async () => {
+    const result = await auth.twoFactor.verifyOtp({ code: code.value })
+    if (result.error) {
+      throw new Error(result.error.message ?? 'The code is invalid or expired.')
+    }
+    isEnrollingEmail.value = false
+    code.value = ''
+    await load()
+    message.value = 'Email two-factor authentication is enabled.'
+  })
+}
+
+function usePasskey(add = false) {
+  return run(async () => {
+    const result =
+      add || !keys.value.length ? await auth.passkey.addPasskey({}) : await auth.signIn.passkey()
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Could not verify your passkey.')
+    }
+    isEnrollingEmail.value = false
+    await load()
+    message.value = 'Passkey two-factor authentication is enabled.'
+  })
+}
+
+function removePasskey(id: string) {
+  return run(async () => {
+    const result = await auth.passkey.deletePasskey({ id })
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Could not remove the passkey.')
+    }
+    await load()
+  })
+}
+
+function disable() {
+  return run(async () => {
+    const result = await auth.twoFactor.disable({ password: password.value })
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Could not turn off two-factor authentication.')
+    }
+    isEnrollingEmail.value = false
+    password.value = ''
+    await load()
+    message.value = 'Two-factor authentication is turned off.'
+  })
+}
+</script>
+
+<template>
+  <SettingsSection
+    title="Two-factor authentication"
+    description="Choose an email code or a passkey to verify after signing in."
+  >
+    <p
+      v-if="error"
+      role="alert"
+      class="text-sm text-error"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-if="message"
+      role="status"
+      class="text-sm text-muted"
+    >
+      {{ message }}
+    </p>
+    <p
+      v-if="!status && !error"
+      role="status"
+      class="text-sm text-muted"
+    >
+      Loading two-factor settings…
+    </p>
+    <template v-if="status">
+      <p class="text-sm text-muted">
+        {{
+          status.enabled
+            ? `Enabled · ${status.method === 'passkey' ? 'Passkey' : 'Email code'}`
+            : 'Two-factor authentication is off.'
+        }}
+      </p>
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          label="Use email code"
+          color="neutral"
+          variant="outline"
+          :disabled="isBusy"
+          @click="sendCode"
+        />
+        <UButton
+          v-if="passkeyEnabled"
+          label="Use passkey"
+          color="neutral"
+          variant="outline"
+          :disabled="isBusy"
+          @click="usePasskey()"
+        />
+      </div>
+      <form
+        v-if="isEnrollingEmail"
+        class="flex flex-wrap items-end gap-2"
+        @submit.prevent="verifyCode"
+      >
+        <UFormField label="Verification code">
+          <UInput
+            v-model="code"
+            autocomplete="one-time-code"
+            inputmode="numeric"
+            pattern="[0-9]{6}"
+            maxlength="6"
+            required
+            :disabled="isBusy"
+            autofocus
+          />
+        </UFormField>
+        <UButton
+          type="submit"
+          label="Verify and enable"
+          :loading="isBusy"
+          :disabled="code.length !== 6"
+        />
+        <UButton
+          label="Resend code"
+          color="neutral"
+          variant="link"
+          :disabled="isBusy"
+          @click="sendCode"
+        />
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="link"
+          :disabled="isBusy"
+          @click="isEnrollingEmail = false"
+        />
+      </form>
+      <div
+        v-if="keys.length"
+        class="space-y-2"
+      >
+        <div
+          v-for="key in keys"
+          :key="key.id"
+          class="flex items-center justify-between gap-3 text-sm"
+        >
+          <span class="text-muted">{{ key.name || 'Passkey' }}</span>
+          <UButton
+            label="Remove"
+            color="neutral"
+            variant="link"
+            :disabled="isBusy"
+            @click="removePasskey(key.id)"
+          />
+        </div>
+        <UButton
+          label="Add passkey"
+          color="neutral"
+          variant="link"
+          :disabled="isBusy"
+          @click="usePasskey(true)"
+        />
+      </div>
+      <div
+        v-if="status.enabled"
+        class="flex flex-wrap items-end gap-2"
+      >
+        <UFormField
+          v-if="hasPassword"
+          label="Current password"
+        >
+          <UInput
+            v-model="password"
+            type="password"
+            autocomplete="current-password"
+            :disabled="isBusy"
+          />
+        </UFormField>
+        <UButton
+          label="Turn off 2FA"
+          color="neutral"
+          variant="link"
+          :disabled="isBusy || (hasPassword && !password)"
+          @click="disable"
+        />
+      </div>
+    </template>
+  </SettingsSection>
+</template>