@xenterprises/nuxt-x-auth-better 0.1.1

package/app/components/XAuth/Handler.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="space-y-6">
+    <!-- Status States with Transition -->
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+      mode="out-in"
+    >
+      <!-- Loading State -->
+      <slot v-if="isLoading" name="loading">
+        <div key="loading" class="text-center py-8">
+          <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-primary/10 ring-1 ring-primary/20">
+            <UIcon name="i-lucide-loader-2" class="size-8 text-primary animate-spin" />
+          </div>
+          <p class="text-muted">
+            Processing authentication...
+          </p>
+        </div>
+      </slot>
+
+      <!-- Error State -->
+      <slot v-else-if="error" name="error" :error="error">
+        <div key="error" class="text-center py-6">
+          <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 mb-2">
+            Authentication error
+          </h3>
+
+          <div class="mb-6 p-4 rounded-xl bg-error/5 ring-1 ring-error/10">
+            <p class="text-sm text-muted">
+              {{ error }}
+            </p>
+          </div>
+
+          <UButton
+            label="Return to sign in"
+            block
+            size="lg"
+            @click="goToLogin"
+          />
+        </div>
+      </slot>
+
+      <!-- Success State -->
+      <slot v-else-if="success" name="success">
+        <div key="success" class="text-center py-6">
+          <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 mb-2">
+            Authentication successful
+          </h3>
+
+          <p class="text-sm text-muted">
+            You will be redirected shortly...
+          </p>
+        </div>
+      </slot>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  // The type of handler to use
+  type: {
+    type: String,
+    required: true,
+    validator: (value) =>
+      ["magic-link", "password-reset", "oauth", "email-verification"].includes(value),
+  },
+  // Where to redirect after successful authentication
+  redirectTo: {
+    type: String,
+    default: undefined,
+  },
+  // Delay before redirect (in milliseconds)
+  redirectDelay: {
+    type: Number,
+    default: 1500,
+  },
+});
+
+const config = useAppConfig();
+const router = useRouter();
+const route = useRoute();
+const { handleMagicLinkCallback, resetPassword } = useXAuth();
+
+const isLoading = ref(true);
+const error = ref(null);
+const success = ref(false);
+
+const goToLogin = () => {
+  router.push(config.xAuth?.redirects?.login || '/auth/login');
+};
+
+onMounted(async () => {
+  try {
+    const code = route.query.code;
+    const url = window.location.href;
+
+    // Handle the authentication based on the type
+    switch (props.type) {
+      case "magic-link":
+        if (code) {
+          const result = await handleMagicLinkCallback(code);
+          if (result?.error) {
+            throw new Error(result.error);
+          }
+        } else {
+          throw new Error("Magic link code not found in URL");
+        }
+        break;
+
+      case "password-reset":
+        // Password reset just displays a form, handled separately
+        // This handler is for showing the reset form
+        success.value = true;
+        isLoading.value = false;
+        return; // Don't redirect for password reset
+
+      case "oauth":
+        // OAuth callbacks are typically handled automatically
+        // Just check if we're authenticated after the callback
+        const result = await handleMagicLinkCallback(url);
+        if (result?.error) {
+          throw new Error(result.error);
+        }
+        break;
+
+      case "email-verification":
+        if (code) {
+          // Email verification would be handled here
+          // Implementation depends on the auth provider
+        } else {
+          throw new Error("Verification code not found in URL");
+        }
+        break;
+    }
+
+    // Set success state
+    success.value = true;
+
+    // Determine where to redirect
+    let redirectPath = props.redirectTo || config.xAuth?.redirects?.afterLogin || "/";
+
+    // Check if there's a redirect_to in the query or state parameter
+    if (route.query.redirect_to) {
+      redirectPath = route.query.redirect_to;
+    } else if (route.query.state) {
+      try {
+        const stateObj = JSON.parse(route.query.state);
+        if (stateObj.redirect_to) {
+          redirectPath = stateObj.redirect_to;
+        }
+      } catch {
+        // Ignore invalid state parameter
+      }
+    }
+
+    // Redirect after delay
+    setTimeout(() => {
+      router.push(redirectPath);
+    }, props.redirectDelay);
+  } catch (err) {
+    error.value = err.message || `An error occurred during ${props.type} authentication.`;
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+// Expose states for parent components
+defineExpose({
+  isLoading,
+  error,
+  success,
+});
+</script>

package/app/components/XAuth/Login.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="w-full space-y-6">
+    <UAuthForm
+      :title="cardLogoUrl ? undefined : title"
+      :fields="fields"
+      :providers="oauthProviders"
+      :separator="showSeparator ? 'or' : undefined"
+      :schema="schema"
+      :loading="isLoading"
+      :submit="{ label: 'Sign in' }"
+      :on-submit="handleLogin"
+    >
+      <template v-if="cardLogoUrl" #header>
+        <div class="flex flex-col items-center">
+          <img :src="cardLogoUrl" alt="Logo" class="h-12 w-auto mb-4" />
+          <h1 class="text-xl text-pretty font-semibold text-highlighted">{{ title }}</h1>
+        </div>
+      </template>
+
+      <template #description>
+        <span v-if="showSignupLink" class="text-muted">
+          Don't have an account?
+          <ULink
+            :to="signupPath"
+            class="text-primary font-medium hover:text-primary/80 transition-colors"
+          >
+            Sign up
+          </ULink>
+        </span>
+      </template>
+
+      <template #footer>
+        <div class="space-y-3">
+          <div v-if="showForgotPassword" class="flex justify-end">
+            <ULink
+              :to="forgotPasswordPath"
+              class="text-primary/80 hover:text-primary text-sm font-medium transition-colors"
+            >
+              Forgot password?
+            </ULink>
+          </div>
+          <nav
+            v-if="showMagicLink"
+            class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-sm"
+          >
+            <ULink
+              to="/auth/magic-link"
+              class="text-muted hover:text-highlighted transition-colors"
+            >
+              Sign in with Magic Link
+            </ULink>
+          </nav>
+        </div>
+      </template>
+    </UAuthForm>
+  </div>
+</template>
+
+<script setup>
+import { z } from "zod"
+
+const config = useAppConfig()
+const { login, loginWithProvider, isLoading } = useXAuth()
+
+const title = "Welcome back"
+
+const showSignupLink = computed(() => config.xAuth?.features?.signup !== false)
+const showForgotPassword = computed(() => config.xAuth?.features?.forgotPassword !== false)
+const showMagicLink = computed(() => config.xAuth?.features?.magicLink || false)
+
+const signupPath = computed(() => config.xAuth?.redirects?.signup || '/auth/signup')
+const forgotPasswordPath = computed(() => config.xAuth?.redirects?.forgotPassword || '/auth/forgot-password')
+
+const showSeparator = computed(() => config.xAuth?.ui?.form?.showSeparator !== false)
+
+const cardLogoUrl = computed(() => config.xAuth?.ui?.card?.logoUrl || '')
+
+const oauthProviders = computed(() => {
+  if (!config.xAuth?.features?.oauth) return []
+
+  const providers = config.xAuth?.oauthProviders || []
+  return providers.map((p) => ({
+    label: p.label,
+    icon: p.icon,
+    color: "neutral",
+    variant: "subtle",
+    size: "lg",
+    onClick: () => handleOAuth(p.id),
+  }))
+})
+
+const fields = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "you@example.com",
+    required: true,
+  },
+  {
+    name: "password",
+    type: "password",
+    label: "Password",
+    placeholder: "••••••••",
+    required: true,
+  },
+]
+
+const schema = z.object({
+  email: z.string().email("Please enter a valid email address"),
+  password: z.string().min(1, "Password is required"),
+})
+
+async function handleLogin(payload) {
+  await login(payload.data.email, payload.data.password)
+}
+
+async function handleOAuth(providerId) {
+  await loginWithProvider(providerId)
+}
+</script>

package/app/components/XAuth/MagicLink.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+      mode="out-in"
+    >
+      <!-- Email Form -->
+      <UAuthForm
+        v-if="!emailSent"
+        key="form"
+        title="Sign in with Magic Link"
+        description="No password needed"
+        :fields="fields"
+        :schema="schema"
+        :loading="isLoading"
+        :submit="{ label: 'Send magic link' }"
+        @submit="handleSendMagicLink"
+      >
+        <template #footer>
+          <ULink
+            :to="config.xAuth?.redirects?.login || '/auth/login'"
+            class="inline-flex items-center gap-1.5 text-sm text-muted hover:text-highlighted transition-colors"
+          >
+            <UIcon name="i-lucide-arrow-left" class="size-4" />
+            Back to sign in
+          </ULink>
+        </template>
+      </UAuthForm>
+
+      <!-- Success State -->
+      <article v-else key="success" class="text-center space-y-6">
+        <figure class="mx-auto flex size-16 items-center justify-center rounded-full bg-primary/10 ring-1 ring-primary/20">
+          <UIcon name="i-lucide-mail" class="size-8 text-primary" />
+        </figure>
+
+        <header class="space-y-2">
+          <h3 class="text-xl font-semibold tracking-tight text-highlighted">
+            Check your email
+          </h3>
+          <p class="text-sm text-muted">
+            Click the link in your email to sign in
+          </p>
+        </header>
+
+        <aside class="p-5 rounded-xl bg-muted/50 ring-1 ring-default">
+          <p class="text-sm text-muted">
+            We've sent a magic link to
+          </p>
+          <p class="mt-1 font-semibold text-highlighted">
+            {{ sentEmail }}
+          </p>
+        </aside>
+
+        <p class="text-xs text-muted">
+          The link will expire in 15 minutes.
+        </p>
+
+        <UButton
+          variant="outline"
+          color="neutral"
+          label="Use a different email"
+          block
+          size="lg"
+          @click="resetEmailSent"
+        />
+      </article>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { z } from "zod"
+
+const config = useAppConfig()
+const { sendMagicLink, isLoading, emailSent, resetState } = useXAuth()
+
+const sentEmail = ref("")
+
+
+// Form fields
+const fields = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "you@example.com",
+    required: true,
+  },
+]
+
+// Validation schema
+const schema = z.object({
+  email: z.string().email("Please enter a valid email address"),
+})
+
+async function handleSendMagicLink(payload) {
+  sentEmail.value = payload.data.email
+  const origin = window.location.origin
+  const redirectUri = `${origin}/auth/handler/magic-link-callback`
+  await sendMagicLink(payload.data.email, { redirectUri })
+}
+
+function resetEmailSent() {
+  resetState()
+}
+</script>

