@contentgrowth/content-auth 0.5.0 → 0.5.2

package/dist/{chunk-3HNFZJ7S.js → chunk-7QOUBGQS.js}

@@ -20,11 +20,16 @@ var AuthForm = ({
   defaultEmail = "",
   lockEmail = false,
   forgotPasswordUrl,
-  turnstileSiteKey
+  turnstileSiteKey,
+  redirectUrl,
+  showName = true,
+  signinUrl,
+  signupUrl
 }) => {
   const [isLogin, setIsLogin] = useState(view !== "signup");
   const [email, setEmail] = useState(defaultEmail);
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -55,6 +60,10 @@ var AuthForm = ({
   };
   const handleSubmit = async (e) => {
     e.preventDefault();
+    if (!isLogin && password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
     if (turnstileRequired && !turnstileToken) {
       setError("Please complete the security challenge");
       return;
@@ -72,9 +81,11 @@ var AuthForm = ({
       } else {
         const signupData = {
           email,
-          password,
-          name
+          password
         };
+        if (showName) {
+          signupData.name = name;
+        }
         if (turnstileToken) {
           signupData.turnstileToken = turnstileToken;
         }
@@ -82,6 +93,9 @@ var AuthForm = ({
         if (response.error) throw response.error;
       }
       onSuccess?.(response.data);
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      }
     } catch (err) {
       const errorMessage = err.message || "";
       const errorCode = err.code || "";
@@ -117,7 +131,7 @@ var AuthForm = ({
     try {
       await client.signIn.social({
         provider,
-        callbackURL: window.location.href
+        callbackURL: redirectUrl || window.location.href
       });
     } catch (err) {
       setError(err.message || `Failed to sign in with ${provider}`);
@@ -181,7 +195,7 @@ var AuthForm = ({
       ] }) });
     }
     return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "ca-form", children: [
-      !isLogin && /* @__PURE__ */ jsxs("div", { className: "ca-input-group", children: [
+      !isLogin && showName && /* @__PURE__ */ jsxs("div", { className: "ca-input-group", children: [
         /* @__PURE__ */ jsx("label", { className: "ca-label", htmlFor: "name", children: "Name" }),
         /* @__PURE__ */ jsx(
           "input",
@@ -227,6 +241,20 @@ var AuthForm = ({
           }
         )
       ] }),
+      !isLogin && /* @__PURE__ */ jsxs("div", { className: "ca-input-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "ca-label", htmlFor: "confirm-password", children: "Confirm Password" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "confirm-password",
+            type: "password",
+            className: "ca-input",
+            value: confirmPassword,
+            onChange: (e) => setConfirmPassword(e.target.value),
+            required: true
+          }
+        )
+      ] }),
       renderTurnstile(),
       error && /* @__PURE__ */ jsx("div", { className: "ca-error", children: error }),
       /* @__PURE__ */ jsx(
@@ -247,11 +275,20 @@ var AuthForm = ({
       {
         className: "ca-link",
         onClick: () => {
+          if (isLogin && signupUrl) {
+            window.location.href = signupUrl;
+            return;
+          }
+          if (!isLogin && signinUrl) {
+            window.location.href = signinUrl;
+            return;
+          }
           if (onSwitchMode) {
             onSwitchMode();
           } else {
             setIsLogin(!isLogin);
           }
+          setConfirmPassword("");
           if (turnstileRef.current) {
             turnstileRef.current.reset();
             setTurnstileToken(null);
@@ -262,7 +299,7 @@ var AuthForm = ({
       }
     )
   ] });
-  const titleContent = title ? typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: "ca-title", children: title }) : title : /* @__PURE__ */ jsx("h2", { className: "ca-title", children: isLogin ? "Welcome Back" : "Create Account" });
+  const titleContent = title ? typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: "ca-title", children: title }) : title : null;
   if (layout === "split") {
     return /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
       titleContent,
@@ -271,7 +308,7 @@ var AuthForm = ({
           renderForm(),
           renderFooter()
         ] }),
-        socialProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !lockEmail && socialProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "ca-split-divider", children: /* @__PURE__ */ jsx("span", { className: "ca-split-divider-text", children: "Or" }) }),
           /* @__PURE__ */ jsxs("div", { className: "ca-split-social", children: [
             /* @__PURE__ */ jsx("h3", { className: "ca-social-header", children: isLogin ? "Sign In With" : "Sign Up With" }),

package/dist/frontend/components/astro/{astro/AuthForm.astro → AuthForm.astro}

@@ -14,6 +14,9 @@ export interface Props {
     forgotPasswordUrl?: string;
     turnstileSiteKey?: string;
     redirectUrl?: string;
+    showName?: boolean;
+    signinUrl?: string;
+    signupUrl?: string;
 }
 
 const { 
@@ -29,7 +32,10 @@ const {
     lockEmail = false,
     forgotPasswordUrl,
     turnstileSiteKey,
-    redirectUrl
+    redirectUrl,
+    showName = true,
+    signinUrl,
+    signupUrl
 } = Astro.props;
 
 const isLogin = view !== 'signup';
@@ -42,14 +48,14 @@ const googleSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="2
 const githubSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.026A9.564 9.564 0 0 1 12 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.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.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 0 0 22 12c0-5.523-4.477-10-10-10z" fill="currentColor" /></svg>`;
 ---
 
-<div class={containerClass} data-auth-form data-base-url={baseUrl} data-view={view} data-redirect-url={redirectUrl} data-lock-email={lockEmail} data-turnstile-site-key={turnstileSiteKey}>
-    <h2 class="ca-title" data-title>{title || defaultTitle}</h2>
+<div class={containerClass} data-auth-form data-base-url={baseUrl} data-view={view} data-redirect-url={redirectUrl} data-lock-email={lockEmail} data-turnstile-site-key={turnstileSiteKey} data-show-name={showName} data-signin-url={signinUrl} data-signup-url={signupUrl}>
+    {title && <h2 class="ca-title" data-title>{title}</h2>}
 
     {layout === 'split' ? (
         <div class="ca-split-body">
             <div class="ca-split-main">
                 <form class="ca-form" data-auth-form-element>
-                    {!isLogin && (
+                    {!isLogin && showName && (
                         <div class="ca-input-group" data-name-group>
                             <label class="ca-label" for="name">Name</label>
                             <input id="name" type="text" class="ca-input" name="name" required />
@@ -79,6 +85,13 @@ const githubSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="2
                         <input id="password" type="password" class="ca-input" name="password" required />
                     </div>
 
+                    {!isLogin && (
+                        <div class="ca-input-group" data-confirm-password-group>
+                            <label class="ca-label" for="confirm-password">Confirm Password</label>
+                            <input id="confirm-password" type="password" class="ca-input" name="confirm-password" required />
+                        </div>
+                    )}
+
                     {turnstileSiteKey && !isLogin && (
                         <div class="ca-turnstile" data-turnstile-container>
                             <p class="ca-turnstile-hint">Please complete the security check above</p>
@@ -147,7 +160,7 @@ const githubSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="2
             )}
 
             <form class="ca-form" data-auth-form-element>
-                {!isLogin && (
+                {!isLogin && showName && (
                     <div class="ca-input-group" data-name-group>
                         <label class="ca-label" for="name">Name</label>
                         <input id="name" type="text" class="ca-input" name="name" required />
@@ -177,6 +190,13 @@ const githubSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="2
                     <input id="password" type="password" class="ca-input" name="password" required />
                 </div>
 
+                {!isLogin && (
+                    <div class="ca-input-group" data-confirm-password-group>
+                        <label class="ca-label" for="confirm-password">Confirm Password</label>
+                        <input id="confirm-password" type="password" class="ca-input" name="confirm-password" required />
+                    </div>
+                )}
+
                 {turnstileSiteKey && !isLogin && (
                     <div class="ca-turnstile" data-turnstile-container>
                         <p class="ca-turnstile-hint">Please complete the security check above</p>
@@ -230,6 +250,9 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
     const redirectUrl = container.getAttribute('data-redirect-url');
     const lockEmail = container.getAttribute('data-lock-email') === 'true';
     const turnstileSiteKey = container.getAttribute('data-turnstile-site-key');
+    const showName = container.getAttribute('data-show-name') !== 'false';
+    const signinUrl = container.getAttribute('data-signin-url');
+    const signupUrl = container.getAttribute('data-signup-url');
     
     const form = container.querySelector('[data-auth-form-element]') as HTMLFormElement;
     const submitBtn = container.querySelector('[data-submit-button]') as HTMLButtonElement;
@@ -238,6 +261,7 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
     const modeText = container.querySelector('[data-mode-text]') as HTMLSpanElement;
     const titleEl = container.querySelector('[data-title]') as HTMLHeadingElement;
     const nameGroup = container.querySelector('[data-name-group]') as HTMLDivElement | null;
+    const confirmPasswordGroup = container.querySelector('[data-confirm-password-group]') as HTMLDivElement | null;
     const socialHeader = container.querySelector('[data-social-header]') as HTMLHeadingElement | null;
     const socialButtons = container.querySelectorAll('[data-social-provider]');
     const turnstileContainer = container.querySelector('[data-turnstile-container]') as HTMLDivElement | null;
@@ -287,7 +311,8 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
         if (modeText) modeText.textContent = isLogin ? "Don't have an account? " : "Already have an account? ";
         if (switchBtn) switchBtn.textContent = isLogin ? 'Sign up' : 'Sign in';
         if (submitBtn) submitBtn.textContent = isLogin ? 'Sign In' : 'Sign Up';
-        if (nameGroup) nameGroup.style.display = isLogin ? 'none' : 'flex';
+        if (nameGroup) nameGroup.style.display = (isLogin || !showName) ? 'none' : 'flex';
+        if (confirmPasswordGroup) confirmPasswordGroup.style.display = isLogin ? 'none' : 'flex';
         if (socialHeader) socialHeader.textContent = isLogin ? 'Sign In With' : 'Sign Up With';
         if (turnstileContainer) {
             turnstileContainer.style.display = isLogin ? 'none' : 'flex';
@@ -300,6 +325,15 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
 
     // Handle mode switch
     switchBtn?.addEventListener('click', () => {
+        if (isLogin && signupUrl) {
+            window.location.href = signupUrl;
+            return;
+        }
+        if (!isLogin && signinUrl) {
+            window.location.href = signinUrl;
+            return;
+        }
+        
         isLogin = !isLogin;
         updateMode();
         hideError();
@@ -332,8 +366,16 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
         const formData = new FormData(form);
         const email = formData.get('email') as string;
         const password = formData.get('password') as string;
+        const confirmPassword = formData.get('confirm-password') as string;
         const name = formData.get('name') as string;
 
+        if (!isLogin) {
+            if (password !== confirmPassword) {
+                showError('Passwords do not match');
+                return;
+            }
+        }
+
         if (!isLogin && turnstileSiteKey && !turnstileToken) {
             showError('Please complete the security challenge');
             return;
@@ -347,7 +389,8 @@ document.querySelectorAll('[data-auth-form]').forEach((container) => {
                 response = await client.signIn.email({ email, password });
                 if (response.error) throw response.error;
             } else {
-                const signupData: any = { email, password, name };
+                const signupData: any = { email, password };
+                if (showName) signupData.name = name;
                 if (turnstileToken) signupData.turnstileToken = turnstileToken;
                 response = await client.signUp.email(signupData);
                 if (response.error) throw response.error;

package/dist/frontend/components/vue/{vue/AuthForm.vue → AuthForm.vue}

@@ -16,6 +16,9 @@ interface Props {
     forgotPasswordUrl?: string;
     turnstileSiteKey?: string;
     redirectUrl?: string;
+    showName?: boolean;
+    signinUrl?: string;
+    signupUrl?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
     socialPosition: 'top',
     defaultEmail: '',
     lockEmail: false,
+    showName: true,
 });
 
 const emit = defineEmits<{
@@ -40,6 +44,7 @@ const client = computed(() => createClient(props.baseUrl));
 const isLogin = ref(props.view !== 'signup');
 const email = ref(props.defaultEmail);
 const password = ref('');
+const confirmPassword = ref('');
 const name = ref('');
 const loading = ref(false);
 const error = ref<string | null>(null);
@@ -61,7 +66,7 @@ const socialClass = computed(() =>
 );
 
 const displayTitle = computed(() => 
-    props.title || (isLogin.value ? 'Welcome Back' : 'Create Account')
+    props.title
 );
 
 const turnstileEnabled = computed(() => !!props.turnstileSiteKey);
@@ -77,6 +82,11 @@ onMounted(() => {
 });
 
 const handleSubmit = async () => {
+    if (!isLogin.value && password.value !== confirmPassword.value) {
+        error.value = 'Passwords do not match';
+        return;
+    }
+
     if (turnstileRequired.value && !turnstileToken.value) {
         error.value = 'Please complete the security challenge';
         return;
@@ -97,8 +107,10 @@ const handleSubmit = async () => {
             const signupData: any = {
                 email: email.value,
                 password: password.value,
-                name: name.value,
             };
+            if (props.showName) {
+                signupData.name = name.value;
+            }
             if (turnstileToken.value) {
                 signupData.turnstileToken = turnstileToken.value;
             }
@@ -154,8 +166,19 @@ const handleSocialLogin = async (provider: string) => {
 };
 
 const switchMode = () => {
+    // Navigate to separate auth pages if URLs provided
+    if (isLogin.value && props.signupUrl) {
+        window.location.href = props.signupUrl;
+        return;
+    }
+    if (!isLogin.value && props.signinUrl) {
+        window.location.href = props.signinUrl;
+        return;
+    }
+    
     isLogin.value = !isLogin.value;
     error.value = null;
+    confirmPassword.value = '';
     turnstileToken.value = null;
     emit('switchMode');
 };
@@ -172,7 +195,7 @@ const handleTurnstileError = () => {
 
 <template>
     <div :class="containerClass">
-        <h2 class="ca-title">{{ displayTitle }}</h2>
+        <h2 v-if="displayTitle" class="ca-title">{{ displayTitle }}</h2>
 
         <!-- Default Layout -->
         <template v-if="layout !== 'split'">
@@ -199,7 +222,7 @@ const handleTurnstileError = () => {
 
             <!-- Form -->
             <form class="ca-form" @submit.prevent="handleSubmit">
-                <div v-if="!isLogin" class="ca-input-group">
+                <div v-if="!isLogin && showName" class="ca-input-group">
                     <label class="ca-label" for="name">Name</label>
                     <input
                         id="name"
@@ -238,6 +261,17 @@ const handleTurnstileError = () => {
                     />
                 </div>
 
+                <div v-if="!isLogin" class="ca-input-group">
+                    <label class="ca-label" for="confirm-password">Confirm Password</label>
+                    <input
+                        id="confirm-password"
+                        v-model="confirmPassword"
+                        type="password"
+                        class="ca-input"
+                        required
+                    />
+                </div>
+
                 <!-- Turnstile placeholder - implement with vue-turnstile if needed -->
                 <div v-if="turnstileSiteKey && !isLogin" class="ca-turnstile">
                     <p class="ca-turnstile-hint">Please complete the security check above</p>
@@ -289,7 +323,7 @@ const handleTurnstileError = () => {
             <div class="ca-split-body">
                 <div class="ca-split-main">
                     <form class="ca-form" @submit.prevent="handleSubmit">
-                        <div v-if="!isLogin" class="ca-input-group">
+                        <div v-if="!isLogin && showName" class="ca-input-group">
                             <label class="ca-label" for="name">Name</label>
                             <input id="name" v-model="name" type="text" class="ca-input" required />
                         </div>
@@ -304,6 +338,13 @@ const handleTurnstileError = () => {
                             </div>
                             <input id="password" v-model="password" type="password" class="ca-input" required />
                         </div>
+                        <div v-if="!isLogin" class="ca-input-group">
+                            <label class="ca-label" for="confirm-password">Confirm Password</label>
+                            <input id="confirm-password" v-model="confirmPassword" type="password" class="ca-input" required />
+                        </div>
+                        <div v-if="turnstileSiteKey && !isLogin" class="ca-turnstile">
+                            <p class="ca-turnstile-hint">Please complete the security check above</p>
+                        </div>
                         <div v-if="error" class="ca-error">{{ error }}</div>
                         <button type="submit" class="ca-button" :disabled="loading || !canSubmit">
                             {{ loading ? 'Loading...' : (isLogin ? 'Sign In' : 'Sign Up') }}

package/dist/frontend/index.d.ts

@@ -26,6 +26,14 @@ interface AuthFormProps {
     forgotPasswordUrl?: string;
     /** Cloudflare Turnstile site key. When set, shows Turnstile widget on signup. */
     turnstileSiteKey?: string;
+    /** URL to redirect to after successful authentication */
+    redirectUrl?: string;
+    /** Whether to show the name field on signup (default: true) */
+    showName?: boolean;
+    /** URL to navigate to for signin (if set, navigates instead of switching mode inline) */
+    signinUrl?: string;
+    /** URL to navigate to for signup (if set, navigates instead of switching mode inline) */
+    signupUrl?: string;
 }
 declare const AuthForm: React.FC<AuthFormProps>;
 

package/dist/frontend/index.js

@@ -7,7 +7,7 @@ import {
   PasswordChanger,
   ProfileEditor,
   ResetPasswordForm
-} from "../chunk-3HNFZJ7S.js";
+} from "../chunk-7QOUBGQS.js";
 import {
   authClient,
   createClient

package/dist/index.js

@@ -19,7 +19,7 @@ import {
   PasswordChanger,
   ProfileEditor,
   ResetPasswordForm
-} from "./chunk-3HNFZJ7S.js";
+} from "./chunk-7QOUBGQS.js";
 import {
   authClient,
   createClient

package/dist/styles.css

@@ -348,6 +348,10 @@ button[type="submit"]:disabled {
   }
 }
 
+.ca-social-grid:has(> :only-child) {
+  grid-template-columns: 1fr;
+}
+
 /* Turnstile Widget */
 .ca-turnstile {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentgrowth/content-auth",
-    "version": "0.5.0",
+    "version": "0.5.2",
     "description": "Better Auth wrapper with UI components for Cloudflare Workers & Pages. Includes custom schema mapping, Turnstile bot protection, and email normalization.",
     "type": "module",
     "main": "./dist/index.js",
@@ -53,7 +53,7 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsup && cp src/styles.css dist/styles.css && mkdir -p dist/frontend/components && cp -r src/frontend/components/vue dist/frontend/components/vue && cp -r src/frontend/components/astro dist/frontend/components/astro",
+        "build": "tsup && cp src/styles.css dist/styles.css && mkdir -p dist/frontend/components && cp -r src/frontend/components/vue dist/frontend/components/ && cp -r src/frontend/components/astro dist/frontend/components/",
         "dev": "tsup --watch",
         "prepublishOnly": "npm run build"
     },
@@ -108,4 +108,4 @@
         "typescript": "^5.9.3",
         "vue": "^3.5.27"
     }
-}
+}