@ascendkit/nextjs 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/client/hooks.d.ts.map +1 -1
  2. package/dist/client/hooks.js +6 -5
  3. package/dist/client/provider.d.ts +7 -1
  4. package/dist/client/provider.d.ts.map +1 -1
  5. package/dist/client/provider.js +10 -4
  6. package/dist/client/use-analytics.d.ts.map +1 -1
  7. package/dist/client/use-analytics.js +3 -1
  8. package/dist/components/auth-card.d.ts.map +1 -1
  9. package/dist/components/auth-card.js +6 -1
  10. package/dist/components/branding-badge.d.ts.map +1 -1
  11. package/dist/components/branding-badge.js +15 -1
  12. package/dist/components/forgot-password.d.ts +3 -1
  13. package/dist/components/forgot-password.d.ts.map +1 -1
  14. package/dist/components/forgot-password.js +2 -2
  15. package/dist/components/login.d.ts +5 -1
  16. package/dist/components/login.d.ts.map +1 -1
  17. package/dist/components/login.js +142 -4
  18. package/dist/components/sign-in-button.d.ts +16 -2
  19. package/dist/components/sign-in-button.d.ts.map +1 -1
  20. package/dist/components/sign-in-button.js +13 -5
  21. package/dist/components/sign-up-button.d.ts +16 -2
  22. package/dist/components/sign-up-button.d.ts.map +1 -1
  23. package/dist/components/sign-up-button.js +13 -5
  24. package/dist/components/signup.d.ts +3 -1
  25. package/dist/components/signup.d.ts.map +1 -1
  26. package/dist/components/signup.js +167 -7
  27. package/dist/components/social-button.d.ts.map +1 -1
  28. package/dist/components/social-button.js +55 -2
  29. package/dist/server/access-token.d.ts +1 -1
  30. package/dist/server/access-token.d.ts.map +1 -1
  31. package/dist/server/access-token.js +2 -1
  32. package/dist/server/adapter.d.ts +1 -1
  33. package/dist/server/adapter.d.ts.map +1 -1
  34. package/dist/server/analytics.d.ts +7 -10
  35. package/dist/server/analytics.d.ts.map +1 -1
  36. package/dist/server/analytics.js +15 -10
  37. package/dist/server/ascendkit-auth.d.ts +5 -5
  38. package/dist/server/ascendkit-auth.d.ts.map +1 -1
  39. package/dist/server/ascendkit-auth.js +3 -2
  40. package/dist/server/auth-runtime.d.ts +1 -1
  41. package/dist/server/auth-runtime.d.ts.map +1 -1
  42. package/dist/server/auth-runtime.js +2 -1
  43. package/dist/server/oauth-proxy-plugin.js +1 -1
  44. package/dist/shared/constants.d.ts +2 -0
  45. package/dist/shared/constants.d.ts.map +1 -0
  46. package/dist/shared/constants.js +1 -0
  47. package/dist/shared/http-client.d.ts +1 -0
  48. package/dist/shared/http-client.d.ts.map +1 -1
  49. package/dist/shared/http-client.js +13 -0
  50. package/package.json +5 -4
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/client/hooks.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY;;;;;;;;;;;;;;;;;;EAyE3B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,wCAG3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,IAAI,SAAsB;0BAeV,OAAO,CAAC,MAAM,CAAC;EA2D7D;AAED;;GAEG;AACH,wBAAgB,WAAW;;;;;;;+BA4C2B,MAAM;;EA8C3D;AAED;;GAEG;AACH,wBAAgB,OAAO;;;;;;;0BA4C0B;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;;;;EA0DjF;AAED,wBAAsB,WAAW,CAC/B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,OAAO,CAAC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAe3C"}
1
+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/client/hooks.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY;;;;;;;;;;;;;;;;;;EA0E3B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,wCAG3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,IAAI,SAAsB;0BAeV,OAAO,CAAC,MAAM,CAAC;EA2D7D;AAED;;GAEG;AACH,wBAAgB,WAAW;;;;;;;+BA4C2B,MAAM;;EA8C3D;AAED;;GAEG;AACH,wBAAgB,OAAO;;;;;;;0BA4C0B;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;;;;EA0DjF;AAED,wBAAsB,WAAW,CAC/B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,OAAO,CAAC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAe3C"}
@@ -72,15 +72,16 @@ export function useAscendKit() {
72
72
  };
73
73
  }, [sessionUserId, sessionToken, apiUrl, publicKey]);
74
74
  const isLoaded = !isPending && !profileLoading;
75
+ const signOut = useCallback(() => {
76
+ setProfile(null);
77
+ fetchedForRef.current = null;
78
+ return authClient.signOut();
79
+ }, [authClient]);
75
80
  return {
76
81
  user: profile,
77
82
  isLoaded,
78
83
  isAuthenticated: !!profile,
79
- signOut: () => {
80
- setProfile(null);
81
- fetchedForRef.current = null;
82
- return authClient.signOut();
83
- },
84
+ signOut,
84
85
  };