package/app/components/XAuth/OAuthButton.vue

@@ -0,0 +1,130 @@
+<template>
+  <UButton
+    block
+    variant="outline"
+    color="neutral"
+    size="xl"
+    :loading="isLoading"
+    :disabled="isLoading"
+    :aria-label="`Sign in with ${providerName}`"
+    class="group relative overflow-hidden transition-all duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50"
+    @click="handleSignIn"
+  >
+    <template #leading>
+      <!-- Google Icon (colorful) -->
+      <svg v-if="props.provider === 'google'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+      </svg>
+
+      <!-- GitHub Icon -->
+      <svg v-else-if="props.provider === 'github'" class="h-5 w-5 text-neutral-900 dark:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+      </svg>
+
+      <!-- Microsoft Icon -->
+      <svg v-else-if="props.provider === 'microsoft'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#F25022" d="M1 1h10v10H1z"/>
+        <path fill="#00A4EF" d="M1 13h10v10H1z"/>
+        <path fill="#7FBA00" d="M13 1h10v10H13z"/>
+        <path fill="#FFB900" d="M13 13h10v10H13z"/>
+      </svg>
+
+      <!-- Facebook Icon -->
+      <svg v-else-if="props.provider === 'facebook'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+      </svg>
+
+      <!-- Twitter/X Icon -->
+      <svg v-else-if="props.provider === 'twitter'" class="h-5 w-5 text-neutral-900 dark:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+      </svg>
+
+      <!-- Apple Icon -->
+      <svg v-else-if="props.provider === 'apple'" class="h-5 w-5 text-neutral-900 dark:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
+      </svg>
+
+      <!-- LinkedIn Icon -->
+      <svg v-else-if="props.provider === 'linkedin'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#0A66C2" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+      </svg>
+
+      <!-- Discord Icon -->
+      <svg v-else-if="props.provider === 'discord'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#5865F2" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/>
+      </svg>
+
+      <!-- Spotify Icon -->
+      <svg v-else-if="props.provider === 'spotify'" class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="#1DB954" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
+      </svg>
+
+      <!-- Default fallback icon -->
+      <UIcon v-else name="i-lucide-user-circle" class="h-5 w-5" :aria-hidden="true" />
+    </template>
+
+    <span class="font-medium">
+      {{ isLoading ? 'Connecting...' : `Continue with ${providerName}` }}
+    </span>
+  </UButton>
+</template>
+
+<script setup>
+const props = defineProps({
+  provider: {
+    type: String,
+    required: true,
+    validator: (value) =>
+      [
+        "google",
+        "github",
+        "facebook",
+        "twitter",
+        "microsoft",
+        "apple",
+        "linkedin",
+        "discord",
+        "spotify",
+      ].includes(value),
+  },
+  variant: {
+    type: String,
+    default: "outline",
+  },
+  color: {
+    type: String,
+    default: "neutral",
+  },
+});
+
+const { loginWithProvider } = useXAuth();
+const isLoading = ref(false);
+
+const providerName = computed(() => {
+  const providers = {
+    google: "Google",
+    github: "GitHub",
+    microsoft: "Microsoft",
+    facebook: "Facebook",
+    twitter: "X",
+    apple: "Apple",
+    linkedin: "LinkedIn",
+    discord: "Discord",
+    spotify: "Spotify",
+  };
+  return providers[props.provider] || props.provider;
+});
+
+const handleSignIn = async () => {
+  isLoading.value = true;
+  try {
+    await loginWithProvider(props.provider);
+    // The redirect will be handled by the auth provider
+  } catch {
+    isLoading.value = false;
+  }
+};
+</script>

