@xenterprises/nuxt-x-auth-better 0.3.1 → 0.4.0

package/app/middleware/organization.global.ts

@@ -0,0 +1,125 @@
+import type { OrganizationRoute } from "../composables/types";
+
+function isOrganizationRoute(rule: string | OrganizationRoute): rule is OrganizationRoute {
+  return (
+    typeof rule === "object" &&
+    rule !== null &&
+    typeof rule.path === "string"
+  );
+}
+
+function routeMatches(path: string, rule: string | OrganizationRoute): boolean {
+  if (typeof rule === "string") {
+    return path === rule || path.startsWith(`${rule}/`);
+  }
+  return path === rule.path || path.startsWith(`${rule.path}/`);
+}
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const config = useAppConfig();
+  const { getCurrentUser } = useXAuth();
+  const {
+    isEnabled,
+    activeOrganization,
+    setActiveOrganization,
+    getFullOrganization,
+    activeMember,
+    hasPermission,
+  } = useOrganization();
+
+  if (!isEnabled.value) {
+    return;
+  }
+
+  const orgConfig = config.xAuth?.organization || {};
+  const redirects = orgConfig.redirects || {};
+  const notMemberPath = redirects.notMember || "/org";
+  const noPermissionPath = redirects.noPermission || "/org";
+  const loginPath = config.xAuth?.redirects?.login || "/auth/login";
+
+  const protectedRoutes: Array<string | OrganizationRoute> =
+    orgConfig.protectedRoutes || ["/org"];
+
+  const isProtectedRoute = protectedRoutes.some((rule) =>
+    routeMatches(to.path, rule)
+  );
+
+  if (!isProtectedRoute) {
+    return;
+  }
+
+  let user: { id: string } | null = null;
+  try {
+    user = await getCurrentUser();
+  } catch {
+    user = null;
+  }
+
+  if (!user) {
+    return navigateTo(loginPath);
+  }
+
+  const slug = to.params?.slug;
+  if (!slug || typeof slug !== "string") {
+    return;
+  }
+
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    let org: { id: string } | null = null;
+    try {
+      const result = await getFullOrganization(undefined, slug);
+      org = result && typeof result === "object" && !("error" in result)
+        ? (result as { id: string })
+        : null;
+    } catch {
+      org = null;
+    }
+
+    if (!org) {
+      return navigateTo(notMemberPath);
+    }
+
+    await setActiveOrganization(org.id);
+  }
+
+  if (!activeMember.value) {
+    return navigateTo(notMemberPath);
+  }
+
+  const matchedRule = protectedRoutes.find((rule) =>
+    routeMatches(to.path, rule)
+  );
+
+  if (matchedRule && isOrganizationRoute(matchedRule)) {
+    const role = activeMember.value.role || "";
+    const roles = role.split(",").map((r) => r.trim());
+
+    if (matchedRule.requireOwner === true && !roles.includes("owner")) {
+      return navigateTo(noPermissionPath);
+    }
+
+    if (
+      matchedRule.requireAdmin === true &&
+      !roles.includes("owner") &&
+      !roles.includes("admin")
+    ) {
+      return navigateTo(noPermissionPath);
+    }
+
+    if (matchedRule.requireMember === true && !activeMember.value) {
+      return navigateTo(notMemberPath);
+    }
+
+    if (
+      matchedRule.requiredPermissions &&
+      Array.isArray(matchedRule.requiredPermissions)
+    ) {
+      const hasAll = matchedRule.requiredPermissions.every((check) =>
+        hasPermission({ role, permissions: check.permissions })
+      );
+      if (!hasAll) {
+        return navigateTo(noPermissionPath);
+      }
+    }
+  }
+});

package/app/pages/auth/handler/invitation.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center p-4 bg-neutral-50 dark:bg-neutral-950">
+    <div class="w-full max-w-sm text-center">
+      <div v-if="loading" class="py-8">
+        <UIcon name="i-lucide-loader-2" class="size-10 animate-spin text-primary mx-auto" />
+        <p class="mt-4 text-muted">Processing invitation...</p>
+      </div>
+
+      <div v-else-if="success" class="py-8">
+        <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-success/10 ring-1 ring-success/20">
+          <UIcon name="i-lucide-check" class="size-8 text-success" />
+        </div>
+        <h3 class="text-lg font-semibold text-highlighted">Invitation accepted</h3>
+        <p class="text-sm text-muted mt-1">Redirecting you to the organization...</p>
+      </div>
+
+      <div v-else class="py-8">
+        <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-error/10 ring-1 ring-error/20">
+          <UIcon name="i-lucide-x" class="size-8 text-error" />
+        </div>
+        <h3 class="text-lg font-semibold text-highlighted">Invitation failed</h3>
+        <p class="text-sm text-muted mt-1">{{ error }}</p>
+        <UButton class="mt-6" to="/org" label="Go to organizations" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const router = useRouter()
+const { acceptInvitation, isEnabled } = useOrganization()
+
+const loading = ref(true)
+const success = ref(false)
+const error = ref('')
+
+onMounted(async () => {
+  const id = route.query.id
+  if (!id || typeof id !== 'string') {
+    error.value = 'Invitation ID is missing.'
+    loading.value = false
+    return
+  }
+
+  if (!isEnabled.value) {
+    error.value = 'Organizations are not enabled.'
+    loading.value = false
+    return
+  }
+
+  const result = await acceptInvitation(id)
+  if (result && !result.error) {
+    success.value = true
+    setTimeout(() => {
+      router.push('/org')
+    }, 1500)
+  } else {
+    error.value = result?.error || 'Could not accept invitation.'
+  }
+  loading.value = false
+})
+</script>