85
86
  }
86
87
  /**
@@ -29,6 +29,12 @@ interface AscendKitContextValue {
29
29
  /** In-modal notification set by auth form actions (signup, login errors). */
30
30
  authNotification: AuthNotification | null;
31
31
  clearAuthNotification: () => void;
32
+ /** Whether the "forgot password" feature is enabled (settings-driven). */
33
+ passwordResetEnabled: boolean;
34
+ /** Whether email verification is enabled (settings-driven). */
35
+ emailVerificationEnabled: boolean;
36
+ /** Whether credentials (email + password) are enabled. */
37
+ credentialsEnabled: boolean;
32
38
  }
33
39
  export declare function useAscendKitContext(): AscendKitContextValue;
34
40
  interface AscendKitProviderProps {
@@ -59,7 +65,7 @@ interface AscendKitProviderProps {
59
65
  *
60
66
  * Environment variables (set by `ascendkit init` + `ascendkit set-env`):
61
67
  * - NEXT_PUBLIC_ASCENDKIT_ENV_KEY — public key (client-side)
62
- * - NEXT_PUBLIC_ASCENDKIT_API_URL — backend URL (default: https://api.ascendkit.com)
68
+ * - NEXT_PUBLIC_ASCENDKIT_API_URL — backend URL (default: https://api.ascendkit.dev)
63
69
  */
64
70
  export declare function AscendKitProvider({ publicKey, apiUrl, enabledProviders: overrideProviders, onFocusRefresh, basePath, viewPaths, children, }: AscendKitProviderProps): import("react/jsx-runtime").JSX.Element;
65
71
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/client/provider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAChD,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,uEAAuE;IACvE,cAAc,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,cAAc,CAAC;IACzB,KAAK,EAAE,cAAc,CAAC;IACtB,6FAA6F;IAC7F,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,qBAAqB,EAAE,MAAM,IAAI,CAAC;CACnC;AA2BD,wBAAgB,mBAAmB,0BAMlC;AAED,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAcD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAA2D,EAC3D,MAAiF,EACjF,gBAAgB,EAAE,iBAAiB,EACnC,cAAsB,EACtB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,2CAqSxB"}
1
+ {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/client/provider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAChD,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,uEAAuE;IACvE,cAAc,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,cAAc,CAAC;IACzB,KAAK,EAAE,cAAc,CAAC;IACtB,6FAA6F;IAC7F,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,0EAA0E;IAC1E,oBAAoB,EAAE,OAAO,CAAC;IAC9B,+DAA+D;IAC/D,wBAAwB,EAAE,OAAO,CAAC;IAClC,0DAA0D;IAC1D,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AA2BD,wBAAgB,mBAAmB,0BAMlC;AAED,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAcD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAA2D,EAC3D,MAAqE,EACrE,gBAAgB,EAAE,iBAAiB,EACnC,cAAsB,EACtB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,2CA0SxB"}
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { AuthUIProvider } from "@daveyplate/better-auth-ui";
4
4
  import { createAuthClient } from "better-auth/react";
5
5
  import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
6
+ import { DEFAULT_API_URL } from "../shared/constants";
6
7
  import { AuthModal } from "../components/auth-modal";
7
8
  const AscendKitContext = createContext(null);
8
9
  const AUTH_MODES = new Set(["credentials", "magic-link"]);
@@ -50,13 +51,14 @@ export function useAscendKitContext() {
50
51
  *
51
52
  * Environment variables (set by `ascendkit init` + `ascendkit set-env`):
52
53
  * - NEXT_PUBLIC_ASCENDKIT_ENV_KEY — public key (client-side)
53
- * - NEXT_PUBLIC_ASCENDKIT_API_URL — backend URL (default: https://api.ascendkit.com)
54
+ * - NEXT_PUBLIC_ASCENDKIT_API_URL — backend URL (default: https://api.ascendkit.dev)
54
55
  */
55
- export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKIT_ENV_KEY ?? "", apiUrl = process.env.NEXT_PUBLIC_ASCENDKIT_API_URL || "https://api.ascendkit.com", enabledProviders: overrideProviders, onFocusRefresh = false, basePath, viewPaths, children, }) {
56
+ export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKIT_ENV_KEY ?? "", apiUrl = process.env.NEXT_PUBLIC_ASCENDKIT_API_URL || DEFAULT_API_URL, enabledProviders: overrideProviders, onFocusRefresh = false, basePath, viewPaths, children, }) {
56
57
  const [providers, setProviders] = useState(overrideProviders ?? []);
57
58
  const [branding, setBranding] = useState({ showBadge: true });
58
59
  const [environmentName, setEnvironmentName] = useState("");
59
60
  const [emailVerificationEnabled, setEmailVerificationEnabled] = useState(false);
61
+ const [passwordResetEnabled, setPasswordResetEnabled] = useState(false);
60
62
  const [authNotification, setAuthNotification] = useState(null);
61
63
  const clearAuthNotification = useCallback(() => setAuthNotification(null), []);
62
64
  const [settingsLoaded, setSettingsLoaded] = useState(!!overrideProviders);
@@ -156,6 +158,7 @@ export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKI
156
158
  setBranding(json.data.branding);
157
159
  setEnvironmentName(json.data?.environmentName ?? "");
158
160
  setEmailVerificationEnabled(json.data?.features?.emailVerification === true);
161
+ setPasswordResetEnabled(json.data?.features?.passwordReset === true);
159
162
  if (readyProviders.length === 0 && rawProviders.length > 0) {
160
163
  setSettingsError("Sign-in providers are enabled but not yet configured. Please contact the app developer.");
161
164
  }
@@ -264,7 +267,10 @@ export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKI
264
267
  environmentName,
265
268
  authNotification,
266
269
  clearAuthNotification,
267
- }, children: _jsxs(AuthUIProvider, { authClient: authClient, credentials: credentialsEnabled ? { forgotPassword: true } : false, social: socialProviders.length > 0 ? { providers: socialProviders } : undefined, magicLink: magicLinkEnabled, emailVerification: emailVerificationEnabled, signUp: true, account: false, navigate: navigate, replace: navigate, Link: ModalAwareLink, toast: ({ variant = "default", message }) => {
270
+ passwordResetEnabled,
271
+ emailVerificationEnabled,
272
+ credentialsEnabled,
273
+ }, children: _jsxs(AuthUIProvider, { authClient: authClient, credentials: credentialsEnabled ? { forgotPassword: passwordResetEnabled } : false, social: socialProviders.length > 0 ? { providers: socialProviders } : undefined, magicLink: magicLinkEnabled, emailVerification: emailVerificationEnabled, signUp: true, account: false, navigate: navigate, replace: navigate, Link: ModalAwareLink, toast: ({ variant = "default", message }) => {
268
274
  if (message)
269
275
  setAuthNotification({ variant, message });
270
276
  }, localization: {
@@ -276,7 +282,7 @@ export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKI
276
282
  : "Choose how you'd like to sign in",
277
283
  SIGN_UP: environmentName ? `Sign up for ${environmentName}` : "Sign Up",
278
284
  SIGN_UP_DESCRIPTION: "Enter your information to create an account",
279
- SIGN_IN_WITH: "Continue with",
285
+ SIGN_IN_WITH: "",
280
286
  DISABLED_CREDENTIALS_DESCRIPTION: socialProviders.length === 1
281
287
  ? `Continue with ${socialProviders[0].charAt(0).toUpperCase() + socialProviders[0].slice(1)} to sign in`
282
288
  : "Choose how you'd like to continue",
@@ -1 +1 @@
1
- {"version":3,"file":"use-analytics.d.ts","sourceRoot":"","sources":["../../src/client/use-analytics.ts"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY;mBAgFhB,MAAM,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;EAsBvD"}
1
+ {"version":3,"file":"use-analytics.d.ts","sourceRoot":"","sources":["../../src/client/use-analytics.ts"],"names":[],"mappings":"AAyCA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY;mBAkFhB,MAAM,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;EAsBvD"}
@@ -2,7 +2,7 @@
2
2
  import { useCallback, useEffect, useRef } from "react";
3
3
  import { useAscendKitContext } from "./provider";
4
4
  import { useAscendKit } from "./hooks";
5
- const SDK_VERSION = "0.1.0";
5
+ import { SDK_VERSION } from "../shared/http-client";
6
6
  const FLUSH_INTERVAL_MS = 30_000;
7
7
  const BATCH_SIZE = 10;
8
8
  const MAX_RETRY_ATTEMPTS = 3;
@@ -55,6 +55,7 @@ export function useAnalytics() {
55
55
  headers: {
56
56
  "Content-Type": "application/json",
57
57
  "X-AscendKit-Public-Key": publicKey,
58
+ "X-AscendKit-Client-Version": `js/${SDK_VERSION}`,
58
59
  },
59
60
  body: JSON.stringify({ batch }),
60
61
  });
@@ -102,6 +103,7 @@ export function useAnalytics() {
102
103
  headers: {
103
104
  "Content-Type": "application/json",
104
105
  "X-AscendKit-Public-Key": publicKey,
106
+ "X-AscendKit-Client-Version": `js/${SDK_VERSION}`,
105
107
  },
106
108
  body: JSON.stringify({ batch }),
107
109
  keepalive: true,
@@ -1 +1 @@
1
- {"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK1E,UAAU,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAClE,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqJ9D"}
1
+ {"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK1E,UAAU,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAClE,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA8J9D"}
@@ -124,5 +124,10 @@ export function AscendKitAuthCard(props) {
124
124
  --ak-notif-info-border: rgba(59, 130, 246, 0.2);
125
125
  }
126
126
  }
127
- ` })] })), _jsx(AuthView, { ...props }), _jsx(BrandingBadge, {})] }));
127
+ ` })] })), _jsx(AuthView, { ...props, socialLayout: props.socialLayout ?? "vertical", classNames: {
128
+ content: "overflow-x-hidden",
129
+ continueWith: "w-full min-w-0",
130
+ separator: "min-w-0 flex-1",
131
+ ...props.classNames,
132
+ } }), _jsx(BrandingBadge, {})] }));
128
133
  }