package/app/components/XAuth/OAuthButtonGroup.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="shouldShow" class="space-y-3">
+    <XAuthOAuthButton
+      v-for="provider in enabledProviders"
+      :key="provider.id"
+      :provider="provider.id"
+    />
+  </div>
+</template>
+
+<script setup>
+/**
+ * OAuth Button Group
+ *
+ * Displays OAuth provider buttons for authentication.
+ * This component is for standalone use outside of UAuthForm.
+ * When using UAuthForm, pass providers directly to the :providers prop.
+ *
+ * Config format in app.config.ts:
+ * oauthProviders: [
+ *   { id: 'google', label: 'Google', icon: 'i-simple-icons-google' },
+ *   { id: 'facebook', label: 'Facebook', icon: 'i-simple-icons-facebook' },
+ * ]
+ */
+
+const props = defineProps({
+  providers: {
+    type: Array,
+    default: undefined,
+  },
+});
+
+const config = useAppConfig();
+
+// Check if OAuth is enabled
+const isEnabled = computed(() => config.xAuth?.features?.oauth || false);
+
+// Get enabled providers from props or config
+const enabledProviders = computed(() => {
+  if (props.providers && props.providers.length > 0) {
+    return props.providers;
+  }
+
+  // Get from config (new format with objects)
+  const configProviders = config.xAuth?.oauthProviders || [];
+  if (configProviders.length > 0) {
+    return configProviders;
+  }
+
+  // Default fallback
+  return [{ id: 'google', label: 'Google', icon: 'i-simple-icons-google' }];
+});
+
+// Only show if OAuth is enabled and there are providers
+const shouldShow = computed(() => {
+  return isEnabled.value && enabledProviders.value.length > 0;
+});
+</script>

