@nuxtagentic/identity 0.0.0-stage → 0.1.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+Proprietary software. All rights reserved.
+
+Use of Nuxt Agentic packages and starter materials is governed by the applicable
+commercial agreement supplied with a purchase. This repository does not grant
+an open-source license or permission to redistribute the packages as a competing
+template or module library.
+
+Third-party dependencies retain their respective licenses. This notice does not
+replace or modify those licenses.

package/README.md

@@ -1,3 +1,53 @@
-# Temporary Holding Version
+# Identity
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@nuxtagentic/identity` owns sign-in, the current account, organization selection,
+profile and avatar editing, organization logos, and security controls. It installs
+Nuxt UI and the CloudConfig Nuxt module. It can be installed independently of the
+workspace shell.
+
+Add `@nuxtagentic/identity` to Nuxt's `modules` and include `identityModels` from
+`@nuxtagentic/identity/schema` in the host's `cloud.config.ts`. The schema owns
+identity image storage; CloudConfig's `auth` configuration owns users and sessions.
+Cloudflare avatar and logo uploads require an R2 bucket with the `FILES` binding.
+This starter declares it in `deploy.r2` and `deploy.r2Binding`; local uploads use
+CloudConfig's development storage.
+
+Configure GitHub and Google with the CloudConfig auth CLI for the supplied
+sign-in screens. Set `auth.organizations: true` for workspace management and
+`auth.twoFactor: true` for the supplied security controls. Account administration
+is a separate optional capability in `auth.admin`.
+
+The package registers `/sign-in`, `/sign-up`, `/two-factor`, the default layout,
+and the `auth` route middleware. Identity also registers `/dashboard/organizations`.
+The root app consumes its optional profile-settings
+contribution. `useCurrentUser`, `useAccountSession`, `useWorkspaceScope`, and
+`useWorkspaces` expose session and organization state to dependent modules.
+
+In **Settings → Organization**, choose **Edit logo** to upload, replace, or remove
+an organization's logo, then **Save logo**. Owners and admins can update logos;
+the auth API enforces these permissions. New organizations can include a logo
+when created. Supported formats are JPG, PNG, WebP, and GIF, up to 2 MB. Logos
+appear in the organization list and workspace switcher. Logo editing uses the
+`organizationLogo` URL parameter so direct links and browser Back/Forward work.
+
+Identity image uploads share the existing `avatar` storage model and retain their
+uploaded asset when saving fails, so retries do not upload the same file again.
+`useProfileNamePreview` keeps live name previews within Identity's state ownership.
+
+## Single sign-on and provisioning
+
+With `auth.sso: true` (and `@better-auth/sso` installed), **Settings → Organization →
+Single sign-on** lets owners and admins register an OIDC or SAML identity provider and
+verify their email domain with a DNS TXT record. People on that domain choose **Use single
+sign-on** on the sign-in page and join the organization.
+
+With `auth.scim: true`, **Directory provisioning** mints a SCIM token and shows the base
+URL to paste into Okta, Entra ID or Google Workspace. Provisioned people join the
+organization; deprovisioning removes the membership, which ends their access on the next
+request and revokes their personal integration connections. Owners are never removed by
+a directory.
+
+Access rules see the active organization and role on `user.organization`; use
+`orgRows`, `ownOrgRows` and `hasOrgRole` from `@cloudconfig/core`.
+
+See [module installation](../README.md) for local package setup and schema composition.

package/module.ts

@@ -0,0 +1,61 @@
+import {
+  createResolver,
+  defineNuxtModule,
+  addComponentsDir,
+  addLayout,
+  addRouteMiddleware,
+} from '@nuxt/kit'
+import { registerWorkspaceModule } from '@nuxtagentic/kit'
+
+export default defineNuxtModule({
+  meta: { name: '@nuxtagentic/identity' },
+  moduleDependencies: {
+    '@nuxt/ui': {},
+    '@cloudconfig/nuxt': {},
+  },
+  setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    nuxt.hook('prepare:types', ({ tsConfig }) => {
+      tsConfig.compilerOptions ??= {}
+      tsConfig.compilerOptions.paths ??= {}
+      tsConfig.compilerOptions.paths['#cloudconfig/server'] = [
+        nuxt.options.nitro.alias!['#cloudconfig/server']!,
+      ]
+    })
+    registerWorkspaceModule(
+      {
+        id: 'identity',
+        runtime: resolver.resolve('./runtime'),
+        feature: { from: resolver.resolve('./runtime/workspace.ts'), name: 'identityContribution' },
+        metadata: resolver.resolve('./runtime/shared/agent.ts'),
+      },
+      nuxt,
+    )
+    addComponentsDir({ path: resolver.resolve('./runtime/components'), pathPrefix: true })
+    addLayout({ src: resolver.resolve('./runtime/layouts/default.vue') }, 'default')
+    addRouteMiddleware({ name: 'auth', path: resolver.resolve('./runtime/middleware/auth.ts') })
+    nuxt.hook('pages:extend', (pages) => {
+      const authConfig = nuxt.options.runtimeConfig.public.cloudconfig as
+        { twoFactor?: unknown } | undefined
+      const authPages = authConfig?.twoFactor
+        ? ['sign-in', 'sign-up', 'two-factor']
+        : ['sign-in', 'sign-up']
+      for (const name of authPages) {
+        if (!pages.some((page) => page.path === `/${name}`)) {
+          pages.push({
+            name,
+            path: `/${name}`,
+            file: resolver.resolve(`./runtime/pages/${name}.vue`),
+          })
+        }
+      }
+      if (!pages.some((page) => page.path === '/dashboard/organizations')) {
+        pages.push({
+          name: 'dashboard-organizations',
+          path: '/dashboard/organizations',
+          file: resolver.resolve('./runtime/pages/organizations.vue'),
+        })
+      }
+    })
+  },
+})

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@nuxtagentic/identity",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "module.ts",
+    "runtime",
+    "schema.ts",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "exports": {
+    ".": "./module.ts",
+    "./package.json": "./package.json",
+    "./schema": "./schema.ts",
+    "./runtime/*.vue": "./runtime/*.vue",
+    "./runtime/*.css": "./runtime/*.css",
+    "./runtime/*.json": "./runtime/*.json",
+    "./runtime/*.svg": "./runtime/*.svg",
+    "./runtime/*": "./runtime/*.ts"
+  },
+  "dependencies": {
+    "@better-auth/passkey": "^1.7.7",
+    "@cloudconfig/core": "0.2.0-beta.2",
+    "@cloudconfig/nuxt": "0.2.0-beta.2",
+    "@iconify-json/lucide": "^1.2.132",
+    "@iconify-json/simple-icons": "^1.2.96",
+    "@nuxt/kit": "4.6.1",
+    "@nuxt/ui": "^4.11.1",
+    "@vueuse/core": "^14.4.0",
+    "better-auth": "^1.7.7",
+    "@nuxtagentic/kit": "0.1.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.6.1",
+    "vue": "^3.5.43"
+  },
+  "cloudconfig": {
+    "models": "identityModels"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "Sign-in, sessions and organizations for Nuxt Agentic.",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+  }
 }

package/runtime/components/BrandMark.vue

@@ -0,0 +1,8 @@
+<template>
+  <span
+    class="shrink-0 font-mono text-[22px] font-normal leading-none"
+    aria-hidden="true"
+  >
+    [c]
+  </span>
+</template>

package/runtime/components/CloudMascot.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg
+    viewBox="0 0 80 72"
+    fill="none"
+    shape-rendering="crispEdges"
+    aria-hidden="true"
+    class="shrink-0"
+  >
+    <path
+      d="M26 8h24v4h8v8h4v8h8v4h4v20h-4v4H10v-4H6V36h4v-4h12V20h4Z"
+      class="fill-(--ui-text-highlighted)"
+    />
+    <path
+      d="M30 12h16v4h8v8h4v8h10v4h2v12h-4v4H14v-4h-4V38h4v-2h12V24h4Z"
+      class="fill-(--ui-bg)"
+    />
+    <path
+      d="M14 44h12v4h36v-4h8v4h-4v4H14Z"
+      class="fill-(--gray-300)"
+    />
+    <path
+      d="M32 30h4v8h-4zm16 0h4v8h-4zM38 42h10v4H38z"
+      class="fill-(--ui-text-highlighted)"
+    />
+    <path
+      d="M60 10h4v4h4v4h-4v4h-4v-4h-4v-4h4Z"
+      class="fill-[#f97316]"
+    />
+    <path
+      d="M28 64h24v4H28zM22 66h36v2H22z"
+      class="fill-(--gray-600)"
+    />
+  </svg>
+</template>

package/runtime/components/CloudconfigLogo.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg
+    viewBox="0 0 80 72"
+    fill="none"
+    shape-rendering="crispEdges"
+    aria-hidden="true"
+    class="shrink-0"
+  >
+    <path
+      d="M26 8h24v4h8v8h4v8h8v4h4v20h-4v4H10v-4H6V36h4v-4h12V20h4Z"
+      class="fill-(--ui-text-highlighted)"
+    />
+    <path
+      d="M30 12h16v4h8v8h4v8h10v4h2v12h-4v4H14v-4h-4V38h4v-2h12V24h4Z"
+      class="fill-(--ui-bg)"
+    />
+    <path
+      d="M14 44h12v4h36v-4h8v4h-4v4H14Z"
+      class="fill-(--ui-bg-accented)"
+    />
+    <path
+      d="M32 30h4v8h-4zm16 0h4v8h-4zM38 42h10v4H38z"
+      class="fill-(--ui-text-highlighted)"
+    />
+    <path
+      d="M60 10h4v4h4v4h-4v4h-4v-4h-4v-4h4Z"
+      class="fill-orange-500"
+    />
+    <path
+      d="M28 64h24v4H28zM22 66h36v2H22z"
+      class="fill-(--ui-border-accented)"
+    />
+  </svg>
+</template>

package/runtime/components/GithubAuthPanel.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { useCloudConfigAuth, useRuntimeConfig } from '#imports'
+import { ref } from 'vue'
+import { useSsoClient } from '../composables/useOrganizationAccess'
+
+const { title, description, label } = defineProps<{
+  title: string
+  description: string
+  label: string
+}>()
+
+const auth = useCloudConfigAuth()
+const isGoogleEnabled = (useRuntimeConfig().public.authProviders ?? ['github', 'google']).includes(
+  'google',
+)
+const isBusy = ref(false)
+const provider = ref<'google' | 'github' | 'sso'>('google')
+const error = ref('')
+const sso = useSsoClient()
+const showSso = ref(false)
+const email = ref('')
+
+/** Enterprise sign-in: the email domain picks the organization's identity provider. */
+async function continueWithSso() {
+  if (isBusy.value || !email.value.includes('@')) {
+    return
+  }
+  isBusy.value = true
+  provider.value = 'sso'
+  error.value = ''
+  try {
+    window.location.assign(
+      await sso.signIn({
+        email: email.value.trim(),
+        callbackURL: '/dashboard',
+        errorCallbackURL: '/sign-in',
+      }),
+    )
+  } catch (cause) {
+    error.value =
+      cause instanceof Error && !/not found/i.test(cause.message)
+        ? cause.message
+        : 'No single sign-on is set up for that email domain.'
+    isBusy.value = false
+  }
+}
+
+async function continueWithProvider(value: 'google' | 'github') {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  provider.value = value
+  error.value = ''
+  try {
+    const result = await auth.signIn.social({
+      provider: value,
+      callbackURL: '/dashboard',
+    })
+    if (result.error) {
+      throw new Error(result.error.message ?? `${label} failed.`)
+    }
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : `${label} failed.`
+    isBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="flex w-full flex-col items-center text-center">
+    <CloudMascot class="h-[90px] w-[100px]" />
+    <h1
+      class="mt-7 mb-2 text-[32px] leading-[1.15] font-normal tracking-[-0.03em] text-highlighted"
+    >
+      {{ title }}
+    </h1>
+    <p class="mb-8 text-[15px] leading-[22px] text-pretty text-muted">
+      {{ description }}
+    </p>
+    <SocialAuthButton
+      v-if="isGoogleEnabled"
+      label="Continue with Google"
+      busy-label="Redirecting to Google"
+      icon="i-simple-icons-google"
+      variant="solid"
+      :busy="isBusy && provider === 'google'"
+      :disabled="isBusy"
+      class="mb-3"
+      @click="continueWithProvider('google')"
+    />
+    <SocialAuthButton
+      :label="label"
+      busy-label="Redirecting to GitHub"
+      icon="i-simple-icons-github"
+      :variant="isGoogleEnabled ? 'outline' : 'solid'"
+      :busy="isBusy && provider === 'github'"
+      :disabled="isBusy"
+      @click="continueWithProvider('github')"
+    />
+    <form
+      v-if="showSso"
+      class="mt-3 flex w-full gap-2"
+      @submit.prevent="continueWithSso"
+    >
+      <UInput
+        v-model="email"
+        type="email"
+        required
+        autocomplete="email"
+        placeholder="you@company.com"
+        aria-label="Work email"
+        class="min-w-0 flex-1"
+        :ui="{ base: 'h-10' }"
+      />
+      <UButton
+        type="submit"
+        label="Continue"
+        color="neutral"
+        :loading="isBusy && provider === 'sso'"
+        :disabled="isBusy"
+        class="h-10 px-4"
+      />
+    </form>
+    <UButton
+      v-else
+      label="Use single sign-on"
+      color="neutral"
+      variant="link"
+      class="mt-3 text-[13px]"
+      @click="showSso = true"
+    />
+    <p
+      v-if="error"
+      role="alert"
+      class="mt-2 text-sm text-error"
+    >
+      {{ error }}
+    </p>
+    <p class="mt-6 text-[13px] leading-5 text-pretty text-muted">
+      By continuing, you agree to the
+      <a
+        href="#"
+        class="text-highlighted focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+      >
+        Terms
+      </a>
+      and
+      <a
+        href="#"
+        class="text-highlighted focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+      >
+        Privacy Policy
+      </a>
+      .
+    </p>
+  </section>
+</template>

package/runtime/components/ProfileSettings.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { useCloudConfigAccount } from '#imports'
+import { useCurrentUser } from '../composables/useCurrentUser'
+import { ref, shallowRef, watch, onBeforeUnmount } from 'vue'
+import { useProfileNamePreview } from '../composables/useProfileNamePreview'
+import { useIdentityImageUpload } from '../composables/useIdentityImageUpload'
+
+import { fieldUi, formFieldUi } from '../settings-ui'
+
+const emit = defineEmits<{ finish: [] }>()
+const account = useCloudConfigAccount()
+const user = useCurrentUser()
+const name = ref(user.value?.name ?? '')
+const image = ref(user.value?.image ?? null)
+const avatarFile = shallowRef<File | null>(null)
+const imageUpload = useIdentityImageUpload()
+const profilePreview = useProfileNamePreview()
+watch(
+  name,
+  (value) => {
+    profilePreview.value = value
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => {
+  profilePreview.value = null
+})
+const isSaving = ref(false)
+const error = ref('')
+async function saveProfile() {
+  if (isSaving.value) {
+    return false
+  }
+  const value = name.value.trim()
+  if (!value) {
+    error.value = 'Enter your name.'
+    return false
+  }
+  if (
+    value === user.value?.name &&
+    image.value === (user.value?.image ?? null) &&
+    !avatarFile.value
+  ) {
+    return true
+  }
+
+  isSaving.value = true
+  error.value = ''
+  try {
+    let avatar = image.value
+    if (avatarFile.value) {
+      avatar = await imageUpload.upload(avatarFile.value)
+    }
+    await account.updateUser({ name: value, image: avatar })
+    if (user.value) {
+      user.value = { ...user.value, name: value, image: avatar }
+    }
+    name.value = value
+    image.value = avatar
+    avatarFile.value = null
+    imageUpload.clear()
+    return true
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not update your profile.'
+    return false
+  } finally {
+    isSaving.value = false
+  }
+}
+
+defineExpose({ save: saveProfile })
+</script>
+
+<template>
+  <form
+    id="settings-profile"
+    @submit.prevent="emit('finish')"
+  >
+    <SettingsSection
+      title="Profile"
+      description="Shown in the sidebar."
+    >
+      <UFormField
+        label="Avatar"
+        :ui="formFieldUi"
+      >
+        <SettingsImageField
+          v-model:file="avatarFile"
+          v-model:image="image"
+          :name="name"
+          :identity="user?.id"
+          :disabled="isSaving"
+        />
+      </UFormField>
+      <UFormField
+        label="Name"
+        :ui="formFieldUi"
+      >
+        <UInput
+          v-model="name"
+          required
+          maxlength="200"
+          autocomplete="name"
+          :disabled="isSaving"
+          :ui="fieldUi"
+        />
+      </UFormField>
+      <UFormField
+        label="Email"
+        :ui="formFieldUi"
+      >
+        <UInput
+          :model-value="user?.email ?? ''"
+          type="email"
+          autocomplete="email"
+          readonly
+          title="Email is managed by your sign-in provider"
+          :ui="fieldUi"
+        />
+      </UFormField>
+      <p
+        v-if="error"
+        role="alert"
+        class="text-[13px] text-error"
+      >
+        {{ error }}
+      </p>
+    </SettingsSection>
+  </form>
+</template>

package/runtime/components/SettingsSection.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { title, description } = defineProps<{ title: string; description: string }>()
+</script>
+
+<template>
+  <section
+    class="grid gap-x-8 gap-y-4 border-t border-default py-6 sm:grid-cols-[minmax(0,200px)_minmax(0,1fr)]"
+  >
+    <div>
+      <h2 class="text-[15px] leading-normal font-semibold text-highlighted">{{ title }}</h2>
+      <p class="mt-1 text-[13px] leading-normal text-muted">{{ description }}</p>
+    </div>
+    <div class="grid min-w-0 content-start gap-4">
+      <slot />
+    </div>
+  </section>
+</template>

package/runtime/components/SocialAuthButton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const { label, busyLabel, icon, variant, busy } = defineProps<{
+  label: string
+  busyLabel: string
+  icon: string
+  variant: 'solid' | 'outline'
+  busy: boolean
+}>()
+</script>
+
+<template>
+  <UButton
+    block
+    color="neutral"
+    :variant="variant"
+    :aria-busy="busy"
+    :aria-label="busy ? busyLabel : label"
+    class="relative h-11 w-full overflow-hidden rounded-[22px] border-0 p-0 text-[15px] font-medium ring-0 transition-[background-color,color,opacity,scale] duration-[240ms,240ms,160ms,120ms] ease-out motion-reduce:transition-none motion-reduce:active:scale-100"
+    :class="
+      busy &&
+      'bg-primary text-inverted disabled:cursor-default disabled:bg-primary disabled:text-inverted disabled:opacity-100'
+    "
+  >
+    <span
+      v-if="busy"
+      aria-hidden="true"
+      class="absolute inset-y-0 left-0 w-1/2 animate-[carousel_1.8s_ease-in-out_infinite] bg-linear-to-r from-transparent via-(--ui-text-inverted)/20 to-transparent transition-opacity duration-500 starting:opacity-0 motion-reduce:hidden"
+    />
+    <span
+      :aria-hidden="busy"
+      class="absolute inset-0 flex items-center justify-center gap-2.5 transition-[opacity,translate] duration-[180ms,240ms] ease-out motion-reduce:transition-none"
+      :class="busy ? '-translate-y-2.5 opacity-0' : 'translate-y-0 opacity-100'"
+    >
+      <UIcon
+        :name="icon"
+        class="size-4 shrink-0"
+      />
+      <span>{{ label }}</span>
+    </span>
+    <span
+      :aria-hidden="!busy"
+      class="absolute inset-0 flex items-center justify-center transition-[opacity,translate] duration-[180ms,240ms] ease-out motion-reduce:transition-none"
+      :class="busy ? 'translate-y-0 opacity-100' : 'translate-y-2.5 opacity-0'"
+    >
+      {{ busyLabel }}
+    </span>
+  </UButton>
+</template>

package/runtime/components/UserAvatar.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { AvatarProps } from '@nuxt/ui'
+import { initialsOf } from '../utils/format'
+
+const {
+  name,
+  identity: avatarIdentity,
+  src = null,
+  size = 'sm',
+} = defineProps<{
+  name: string
+  identity?: string | number
+  src?: string | null
+  size?: AvatarProps['size']
+}>()
+const color = computed(() => {
+  const identity = avatarIdentity ?? name
+  const hash =
+    typeof identity === 'number'
+      ? identity
+      : [...identity].reduce((value, character) => (value * 31 + character.charCodeAt(0)) >>> 0, 0)
+  return (hash * 47 + 20) % 360
+})
+</script>
+
+<template>
+  <UAvatar
+    :src="src ?? undefined"
+    :alt="name"
+    :text="initialsOf(name) || '?'"
+    :size="size"
+    :style="{ '--avatar-hue': color }"
+    :ui="{ root: 'bg-avatar text-black', fallback: 'font-semibold text-black' }"
+  />
+</template>