@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.
- package/dist/client/hooks.d.ts.map +1 -1
- package/dist/client/hooks.js +6 -5
- package/dist/client/provider.d.ts +7 -1
- package/dist/client/provider.d.ts.map +1 -1
- package/dist/client/provider.js +10 -4
- package/dist/client/use-analytics.d.ts.map +1 -1
- package/dist/client/use-analytics.js +3 -1
- package/dist/components/auth-card.d.ts.map +1 -1
- package/dist/components/auth-card.js +6 -1
- package/dist/components/branding-badge.d.ts.map +1 -1
- package/dist/components/branding-badge.js +15 -1
- package/dist/components/forgot-password.d.ts +3 -1
- package/dist/components/forgot-password.d.ts.map +1 -1
- package/dist/components/forgot-password.js +2 -2
- package/dist/components/login.d.ts +5 -1
- package/dist/components/login.d.ts.map +1 -1
- package/dist/components/login.js +142 -4
- package/dist/components/sign-in-button.d.ts +16 -2
- package/dist/components/sign-in-button.d.ts.map +1 -1
- package/dist/components/sign-in-button.js +13 -5
- package/dist/components/sign-up-button.d.ts +16 -2
- package/dist/components/sign-up-button.d.ts.map +1 -1
- package/dist/components/sign-up-button.js +13 -5
- package/dist/components/signup.d.ts +3 -1
- package/dist/components/signup.d.ts.map +1 -1
- package/dist/components/signup.js +167 -7
- package/dist/components/social-button.d.ts.map +1 -1
- package/dist/components/social-button.js +55 -2
- package/dist/server/access-token.d.ts +1 -1
- package/dist/server/access-token.d.ts.map +1 -1
- package/dist/server/access-token.js +2 -1
- package/dist/server/adapter.d.ts +1 -1
- package/dist/server/adapter.d.ts.map +1 -1
- package/dist/server/analytics.d.ts +7 -10
- package/dist/server/analytics.d.ts.map +1 -1
- package/dist/server/analytics.js +15 -10
- package/dist/server/ascendkit-auth.d.ts +5 -5
- package/dist/server/ascendkit-auth.d.ts.map +1 -1
- package/dist/server/ascendkit-auth.js +3 -2
- package/dist/server/auth-runtime.d.ts +1 -1
- package/dist/server/auth-runtime.d.ts.map +1 -1
- package/dist/server/auth-runtime.js +2 -1
- package/dist/server/oauth-proxy-plugin.js +1 -1
- package/dist/shared/constants.d.ts +2 -0
- package/dist/shared/constants.d.ts.map +1 -0
- package/dist/shared/constants.js +1 -0
- package/dist/shared/http-client.d.ts +1 -0
- package/dist/shared/http-client.d.ts.map +1 -1
- package/dist/shared/http-client.js +13 -0
- 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;;;;;;;;;;;;;;;;;;
|
|
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"}
|
package/dist/client/hooks.js
CHANGED
|
@@ -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.
|
|
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;
|
|
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"}
|
package/dist/client/provider.js
CHANGED
|
@@ -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.
|
|
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 ||
|
|
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
|
-
|
|
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: "
|
|
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":"
|
|
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
|
-
|
|
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,
|
|
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
|
|
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,
|
|
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 (
|
|
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;
|
|
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 (
|
|
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;
|
|
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"}
|
package/dist/components/login.js
CHANGED
|
@@ -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("
|
|
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
|
-
*
|
|
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":"
|
|
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
|
-
*
|
|
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 (
|
|
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
|
-
*
|
|
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":"
|
|
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
|
-
*
|
|
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 (
|
|
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;
|
|
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"}
|