@drmhse/authos-cli 0.1.0

package/dist/bin.js

@@ -0,0 +1,1170 @@
+#!/usr/bin/env node
+'use strict';
+
+var commander = require('commander');
+var path2 = require('path');
+var prompts2 = require('prompts');
+var child_process = require('child_process');
+var fs = require('fs');
+var pc = require('picocolors');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var path2__namespace = /*#__PURE__*/_interopNamespace(path2);
+var prompts2__default = /*#__PURE__*/_interopDefault(prompts2);
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
+var pc__default = /*#__PURE__*/_interopDefault(pc);
+
+function detectFramework(cwd) {
+  const packageJsonPath = path2__namespace.join(cwd, "package.json");
+  if (!fs__namespace.existsSync(packageJsonPath)) {
+    return "unknown";
+  }
+  try {
+    const content = fs__namespace.readFileSync(packageJsonPath, "utf8");
+    const pkg = JSON.parse(content);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps["nuxt"] || deps["nuxt3"]) {
+      return "nuxt";
+    }
+    if (deps["next"]) {
+      return "next";
+    }
+    if (deps["vue"]) {
+      return "vue";
+    }
+    if (deps["react"]) {
+      return "react";
+    }
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+function getAdapterPackage(framework) {
+  switch (framework) {
+    case "react":
+    case "next":
+      return "@drmhse/authos-react";
+    case "vue":
+    case "nuxt":
+      return "@drmhse/authos-vue";
+    default:
+      return null;
+  }
+}
+function writeFile(filePath, content) {
+  const dir = path2__namespace.dirname(filePath);
+  if (!fs__namespace.existsSync(dir)) {
+    fs__namespace.mkdirSync(dir, { recursive: true });
+  }
+  fs__namespace.writeFileSync(filePath, content, "utf8");
+}
+function fileExists(filePath) {
+  return fs__namespace.existsSync(filePath);
+}
+function appendToFile(filePath, content) {
+  if (fs__namespace.existsSync(filePath)) {
+    const existing = fs__namespace.readFileSync(filePath, "utf8");
+    if (!existing.includes(content.trim())) {
+      fs__namespace.appendFileSync(filePath, "\n" + content);
+    }
+  } else {
+    writeFile(filePath, content);
+  }
+}
+function findComponentsDir(cwd) {
+  const candidates = [
+    "src/components",
+    "components",
+    "app/components",
+    "src/app/components"
+  ];
+  for (const candidate of candidates) {
+    const fullPath = path2__namespace.join(cwd, candidate);
+    if (fs__namespace.existsSync(fullPath)) {
+      return fullPath;
+    }
+  }
+  return path2__namespace.join(cwd, "src", "components");
+}
+function getFileExtension(framework) {
+  switch (framework) {
+    case "vue":
+    case "nuxt":
+      return ".vue";
+    case "react":
+    case "next":
+    default:
+      return ".tsx";
+  }
+}
+var log = {
+  info: (msg) => console.log(pc__default.default.blue("i"), msg),
+  success: (msg) => console.log(pc__default.default.green("\u2713"), msg),
+  warn: (msg) => console.log(pc__default.default.yellow("!"), msg),
+  error: (msg) => console.log(pc__default.default.red("\u2717"), msg),
+  step: (msg) => console.log(pc__default.default.cyan("\u2192"), msg)
+};
+function getFrameworkName(framework) {
+  switch (framework) {
+    case "react":
+      return "React";
+    case "vue":
+      return "Vue";
+    case "next":
+      return "Next.js";
+    case "nuxt":
+      return "Nuxt";
+    default:
+      return "Unknown";
+  }
+}
+
+// src/commands/init.ts
+async function initCommand(options = {}) {
+  const cwd = options.cwd || process.cwd();
+  log.info("Initializing AuthOS...\n");
+  let framework = detectFramework(cwd);
+  if (framework === "unknown") {
+    log.warn("Could not detect project framework from package.json.");
+    const response = await prompts2__default.default({
+      type: "select",
+      name: "framework",
+      message: "Select your framework:",
+      choices: [
+        { title: "React", value: "react" },
+        { title: "Next.js", value: "next" },
+        { title: "Vue", value: "vue" },
+        { title: "Nuxt", value: "nuxt" }
+      ]
+    });
+    if (!response.framework) {
+      log.error("Initialization cancelled.");
+      process.exit(1);
+    }
+    framework = response.framework;
+  } else {
+    log.success(`Detected ${getFrameworkName(framework)} project`);
+  }
+  const adapterPackage = getAdapterPackage(framework);
+  if (!adapterPackage) {
+    log.error("Unsupported framework.");
+    process.exit(1);
+  }
+  const urlResponse = await prompts2__default.default({
+    type: "text",
+    name: "baseUrl",
+    message: "Enter your AuthOS base URL:",
+    initial: "https://auth.example.com",
+    validate: (value) => {
+      try {
+        new URL(value);
+        return true;
+      } catch {
+        return "Please enter a valid URL";
+      }
+    }
+  });
+  if (!urlResponse.baseUrl) {
+    log.error("Initialization cancelled.");
+    process.exit(1);
+  }
+  const baseUrl = urlResponse.baseUrl;
+  if (!options.skipInstall) {
+    log.step(`Installing ${adapterPackage}...`);
+    try {
+      const packageManager = detectPackageManager(cwd);
+      const installCmd = getInstallCommand(packageManager, adapterPackage);
+      child_process.execSync(installCmd, { cwd, stdio: "inherit" });
+      log.success(`Installed ${adapterPackage}`);
+    } catch (error) {
+      log.error(`Failed to install ${adapterPackage}`);
+      log.info(`You can install it manually: npm install ${adapterPackage}`);
+    }
+  }
+  const envPath = path2__namespace.join(cwd, ".env");
+  const envLocalPath = path2__namespace.join(cwd, ".env.local");
+  const envContent = `AUTHOS_BASE_URL=${baseUrl}
+`;
+  const targetEnvPath = framework === "next" || framework === "nuxt" ? envLocalPath : envPath;
+  if (fileExists(targetEnvPath)) {
+    appendToFile(targetEnvPath, envContent);
+    log.success(`Updated ${path2__namespace.basename(targetEnvPath)}`);
+  } else {
+    appendToFile(targetEnvPath, envContent);
+    log.success(`Created ${path2__namespace.basename(targetEnvPath)}`);
+  }
+  console.log("\n");
+  log.success("AuthOS initialized successfully!\n");
+  console.log("Next steps:\n");
+  if (framework === "react" || framework === "next") {
+    console.log("  1. Wrap your app with AuthOSProvider:\n");
+    console.log('     import { AuthOSProvider } from "@drmhse/authos-react";');
+    console.log("");
+    console.log("     <AuthOSProvider baseURL={process.env.AUTHOS_BASE_URL}>");
+    console.log("       <App />");
+    console.log("     </AuthOSProvider>\n");
+  } else if (framework === "vue" || framework === "nuxt") {
+    console.log("  1. Install the Vue plugin:\n");
+    console.log('     import { createAuthOS } from "@drmhse/authos-vue";');
+    console.log("");
+    console.log("     app.use(createAuthOS({");
+    console.log("       baseURL: import.meta.env.VITE_AUTHOS_BASE_URL,");
+    console.log("     }));\n");
+  }
+  console.log("  2. Add authentication components:");
+  console.log("     npx authos add login-form");
+  console.log("     npx authos add user-profile\n");
+  console.log("  3. Check out the docs: https://authos.dev/docs\n");
+}
+function detectPackageManager(cwd) {
+  if (fileExists(path2__namespace.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+  if (fileExists(path2__namespace.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fileExists(path2__namespace.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+function getInstallCommand(pm, pkg) {
+  switch (pm) {
+    case "yarn":
+      return `yarn add ${pkg}`;
+    case "pnpm":
+      return `pnpm add ${pkg}`;
+    case "bun":
+      return `bun add ${pkg}`;
+    default:
+      return `npm install ${pkg}`;
+  }
+}
+
+// src/templates/registry.ts
+var loginFormReact = `"use client";
+
+import { useState } from "react";
+import { useAuthOS } from "@drmhse/authos-react";
+import { AuthErrorCodes } from "@drmhse/sso-sdk";
+
+interface LoginFormProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+}
+
+export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
+  const { client } = useAuthOS();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [mfaRequired, setMfaRequired] = useState(false);
+  const [mfaCode, setMfaCode] = useState("");
+  const [mfaToken, setMfaToken] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const response = await client.auth.login({ email, password });
+
+      if (response.mfa_required) {
+        setMfaRequired(true);
+        setMfaToken(response.mfa_token || null);
+      } else {
+        onSuccess?.();
+        if (redirectTo) {
+          window.location.href = redirectTo;
+        }
+      }
+    } catch (err: unknown) {
+      if (err && typeof err === "object" && "errorCode" in err) {
+        const apiError = err as { errorCode: string; message: string };
+        if (apiError.errorCode === AuthErrorCodes.MFA_REQUIRED) {
+          setMfaRequired(true);
+        } else {
+          setError(apiError.message || "Login failed");
+        }
+      } else {
+        setError("An unexpected error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleMfaSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await client.auth.verifyMfa({ code: mfaCode, mfa_token: mfaToken! });
+      onSuccess?.();
+      if (redirectTo) {
+        window.location.href = redirectTo;
+      }
+    } catch (err: unknown) {
+      if (err && typeof err === "object" && "message" in err) {
+        setError((err as { message: string }).message || "Invalid MFA code");
+      } else {
+        setError("Invalid MFA code");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (mfaRequired) {
+    return (
+      <form onSubmit={handleMfaSubmit} className="space-y-4 w-full max-w-sm">
+        <div className="text-center mb-6">
+          <h2 className="text-xl font-semibold">Two-Factor Authentication</h2>
+          <p className="text-gray-600 text-sm mt-1">
+            Enter the code from your authenticator app
+          </p>
+        </div>
+
+        {error && (
+          <div className="bg-red-50 text-red-600 px-4 py-2 rounded-md text-sm">
+            {error}
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="mfa-code" className="block text-sm font-medium mb-1">
+            Verification Code
+          </label>
+          <input
+            id="mfa-code"
+            type="text"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={mfaCode}
+            onChange={(e) => setMfaCode(e.target.value)}
+            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="000000"
+            maxLength={6}
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? "Verifying..." : "Verify"}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setMfaRequired(false)}
+          className="w-full text-gray-600 text-sm hover:underline"
+        >
+          Back to login
+        </button>
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm">
+      <div className="text-center mb-6">
+        <h2 className="text-xl font-semibold">Sign In</h2>
+        <p className="text-gray-600 text-sm mt-1">
+          Enter your credentials to continue
+        </p>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 text-red-600 px-4 py-2 rounded-md text-sm">
+          {error}
+        </div>
+      )}
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="you@example.com"
+          required
+        />
+      </div>
+
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium mb-1">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          autoComplete="current-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Your password"
+          required
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {loading ? "Signing in..." : "Sign In"}
+      </button>
+    </form>
+  );
+}
+`;
+var loginFormVue = `<script setup lang="ts">
+import { ref } from "vue";
+import { useAuthOS } from "@drmhse/authos-vue";
+import { AuthErrorCodes } from "@drmhse/sso-sdk";
+
+interface Props {
+  redirectTo?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const { client } = useAuthOS();
+
+const email = ref("");
+const password = ref("");
+const error = ref<string | null>(null);
+const loading = ref(false);
+const mfaRequired = ref(false);
+const mfaCode = ref("");
+const mfaToken = ref<string | null>(null);
+
+async function handleSubmit() {
+  error.value = null;
+  loading.value = true;
+
+  try {
+    const response = await client.auth.login({
+      email: email.value,
+      password: password.value,
+    });
+
+    if (response.mfa_required) {
+      mfaRequired.value = true;
+      mfaToken.value = response.mfa_token || null;
+    } else {
+      emit("success");
+      if (props.redirectTo) {
+        window.location.href = props.redirectTo;
+      }
+    }
+  } catch (err: unknown) {
+    if (err && typeof err === "object" && "errorCode" in err) {
+      const apiError = err as { errorCode: string; message: string };
+      if (apiError.errorCode === AuthErrorCodes.MFA_REQUIRED) {
+        mfaRequired.value = true;
+      } else {
+        error.value = apiError.message || "Login failed";
+      }
+    } else {
+      error.value = "An unexpected error occurred";
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleMfaSubmit() {
+  error.value = null;
+  loading.value = true;
+
+  try {
+    await client.auth.verifyMfa({
+      code: mfaCode.value,
+      mfa_token: mfaToken.value!,
+    });
+    emit("success");
+    if (props.redirectTo) {
+      window.location.href = props.redirectTo;
+    }
+  } catch (err: unknown) {
+    if (err && typeof err === "object" && "message" in err) {
+      error.value = (err as { message: string }).message || "Invalid MFA code";
+    } else {
+      error.value = "Invalid MFA code";
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function backToLogin() {
+  mfaRequired.value = false;
+  mfaCode.value = "";
+  error.value = null;
+}
+</script>
+
+<template>
+  <form
+    v-if="mfaRequired"
+    @submit.prevent="handleMfaSubmit"
+    class="space-y-4 w-full max-w-sm"
+  >
+    <div class="text-center mb-6">
+      <h2 class="text-xl font-semibold">Two-Factor Authentication</h2>
+      <p class="text-gray-600 text-sm mt-1">
+        Enter the code from your authenticator app
+      </p>
+    </div>
+
+    <div
+      v-if="error"
+      class="bg-red-50 text-red-600 px-4 py-2 rounded-md text-sm"
+    >
+      {{ error }}
+    </div>
+
+    <div>
+      <label for="mfa-code" class="block text-sm font-medium mb-1">
+        Verification Code
+      </label>
+      <input
+        id="mfa-code"
+        v-model="mfaCode"
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="000000"
+        maxlength="6"
+        required
+      />
+    </div>
+
+    <button
+      type="submit"
+      :disabled="loading"
+      class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+    >
+      {{ loading ? "Verifying..." : "Verify" }}
+    </button>
+
+    <button
+      type="button"
+      @click="backToLogin"
+      class="w-full text-gray-600 text-sm hover:underline"
+    >
+      Back to login
+    </button>
+  </form>
+
+  <form v-else @submit.prevent="handleSubmit" class="space-y-4 w-full max-w-sm">
+    <div class="text-center mb-6">
+      <h2 class="text-xl font-semibold">Sign In</h2>
+      <p class="text-gray-600 text-sm mt-1">
+        Enter your credentials to continue
+      </p>
+    </div>
+
+    <div
+      v-if="error"
+      class="bg-red-50 text-red-600 px-4 py-2 rounded-md text-sm"
+    >
+      {{ error }}
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm font-medium mb-1"> Email </label>
+      <input
+        id="email"
+        v-model="email"
+        type="email"
+        autocomplete="email"
+        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="you@example.com"
+        required
+      />
+    </div>
+
+    <div>
+      <label for="password" class="block text-sm font-medium mb-1">
+        Password
+      </label>
+      <input
+        id="password"
+        v-model="password"
+        type="password"
+        autocomplete="current-password"
+        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="Your password"
+        required
+      />
+    </div>
+
+    <button
+      type="submit"
+      :disabled="loading"
+      class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+    >
+      {{ loading ? "Signing in..." : "Sign In" }}
+    </button>
+  </form>
+</template>
+`;
+var orgSwitcherReact = `"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useOrganization, useUser } from "@drmhse/authos-react";
+
+export function OrganizationSwitcher() {
+  const { organization, organizations, switchOrganization, loading } = useOrganization();
+  const { user } = useUser();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  if (!user || organizations.length === 0) {
+    return null;
+  }
+
+  const handleSwitch = async (slug: string) => {
+    await switchOrganization(slug);
+    setOpen(false);
+  };
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        disabled={loading}
+        className="flex items-center gap-2 px-3 py-2 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50"
+      >
+        <span className="font-medium">
+          {organization?.name || "Select Organization"}
+        </span>
+        <svg
+          className={\`w-4 h-4 transition-transform \${open ? "rotate-180" : ""}\`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-56 bg-white border rounded-md shadow-lg z-50">
+          <div className="py-1">
+            {organizations.map((org) => (
+              <button
+                key={org.slug}
+                onClick={() => handleSwitch(org.slug)}
+                className={\`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center justify-between \${
+                  org.slug === organization?.slug ? "bg-blue-50" : ""
+                }\`}
+              >
+                <span>{org.name}</span>
+                {org.slug === organization?.slug && (
+                  <svg
+                    className="w-4 h-4 text-blue-600"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+var orgSwitcherVue = `<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { useOrganization, useUser } from "@drmhse/authos-vue";
+
+const { organization, organizations, switchOrganization, loading } = useOrganization();
+const { user } = useUser();
+
+const open = ref(false);
+const dropdownRef = ref<HTMLDivElement | null>(null);
+
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousedown", handleClickOutside);
+});
+
+async function handleSwitch(slug: string) {
+  await switchOrganization(slug);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div v-if="user && organizations.length > 0" ref="dropdownRef" class="relative">
+    <button
+      @click="open = !open"
+      :disabled="loading"
+      class="flex items-center gap-2 px-3 py-2 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50"
+    >
+      <span class="font-medium">
+        {{ organization?.name || "Select Organization" }}
+      </span>
+      <svg
+        :class="['w-4 h-4 transition-transform', open ? 'rotate-180' : '']"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 9l-7 7-7-7"
+        />
+      </svg>
+    </button>
+
+    <div
+      v-if="open"
+      class="absolute right-0 mt-2 w-56 bg-white border rounded-md shadow-lg z-50"
+    >
+      <div class="py-1">
+        <button
+          v-for="org in organizations"
+          :key="org.slug"
+          @click="handleSwitch(org.slug)"
+          :class="[
+            'w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center justify-between',
+            org.slug === organization?.slug ? 'bg-blue-50' : '',
+          ]"
+        >
+          <span>{{ org.name }}</span>
+          <svg
+            v-if="org.slug === organization?.slug"
+            class="w-4 h-4 text-blue-600"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+`;
+var userProfileReact = `"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useUser, useAuthOS } from "@drmhse/authos-react";
+
+interface UserProfileProps {
+  onSignOut?: () => void;
+}
+
+export function UserProfile({ onSignOut }: UserProfileProps) {
+  const { user } = useUser();
+  const { client } = useAuthOS();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  if (!user) {
+    return null;
+  }
+
+  const handleSignOut = async () => {
+    await client.auth.logout();
+    onSignOut?.();
+    setOpen(false);
+  };
+
+  const initials = user.name
+    ? user.name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2)
+    : user.email[0].toUpperCase();
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 p-1 rounded-full hover:bg-gray-100"
+      >
+        {user.avatar_url ? (
+          <img
+            src={user.avatar_url}
+            alt={user.name || user.email}
+            className="w-8 h-8 rounded-full object-cover"
+          />
+        ) : (
+          <div className="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
+            {initials}
+          </div>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-64 bg-white border rounded-md shadow-lg z-50">
+          <div className="p-4 border-b">
+            <div className="font-medium">{user.name || "User"}</div>
+            <div className="text-sm text-gray-600">{user.email}</div>
+          </div>
+          <div className="py-1">
+            <button
+              onClick={handleSignOut}
+              className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+var userProfileVue = `<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useUser, useAuthOS } from "@drmhse/authos-vue";
+
+const emit = defineEmits<{
+  signOut: [];
+}>();
+
+const { user } = useUser();
+const { client } = useAuthOS();
+
+const open = ref(false);
+const dropdownRef = ref<HTMLDivElement | null>(null);
+
+const initials = computed(() => {
+  if (!user.value) return "";
+  if (user.value.name) {
+    return user.value.name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  }
+  return user.value.email[0].toUpperCase();
+});
+
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousedown", handleClickOutside);
+});
+
+async function handleSignOut() {
+  await client.auth.logout();
+  emit("signOut");
+  open.value = false;
+}
+</script>
+
+<template>
+  <div v-if="user" ref="dropdownRef" class="relative">
+    <button
+      @click="open = !open"
+      class="flex items-center gap-2 p-1 rounded-full hover:bg-gray-100"
+    >
+      <img
+        v-if="user.avatar_url"
+        :src="user.avatar_url"
+        :alt="user.name || user.email"
+        class="w-8 h-8 rounded-full object-cover"
+      />
+      <div
+        v-else
+        class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium"
+      >
+        {{ initials }}
+      </div>
+    </button>
+
+    <div
+      v-if="open"
+      class="absolute right-0 mt-2 w-64 bg-white border rounded-md shadow-lg z-50"
+    >
+      <div class="p-4 border-b">
+        <div class="font-medium">{{ user.name || "User" }}</div>
+        <div class="text-sm text-gray-600">{{ user.email }}</div>
+      </div>
+      <div class="py-1">
+        <button
+          @click="handleSignOut"
+          class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+        >
+          Sign out
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+`;
+var templates = {
+  "login-form": {
+    name: "Login Form",
+    description: "A styled login form with email/password and MFA support",
+    files: [
+      {
+        name: "LoginForm",
+        content: {
+          react: loginFormReact,
+          next: loginFormReact,
+          vue: loginFormVue,
+          nuxt: loginFormVue,
+          unknown: loginFormReact
+        }
+      }
+    ]
+  },
+  "org-switcher": {
+    name: "Organization Switcher",
+    description: "A dropdown component for switching between organizations",
+    files: [
+      {
+        name: "OrganizationSwitcher",
+        content: {
+          react: orgSwitcherReact,
+          next: orgSwitcherReact,
+          vue: orgSwitcherVue,
+          nuxt: orgSwitcherVue,
+          unknown: orgSwitcherReact
+        }
+      }
+    ]
+  },
+  "user-profile": {
+    name: "User Profile",
+    description: "A user avatar button with dropdown menu and sign out",
+    files: [
+      {
+        name: "UserProfile",
+        content: {
+          react: userProfileReact,
+          next: userProfileReact,
+          vue: userProfileVue,
+          nuxt: userProfileVue,
+          unknown: userProfileReact
+        }
+      }
+    ]
+  }
+};
+function getAvailableTemplates() {
+  return Object.keys(templates);
+}
+function getTemplate(name) {
+  return templates[name] || null;
+}
+
+// src/commands/add.ts
+async function addCommand(templateName, options = {}) {
+  const cwd = options.cwd || process.cwd();
+  let framework = detectFramework(cwd);
+  if (framework === "unknown") {
+    log.warn("Could not detect project framework from package.json.");
+    const response = await prompts2__default.default({
+      type: "select",
+      name: "framework",
+      message: "Select your framework:",
+      choices: [
+        { title: "React", value: "react" },
+        { title: "Next.js", value: "next" },
+        { title: "Vue", value: "vue" },
+        { title: "Nuxt", value: "nuxt" }
+      ]
+    });
+    if (!response.framework) {
+      log.error("Command cancelled.");
+      process.exit(1);
+    }
+    framework = response.framework;
+  } else {
+    log.info(`Detected ${getFrameworkName(framework)} project`);
+  }
+  if (!templateName) {
+    const availableTemplates = getAvailableTemplates();
+    const choices = availableTemplates.map((name) => {
+      const template2 = getTemplate(name);
+      return {
+        title: template2.name,
+        description: template2.description,
+        value: name
+      };
+    });
+    const response = await prompts2__default.default({
+      type: "select",
+      name: "template",
+      message: "Select a component to add:",
+      choices
+    });
+    if (!response.template) {
+      log.error("Command cancelled.");
+      process.exit(1);
+    }
+    templateName = response.template;
+  }
+  const template = getTemplate(templateName);
+  if (!template) {
+    log.error(`Unknown template: ${templateName}`);
+    console.log("\nAvailable templates:");
+    for (const name of getAvailableTemplates()) {
+      const t = getTemplate(name);
+      console.log(`  - ${name}: ${t.description}`);
+    }
+    process.exit(1);
+  }
+  const componentsDir = findComponentsDir(cwd);
+  const extension = getFileExtension(framework);
+  log.info(`Adding ${template.name}...`);
+  for (const file of template.files) {
+    const fileName = `${file.name}${extension}`;
+    const filePath = path2__namespace.join(componentsDir, fileName);
+    if (fileExists(filePath) && !options.force) {
+      const response = await prompts2__default.default({
+        type: "confirm",
+        name: "overwrite",
+        message: `${fileName} already exists. Overwrite?`,
+        initial: false
+      });
+      if (!response.overwrite) {
+        log.warn(`Skipped ${fileName}`);
+        continue;
+      }
+    }
+    const content = file.content[framework];
+    writeFile(filePath, content);
+    log.success(`Created ${path2__namespace.relative(cwd, filePath)}`);
+  }
+  console.log("\n");
+  log.success(`Added ${template.name} component!`);
+  console.log("\nUsage:\n");
+  if (framework === "react" || framework === "next") {
+    console.log(`  import { ${template.files[0].name} } from "@/components/${template.files[0].name}";`);
+    console.log("");
+    console.log(`  <${template.files[0].name} />`);
+  } else {
+    console.log(`  <script setup>`);
+    console.log(`  import ${template.files[0].name} from "@/components/${template.files[0].name}.vue";`);
+    console.log(`  </script>`);
+    console.log("");
+    console.log(`  <${template.files[0].name} />`);
+  }
+  console.log("\n");
+}
+var program = new commander.Command();
+program.name("authos").description("CLI for scaffolding AuthOS integrations").version("0.1.0");
+program.command("init").description("Initialize AuthOS in your project").option("--skip-install", "Skip package installation").action(async (options) => {
+  await initCommand({ skipInstall: options.skipInstall });
+});
+program.command("add [template]").description("Add a component template to your project").option("-f, --force", "Overwrite existing files without prompting").action(async (template, options) => {
+  await addCommand(template, { force: options.force });
+});
+program.command("list").description("List available component templates").action(() => {
+  console.log(pc__default.default.bold("\nAvailable templates:\n"));
+  for (const name of getAvailableTemplates()) {
+    const template = getTemplate(name);
+    console.log(`  ${pc__default.default.cyan(name)}`);
+    console.log(`    ${pc__default.default.dim(template.description)}
+`);
+  }
+  console.log(`Run ${pc__default.default.cyan("authos add <template>")} to add a component.
+`);
+});
+program.parse();