package/app/components/XAuth/Signup.vue

@@ -0,0 +1,68 @@
+<template>
+  <UAuthForm
+    :title="title"
+    :fields="fields"
+    :schema="schema"
+    :loading="isLoading"
+    :submit="{ label: 'Create account' }"
+    @submit="handleSignup"
+  >
+    <template #description>
+      <span class="text-muted">
+        Already have an account?
+        <ULink
+          :to="loginPath"
+          class="text-primary font-medium hover:text-primary/80 transition-colors"
+        >
+          Sign in
+        </ULink>
+      </span>
+    </template>
+
+    <template #footer>
+      <p class="text-xs text-muted text-center leading-relaxed">
+        By creating an account, you agree to our
+        <ULink to="/terms" class="text-primary/80 hover:text-primary font-medium transition-colors">Terms of Service</ULink>
+        and
+        <ULink to="/privacy" class="text-primary/80 hover:text-primary font-medium transition-colors">Privacy Policy</ULink>.
+      </p>
+    </template>
+  </UAuthForm>
+</template>
+
+<script setup>
+import { z } from "zod"
+
+const config = useAppConfig()
+const { signup, isLoading } = useXAuth()
+
+const title = "Create an account"
+
+const loginPath = computed(() => config.xAuth?.redirects?.login || '/auth/login')
+
+const fields = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "you@example.com",
+    required: true,
+  },
+  {
+    name: "password",
+    type: "password",
+    label: "Password",
+    placeholder: "At least 8 characters",
+    required: true,
+  },
+]
+
+const schema = z.object({
+  email: z.string().email("Please enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+})
+
+async function handleSignup(payload) {
+  await signup(payload.data.email, payload.data.password)
+}
+</script>