package/app/pages/org/[slug]/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <UButton to="/org" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+          <h1 class="font-semibold text-lg">{{ organization?.name || 'Organization' }}</h1>
+        </div>
+        <div class="flex items-center gap-2">
+          <UButton size="sm" variant="outline" :to="`/org/${slug}/members`" label="Members" />
+          <UButton size="sm" variant="outline" :to="`/org/${slug}/invitations`" label="Invitations" />
+          <UButton size="sm" variant="outline" :to="`/org/${slug}/teams`" label="Teams" />
+          <UButton size="sm" :to="`/org/${slug}/settings`" label="Settings" />
+        </div>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <div class="grid md:grid-cols-3 gap-6">
+        <div class="md:col-span-2 space-y-6">
+          <XAuthTeamList :organization="organization" />
+        </div>
+        <div class="space-y-6">
+          <XAuthOrganizationSwitcher />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, setActiveOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+      await setActiveOrganization(result.id)
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/invitations.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <UButton :to="`/org/${slug}`" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+        <h1 class="font-semibold text-lg">Invitations</h1>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <XAuthOrganizationInvitations />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/invite.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center p-4">
+    <div class="w-full max-w-md p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <XAuthOrganizationInvite :organization="organization" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/members.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <UButton :to="`/org/${slug}`" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+        <h1 class="font-semibold text-lg">Members</h1>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <XAuthOrganizationMembers :organization="organization" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/settings.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <UButton :to="`/org/${slug}`" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+        <h1 class="font-semibold text-lg">Settings</h1>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <div class="max-w-2xl p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+        <XAuthOrganizationSettings :organization="organization" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/teams/[teamId]/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <UButton :to="`/org/${slug}`" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+        <h1 class="font-semibold text-lg">Team</h1>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <div class="grid md:grid-cols-2 gap-6">
+        <div class="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+          <XAuthTeamSettings :team="team" :organization="organization" />
+        </div>
+        <div class="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+          <XAuthTeamMembers :team="team" :organization="organization" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+const teamId = route.params.teamId
+
+const { activeOrganization, getFullOrganization, listTeams } = useOrganization()
+const organization = ref(null)
+const team = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+
+  const teams = await listTeams(organization.value?.id)
+  if (teams && !teams.error) {
+    team.value = teams.find((t) => t.id === teamId) || null
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/teams/create.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center p-4">
+    <div class="w-full max-w-md p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <XAuthTeamCreate :organization="organization" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/[slug]/teams/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <UButton :to="`/org/${slug}`" variant="ghost" color="neutral" icon="i-lucide-arrow-left" size="sm" />
+        <h1 class="font-semibold text-lg">Teams</h1>
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <XAuthTeamList :organization="organization" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const slug = route.params.slug
+
+const { activeOrganization, getFullOrganization } = useOrganization()
+const organization = ref(null)
+
+onMounted(async () => {
+  if (!activeOrganization.value || activeOrganization.value.slug !== slug) {
+    const result = await getFullOrganization(undefined, slug)
+    if (result && !result.error) {
+      organization.value = result
+    }
+  } else {
+    organization.value = activeOrganization.value
+  }
+})
+
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/create.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center p-4">
+    <div class="w-full max-w-md p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <XAuthOrganizationCreate />
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/app/pages/org/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <nav class="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
+        <h1 class="font-semibold text-lg">Organizations</h1>
+        <UButton size="sm" to="/org/create" label="Create" icon="i-lucide-plus" />
+      </div>
+    </nav>
+
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <XAuthOrganizationSwitcher />
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xenterprises/nuxt-x-auth-better",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "BetterAuth authentication layer for Nuxt",
   "license": "SEE LICENSE IN LICENSE",
   "author": "X Enterprises",
@@ -24,7 +24,7 @@
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
-    "typecheck": "nuxi typecheck",
+    "typecheck": "nuxt prepare && nuxi typecheck",
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage"
@@ -52,11 +52,14 @@
     "@playwright/test": "^1.57.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/coverage-v8": "^3.0.0",
-    "better-auth": "^1.4.10",
+    "better-auth": "^1.6.5",
     "happy-dom": "^16.0.0",
     "nuxt": "^4.0.3",
     "typescript": "^5.6.3",
     "vitest": "^3.0.0",
     "vue": "latest"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}