@@ -1 +1 @@
1
- {"version":3,"file":"branding-badge.d.ts","sourceRoot":"","sources":["../../src/components/branding-badge.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,mDAiB5B"}
1
+ {"version":3,"file":"branding-badge.d.ts","sourceRoot":"","sources":["../../src/components/branding-badge.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,mDAgC5B"}
@@ -5,5 +5,19 @@ export function BrandingBadge() {
5
5
  const { branding } = useAscendKitContext();
6
6
  if (!branding.showBadge)
7
7
  return null;
8
- return (_jsx("div", { className: "mt-3 text-center text-xs text-muted-foreground", children: _jsxs("a", { href: "https://ascendkit.dev?ref=auth", target: "_blank", rel: "noopener noreferrer", className: "hover:underline", children: ["Powered by ", _jsx("strong", { children: "AscendKit" })] }) }));
8
+ return (_jsxs("div", { className: "ak-branding-badge", children: [_jsxs("a", { href: "https://ascendkit.dev?ref=auth", target: "_blank", rel: "noopener noreferrer", className: "ak-branding-link", children: ["Powered by ", _jsx("strong", { children: "AscendKit" })] }), _jsx("style", { children: `
9
+ .ak-branding-badge {
10
+ margin-top: 12px;
11
+ text-align: center;
12
+ font-size: 12px;
13
+ color: var(--ak-muted-color, #888);
14
+ }
15
+ .ak-branding-link {
16
+ color: inherit;
17
+ text-decoration: none;
18
+ }
19
+ .ak-branding-link:hover {
20
+ text-decoration: underline;
21
+ }
22
+ ` })] }));
9
23
  }
@@ -1,6 +1,8 @@
1
1
  interface ForgotPasswordProps {
2
2
  onSuccess?: () => void;
3
+ /** Called when user clicks "Back to sign in" link. */
4
+ onBackToLogin?: () => void;
3
5
  }
4
- export declare function ForgotPassword({ onSuccess }: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function ForgotPassword({ onSuccess, onBackToLogin }: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
5
7
  export {};
6
8
  //# sourceMappingURL=forgot-password.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"forgot-password.d.ts","sourceRoot":"","sources":["../../src/components/forgot-password.tsx"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAqDhE"}
1
+ {"version":3,"file":"forgot-password.d.ts","sourceRoot":"","sources":["../../src/components/forgot-password.tsx"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAuE/E"}
@@ -2,7 +2,7 @@
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useState } from "react";
4
4
  import { useAscendKitContext } from "../client/provider";
5
- export function ForgotPassword({ onSuccess }) {
5
+ export function ForgotPassword({ onSuccess, onBackToLogin }) {
6
6
  const { apiUrl, publicKey } = useAscendKitContext();
7
7
  const [email, setEmail] = useState("");
8
8
  const [loading, setLoading] = useState(false);
@@ -33,5 +33,5 @@ export function ForgotPassword({ onSuccess }) {
33
33
  setLoading(false);
34
34
  }
35
35
  }
36
- return (_jsx("div", { className: "ak-auth", children: _jsxs("form", { onSubmit: handleSubmit, className: "ak-form", children: [error && _jsx("div", { className: "ak-error", children: error }), message && _jsx("div", { className: "ak-success", children: message }), _jsxs("div", { className: "ak-field", children: [_jsx("label", { htmlFor: "ak-forgot-email", children: "Email" }), _jsx("input", { id: "ak-forgot-email", name: "email", type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) })] }), _jsx("button", { type: "submit", disabled: loading, className: "ak-button", children: loading ? "Sending..." : "Send reset link" })] }) }));
36
+ return (_jsxs("div", { className: "ak-auth", children: [_jsxs("div", { className: "ak-auth-header", children: [_jsx("h2", { className: "ak-auth-title", children: "Reset Password" }), _jsx("p", { className: "ak-auth-description", children: "Enter your email address and we'll send you a reset link." })] }), _jsxs("form", { onSubmit: handleSubmit, className: "ak-form", children: [error && _jsx("div", { className: "ak-error", role: "alert", children: error }), message && _jsx("div", { className: "ak-success", role: "status", children: message }), _jsxs("div", { className: "ak-field", children: [_jsx("label", { htmlFor: "ak-forgot-email", children: "Email" }), _jsx("input", { id: "ak-forgot-email", name: "email", type: "email", placeholder: "m@example.com", required: true, value: email, onChange: (e) => setEmail(e.target.value), className: "ak-input" })] }), _jsxs("button", { type: "submit", disabled: loading, className: "ak-button ak-button-primary", children: [loading && _jsx("span", { className: "ak-spinner-sm", "aria-hidden": "true" }), loading ? "Sending..." : "Send reset link"] })] }), onBackToLogin && (_jsx("p", { className: "ak-auth-footer", children: _jsx("button", { type: "button", onClick: onBackToLogin, className: "ak-link", children: "\u2190 Back to sign in" }) }))] }));
37
37
  }
@@ -3,7 +3,11 @@ interface LoginProps {
3
3
  onError?: (error: string) => void;
4
4
  /** Redirect URL after social login completes. */
5
5
  callbackURL?: string;
6
+ /** Called when user clicks "Sign up" link. */
7
+ onSwitchToSignUp?: () => void;
8
+ /** Called when user clicks "Forgot your password?" link. */
9
+ onForgotPassword?: () => void;
6
10
  }
7
- export declare function Login({ onSuccess, onError, callbackURL }: LoginProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function Login({ onSuccess, onError, callbackURL, onSwitchToSignUp, onForgotPassword }: LoginProps): import("react/jsx-runtime").JSX.Element;
8
12
  export {};
9
13
  //# sourceMappingURL=login.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../src/components/login.tsx"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,UAAU,2CA4EpE"}
1
+ {"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../src/components/login.tsx"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,EAAE,UAAU,2CAgRxG"}
@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import { useEffect, useState } from "react";
4
4
  import { useAscendKitContext } from "../client/provider";
5
5
  import { SocialButton } from "./social-button";
6
- export function Login({ onSuccess, onError, callbackURL }) {
7
- const { authClient, enabledProviders, refreshSettings } = useAscendKitContext();
6
+ export function Login({ onSuccess, onError, callbackURL, onSwitchToSignUp, onForgotPassword }) {
7
+ const { authClient, enabledProviders, refreshSettings, environmentName, credentialsEnabled, passwordResetEnabled, } = useAscendKitContext();
8
8
  const [error, setError] = useState(null);
9
9
  const [loading, setLoading] = useState(false);
10
- const socialProviders = enabledProviders.filter((p) => p !== "credentials");
10
+ const socialProviders = enabledProviders.filter((p) => p !== "credentials" && p !== "magic-link");
11
11
  useEffect(() => {
12
12
  void refreshSettings();
13
13
  }, [refreshSettings]);
@@ -44,5 +44,143 @@ export function Login({ onSuccess, onError, callbackURL }) {
44
44
  setLoading(false);
45
45
  }
46
46
  }
47
- return (_jsxs("div", { className: "ak-auth", children: [_jsxs("form", { onSubmit: handleSubmit, className: "ak-form", children: [error && _jsx("div", { className: "ak-error", children: error }), _jsxs("div", { className: "ak-field", children: [_jsx("label", { htmlFor: "ak-login-email", children: "Email" }), _jsx("input", { id: "ak-login-email", name: "email", type: "email", required: true })] }), _jsxs("div", { className: "ak-field", children: [_jsx("label", { htmlFor: "ak-login-password", children: "Password" }), _jsx("input", { id: "ak-login-password", name: "password", type: "password", required: true })] }), _jsx("button", { type: "submit", disabled: loading, className: "ak-button", children: loading ? "Logging in..." : "Log in" })] }), socialProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ak-divider", children: "or" }), _jsx("div", { className: "ak-social-buttons", children: socialProviders.map((provider) => (_jsx(SocialButton, { provider: provider, callbackURL: callbackURL }, provider))) })] }))] }));
47
+ return (_jsxs("div", { className: "ak-auth", children: [_jsxs("div", { className: "ak-auth-header", children: [_jsx("h2", { className: "ak-auth-title", children: environmentName ? `Log in to ${environmentName}` : "Sign In" }), _jsx("p", { className: "ak-auth-description", children: credentialsEnabled
48
+ ? "Enter your email below to login to your account"
49
+ : "Choose how you'd like to sign in" })] }), credentialsEnabled && (_jsxs("form", { onSubmit: handleSubmit, className: "ak-form", children: [error && _jsx("div", { className: "ak-error", role: "alert", children: error }), _jsxs("div", { className: "ak-field", children: [_jsx("label", { htmlFor: "ak-login-email", children: "Email" }), _jsx("input", { id: "ak-login-email", name: "email", type: "email", placeholder: "m@example.com", required: true, className: "ak-input" })] }), _jsxs("div", { className: "ak-field", children: [_jsxs("div", { className: "ak-field-row", children: [_jsx("label", { htmlFor: "ak-login-password", children: "Password" }), passwordResetEnabled && onForgotPassword && (_jsx("button", { type: "button", onClick: onForgotPassword, className: "ak-link", children: "Forgot your password?" }))] }), _jsx("input", { id: "ak-login-password", name: "password", type: "password", placeholder: "Password", required: true, className: "ak-input" })] }), _jsxs("button", { type: "submit", disabled: loading, className: "ak-button ak-button-primary", children: [loading && _jsx("span", { className: "ak-spinner-sm", "aria-hidden": "true" }), loading ? "Logging in..." : "Login"] })] })), socialProviders.length > 0 && (_jsxs(_Fragment, { children: [credentialsEnabled && (_jsx("div", { className: "ak-divider", children: _jsx("span", { children: "Or continue with" }) })), _jsx("div", { className: "ak-social-buttons", children: socialProviders.map((provider) => (_jsx(SocialButton, { provider: provider, callbackURL: callbackURL }, provider))) })] })), onSwitchToSignUp && (_jsxs("p", { className: "ak-auth-footer", children: ["Don't have an account?", " ", _jsx("button", { type: "button", onClick: onSwitchToSignUp, className: "ak-link ak-link-bold", children: "Sign Up" })] })), _jsx("style", { children: `
50
+ .ak-auth { display: flex; flex-direction: column; gap: 20px; }
51
+ .ak-auth-header { text-align: left; }
52
+ .ak-auth-title {
53
+ font-size: 24px;
54
+ font-weight: 700;
55
+ margin: 0 0 4px;
56
+ color: var(--ak-text-color, inherit);
57
+ }
58
+ .ak-auth-description {
59
+ font-size: 14px;
60
+ color: var(--ak-muted-color, #64748b);
61
+ margin: 0;
62
+ }
63
+ .ak-form { display: flex; flex-direction: column; gap: 16px; }
64
+ .ak-field { display: flex; flex-direction: column; gap: 6px; }
65
+ .ak-field label {
66
+ font-size: 14px;
67
+ font-weight: 500;
68
+ color: var(--ak-text-color, inherit);
69
+ }
70
+ .ak-field-row {
71
+ display: flex;
72
+ justify-content: space-between;
73
+ align-items: center;
74
+ }
75
+ .ak-input {
76
+ width: 100%;
77
+ padding: 10px 12px;
78
+ border: 1px solid var(--ak-border, #e2e8f0);
79
+ border-radius: 8px;
80
+ font-size: 14px;
81
+ background: var(--ak-input-bg, transparent);
82
+ color: var(--ak-text-color, inherit);
83
+ outline: none;
84
+ transition: border-color 0.15s;
85
+ box-sizing: border-box;
86
+ }
87
+ .ak-input::placeholder { color: var(--ak-placeholder, #94a3b8); }
88
+ .ak-input:focus { border-color: var(--ak-focus-border, #3b82f6); }
89
+ .ak-button {
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ gap: 8px;
94
+ width: 100%;
95
+ padding: 10px 16px;
96
+ border: none;
97
+ border-radius: 8px;
98
+ font-size: 14px;
99
+ font-weight: 500;
100
+ cursor: pointer;
101
+ transition: opacity 0.15s;
102
+ }
103
+ .ak-button:disabled { opacity: 0.7; cursor: not-allowed; }
104
+ .ak-button-primary {
105
+ background: var(--ak-primary-bg, #0f172a);
106
+ color: var(--ak-primary-color, #fff);
107
+ }
108
+ .ak-button-primary:hover:not(:disabled) { opacity: 0.9; }
109
+ .ak-error {
110
+ padding: 10px 14px;
111
+ border-radius: 8px;
112
+ font-size: 14px;
113
+ background: var(--ak-error-bg, #fef2f2);
114
+ color: var(--ak-error-color, #991b1b);
115
+ border: 1px solid var(--ak-error-border, #fecaca);
116
+ }
117
+ .ak-divider {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 12px;
121
+ font-size: 12px;
122
+ color: var(--ak-muted-color, #64748b);
123
+ text-transform: uppercase;
124
+ }
125
+ .ak-divider::before,
126
+ .ak-divider::after {
127
+ content: "";
128
+ flex: 1;
129
+ height: 1px;
130
+ background: var(--ak-border, #e2e8f0);
131
+ }
132
+ .ak-social-buttons { display: flex; flex-direction: column; gap: 8px; }
133
+ .ak-link {
134
+ background: none;
135
+ border: none;
136
+ padding: 0;
137
+ font-size: 14px;
138
+ color: var(--ak-muted-color, #64748b);
139
+ cursor: pointer;
140
+ text-decoration: none;
141
+ }
142
+ .ak-link:hover { text-decoration: underline; }
143
+ .ak-link-bold { font-weight: 600; color: var(--ak-text-color, inherit); }
144
+ .ak-auth-footer {
145
+ text-align: center;
146
+ font-size: 14px;
147
+ color: var(--ak-muted-color, #64748b);
148
+ margin: 0;
149
+ }
150
+ .ak-spinner-sm {
151
+ width: 14px;
152
+ height: 14px;
153
+ border: 2px solid rgba(255,255,255,0.3);
154
+ border-top-color: currentColor;
155
+ border-radius: 50%;
156
+ animation: ak-spin 0.6s linear infinite;
157
+ }
158
+ @keyframes ak-spin { to { transform: rotate(360deg); } }
159
+
160
+ :root.dark .ak-auth, html.dark .ak-auth {
161
+ --ak-border: rgba(255,255,255,0.15);
162
+ --ak-muted-color: #94a3b8;
163
+ --ak-input-bg: transparent;
164
+ --ak-placeholder: #64748b;
165
+ --ak-focus-border: #60a5fa;
166
+ --ak-primary-bg: #f8fafc;
167
+ --ak-primary-color: #0f172a;
168
+ --ak-error-bg: rgba(239,68,68,0.1);
169
+ --ak-error-color: #fca5a5;
170
+ --ak-error-border: rgba(239,68,68,0.2);
171
+ }
172
+ @media (prefers-color-scheme: dark) {
173
+ .ak-auth:not(.ak-light) {
174
+ --ak-border: rgba(255,255,255,0.15);
175
+ --ak-muted-color: #94a3b8;
176
+ --ak-placeholder: #64748b;
177
+ --ak-focus-border: #60a5fa;
178
+ --ak-primary-bg: #f8fafc;
179
+ --ak-primary-color: #0f172a;
180
+ --ak-error-bg: rgba(239,68,68,0.1);
181
+ --ak-error-color: #fca5a5;
182
+ --ak-error-border: rgba(239,68,68,0.2);
183
+ }
184
+ }
185
+ ` })] }));
48
186
  }
@@ -3,17 +3,31 @@ interface SignInButtonProps {
3
3
  mode?: "modal" | "redirect";
4
4
  /** Custom redirect path for "redirect" mode (default: "/auth/sign-in"). */
5
5
  redirectUrl?: string;
6
+ /**
7
+ * When true, delegates rendering to the child element instead of wrapping
8
+ * in a `<button>`. The child receives the `onClick` handler via cloneElement.
9
+ * Follows the Radix UI / Clerk `asChild` convention.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * <SignInButton asChild>
14
+ * <MyCustomButton variant="ghost">Log in</MyCustomButton>
15
+ * </SignInButton>
16
+ * ```
17
+ */
18
+ asChild?: boolean;
6
19
  children?: React.ReactNode;
7
20
  }
8
21
  /**
9
22
  * Button that opens the sign-in modal or redirects to the sign-in page.
10
23
  *
11
- * Usage:
24
+ * @example
12
25
  * ```tsx
13
26
  * <SignInButton />
14
27
  * <SignInButton mode="modal">Log in</SignInButton>
28
+ * <SignInButton asChild><button className="custom">Sign in</button></SignInButton>
15
29
  * ```
16
30
  */
17
- export declare function SignInButton({ mode, redirectUrl, children, }: SignInButtonProps): import("react/jsx-runtime").JSX.Element;
31
+ export declare function SignInButton({ mode, redirectUrl, asChild, children, }: SignInButtonProps): import("react/jsx-runtime").JSX.Element;
18
32
  export {};
19
33
  //# sourceMappingURL=sign-in-button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"sign-in-button.d.ts","sourceRoot":"","sources":["../../src/components/sign-in-button.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,WAA6B,EAC7B,QAAQ,GACT,EAAE,iBAAiB,2CAwBnB"}
1
+ {"version":3,"file":"sign-in-button.d.ts","sourceRoot":"","sources":["../../src/components/sign-in-button.tsx"],"names":[],"mappings":"AAKA,UAAU,iBAAiB;IACzB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,WAA6B,EAC7B,OAAe,EACf,QAAQ,GACT,EAAE,iBAAiB,2CAyBnB"}
@@ -1,16 +1,18 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { cloneElement, isValidElement } from "react";
3
4
  import { useAscendKitContext } from "../client/provider";
4
5
  /**
5
6
  * Button that opens the sign-in modal or redirects to the sign-in page.
6
7
  *
7
- * Usage:
8
+ * @example
8
9
  * ```tsx
9
10
  * <SignInButton />
10
11
  * <SignInButton mode="modal">Log in</SignInButton>
12
+ * <SignInButton asChild><button className="custom">Sign in</button></SignInButton>
11
13
  * ```
12
14
  */
13
- export function SignInButton({ mode = "modal", redirectUrl = "/auth/sign-in", children, }) {
15
+ export function SignInButton({ mode = "modal", redirectUrl = "/auth/sign-in", asChild = false, children, }) {
14
16
  const { modal } = useAscendKitContext();
15
17
  function handleClick() {
16
18
  if (mode === "modal") {
@@ -20,8 +22,14 @@ export function SignInButton({ mode = "modal", redirectUrl = "/auth/sign-in", ch
20
22
  window.location.href = redirectUrl;
21
23
  }
22
24
  }
23
- if (children) {
24
- return (_jsx("span", { onClick: handleClick, style: { cursor: "pointer" }, children: children }));
25
+ if (asChild && isValidElement(children)) {
26
+ return cloneElement(children, {
27
+ onClick: (e) => {
28
+ children.props.onClick?.(e);
29
+ if (!e.defaultPrevented)
30
+ handleClick();
31
+ },
32
+ });
25
33
  }
26
- return (_jsx("button", { type: "button", onClick: handleClick, className: "ak-sign-in-button", children: "Sign in" }));
34
+ return (_jsx("button", { type: "button", onClick: handleClick, className: "ak-sign-in-button", children: children ?? "Sign in" }));
27
35
  }
@@ -3,17 +3,31 @@ interface SignUpButtonProps {
3
3
  mode?: "modal" | "redirect";
4
4
  /** Custom redirect path for "redirect" mode (default: "/auth/sign-up"). */
5
5
  redirectUrl?: string;
6
+ /**
7
+ * When true, delegates rendering to the child element instead of wrapping
8
+ * in a `<button>`. The child receives the `onClick` handler via cloneElement.
9
+ * Follows the Radix UI / Clerk `asChild` convention.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * <SignUpButton asChild>
14
+ * <MyCustomButton>Create account</MyCustomButton>
15
+ * </SignUpButton>
16
+ * ```
17
+ */
18
+ asChild?: boolean;
6
19
  children?: React.ReactNode;
7
20
  }
8
21
  /**
9
22
  * Button that opens the sign-up modal or redirects to the sign-up page.
10
23
  *
11
- * Usage:
24
+ * @example
12
25
  * ```tsx
13
26
  * <SignUpButton />
14
27
  * <SignUpButton mode="modal">Create account</SignUpButton>
28
+ * <SignUpButton asChild><button className="custom">Join</button></SignUpButton>
15
29
  * ```
16
30
  */
17
- export declare function SignUpButton({ mode, redirectUrl, children, }: SignUpButtonProps): import("react/jsx-runtime").JSX.Element;
31
+ export declare function SignUpButton({ mode, redirectUrl, asChild, children, }: SignUpButtonProps): import("react/jsx-runtime").JSX.Element;
18
32
  export {};
19
33
  //# sourceMappingURL=sign-up-button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"sign-up-button.d.ts","sourceRoot":"","sources":["../../src/components/sign-up-button.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,WAA6B,EAC7B,QAAQ,GACT,EAAE,iBAAiB,2CAwBnB"}
1
+ {"version":3,"file":"sign-up-button.d.ts","sourceRoot":"","sources":["../../src/components/sign-up-button.tsx"],"names":[],"mappings":"AAKA,UAAU,iBAAiB;IACzB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,WAA6B,EAC7B,OAAe,EACf,QAAQ,GACT,EAAE,iBAAiB,2CAyBnB"}
@@ -1,16 +1,18 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { cloneElement, isValidElement } from "react";
3
4
  import { useAscendKitContext } from "../client/provider";
4
5
  /**
5
6
  * Button that opens the sign-up modal or redirects to the sign-up page.
6
7
  *
7
- * Usage:
8
+ * @example
8
9
  * ```tsx
9
10
  * <SignUpButton />
10
11
  * <SignUpButton mode="modal">Create account</SignUpButton>
12
+ * <SignUpButton asChild><button className="custom">Join</button></SignUpButton>
11
13
  * ```
12
14
  */
13
- export function SignUpButton({ mode = "modal", redirectUrl = "/auth/sign-up", children, }) {
15
+ export function SignUpButton({ mode = "modal", redirectUrl = "/auth/sign-up", asChild = false, children, }) {
14
16
  const { modal } = useAscendKitContext();
15
17
  function handleClick() {
16
18
  if (mode === "modal") {
@@ -20,8 +22,14 @@ export function SignUpButton({ mode = "modal", redirectUrl = "/auth/sign-up", ch
20
22
  window.location.href = redirectUrl;
21
23
  }
22
24
  }
23
- if (children) {
24
- return (_jsx("span", { onClick: handleClick, style: { cursor: "pointer" }, children: children }));
25
+ if (asChild && isValidElement(children)) {
26
+ return cloneElement(children, {
27
+ onClick: (e) => {
28
+ children.props.onClick?.(e);
29
+ if (!e.defaultPrevented)
30
+ handleClick();
31
+ },
32
+ });
25
33
  }
26
- return (_jsx("button", { type: "button", onClick: handleClick, className: "ak-sign-up-button", children: "Sign up" }));
34
+ return (_jsx("button", { type: "button", onClick: handleClick, className: "ak-sign-up-button", children: children ?? "Sign up" }));
27
35
  }
@@ -3,7 +3,9 @@ interface SignUpProps {
3
3
  onError?: (error: string) => void;
4
4
  /** Redirect URL after social login completes. */
5
5
  callbackURL?: string;
6
+ /** Called when user clicks "Sign in" link. */
7
+ onSwitchToLogin?: () => void;
6
8
  }
7
- export declare function SignUp({ onSuccess, onError, callbackURL }: SignUpProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function SignUp({ onSuccess, onError, callbackURL, onSwitchToLogin }: SignUpProps): import("react/jsx-runtime").JSX.Element;
8
10
  export {};
9
11
  //# sourceMappingURL=signup.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"signup.d.ts","sourceRoot":"","sources":["../../src/components/signup.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,WAAW,2CA6GtE"}
1
+ {"version":3,"file":"signup.d.ts","sourceRoot":"","sources":["../../src/components/signup.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,WAAW,2CA+TvF"}