@insforge/react 0.1.1 → 0.1.3
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/atoms.d.mts +366 -0
- package/dist/atoms.d.ts +366 -0
- package/dist/atoms.js +731 -0
- package/dist/atoms.js.map +1 -0
- package/dist/atoms.mjs +716 -0
- package/dist/atoms.mjs.map +1 -0
- package/dist/forms.d.mts +185 -0
- package/dist/forms.d.ts +185 -0
- package/dist/forms.js +1029 -0
- package/dist/forms.js.map +1 -0
- package/dist/forms.mjs +1023 -0
- package/dist/forms.mjs.map +1 -0
- package/dist/index-C9pisdfX.d.mts +404 -0
- package/dist/index-C9pisdfX.d.ts +404 -0
- package/dist/index.d.mts +7 -941
- package/dist/index.d.ts +7 -941
- package/dist/index.js +99 -55
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +99 -56
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,411 +1,15 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { S as SignInProps, a as SignUpProps, U as UserButtonProps, P as ProtectProps, C as ConditionalProps, I as InsforgeUser, O as OAuthProvider, b as OAuthProviderConfig } from './index-C9pisdfX.mjs';
|
|
3
|
+
export { A as AuthContainerProps, j as AuthDividerProps, d as AuthErrorBannerProps, e as AuthFormFieldProps, c as AuthHeaderProps, i as AuthLinkProps, k as AuthOAuthButtonProps, l as AuthOAuthProvidersProps, f as AuthPasswordFieldProps, g as AuthPasswordStrengthIndicatorProps, h as AuthSubmitButtonProps, m as AuthVerificationCodeInputProps, B as BaseAppearance, E as EmailAuthConfig, F as ForgotPasswordFormProps, R as ResetPasswordFormProps, n as SignInFormProps, o as SignUpFormProps, V as VerifyEmailStatusProps } from './index-C9pisdfX.mjs';
|
|
2
4
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.mjs';
|
|
7
|
+
export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.mjs';
|
|
4
8
|
import { OAuthProvidersSchema, GetPublicEmailAuthConfigResponse } from '@insforge/shared-schemas';
|
|
5
9
|
export { checkPasswordStrength, cn, createPasswordSchema, emailSchema, passwordSchema, validateEmail, validatePassword } from './lib.mjs';
|
|
6
10
|
import 'clsx';
|
|
7
11
|
import 'zod';
|
|
8
12
|
|
|
9
|
-
type OAuthProvider = OAuthProvidersSchema;
|
|
10
|
-
type EmailAuthConfig = GetPublicEmailAuthConfigResponse;
|
|
11
|
-
/**
|
|
12
|
-
* Insforge User type
|
|
13
|
-
*/
|
|
14
|
-
interface InsforgeUser {
|
|
15
|
-
id: string;
|
|
16
|
-
email: string;
|
|
17
|
-
name?: string;
|
|
18
|
-
avatarUrl?: string;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Base appearance props for styling components
|
|
22
|
-
*/
|
|
23
|
-
interface BaseAppearance {
|
|
24
|
-
containerClassName?: string;
|
|
25
|
-
[key: string]: string | undefined;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Props for AuthContainer component
|
|
29
|
-
*/
|
|
30
|
-
interface AuthContainerProps {
|
|
31
|
-
children: ReactNode;
|
|
32
|
-
appearance?: {
|
|
33
|
-
containerClassName?: string;
|
|
34
|
-
cardClassName?: string;
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Props for AuthHeader component
|
|
39
|
-
*/
|
|
40
|
-
interface AuthHeaderProps {
|
|
41
|
-
title: string;
|
|
42
|
-
subtitle?: string;
|
|
43
|
-
appearance?: {
|
|
44
|
-
containerClassName?: string;
|
|
45
|
-
titleClassName?: string;
|
|
46
|
-
subtitleClassName?: string;
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Props for AuthErrorBanner component
|
|
51
|
-
*/
|
|
52
|
-
interface AuthErrorBannerProps {
|
|
53
|
-
error: string;
|
|
54
|
-
className?: string;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Props for AuthFormField component
|
|
58
|
-
*/
|
|
59
|
-
interface AuthFormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
60
|
-
label: string;
|
|
61
|
-
id: string;
|
|
62
|
-
appearance?: {
|
|
63
|
-
containerClassName?: string;
|
|
64
|
-
labelClassName?: string;
|
|
65
|
-
inputClassName?: string;
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Props for AuthPasswordField component
|
|
70
|
-
*/
|
|
71
|
-
interface AuthPasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
72
|
-
label: string;
|
|
73
|
-
id: string;
|
|
74
|
-
showStrengthIndicator?: boolean;
|
|
75
|
-
emailAuthConfig: EmailAuthConfig;
|
|
76
|
-
forgotPasswordLink?: {
|
|
77
|
-
href: string;
|
|
78
|
-
text?: string;
|
|
79
|
-
};
|
|
80
|
-
appearance?: {
|
|
81
|
-
containerClassName?: string;
|
|
82
|
-
labelClassName?: string;
|
|
83
|
-
inputClassName?: string;
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Props for AuthPasswordStrengthIndicator component
|
|
88
|
-
*/
|
|
89
|
-
interface AuthPasswordStrengthIndicatorProps {
|
|
90
|
-
password: string;
|
|
91
|
-
config: EmailAuthConfig;
|
|
92
|
-
appearance?: {
|
|
93
|
-
containerClassName?: string;
|
|
94
|
-
requirementClassName?: string;
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* Props for AuthSubmitButton component
|
|
99
|
-
*/
|
|
100
|
-
interface AuthSubmitButtonProps {
|
|
101
|
-
children: ReactNode;
|
|
102
|
-
isLoading?: boolean;
|
|
103
|
-
confirmed?: boolean;
|
|
104
|
-
disabled?: boolean;
|
|
105
|
-
className?: string;
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Props for AuthLink component
|
|
109
|
-
*/
|
|
110
|
-
interface AuthLinkProps {
|
|
111
|
-
text: string;
|
|
112
|
-
linkText: string;
|
|
113
|
-
href: string;
|
|
114
|
-
appearance?: {
|
|
115
|
-
containerClassName?: string;
|
|
116
|
-
linkClassName?: string;
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
/**
|
|
120
|
-
* Props for AuthDivider component
|
|
121
|
-
*/
|
|
122
|
-
interface AuthDividerProps {
|
|
123
|
-
text?: string;
|
|
124
|
-
className?: string;
|
|
125
|
-
}
|
|
126
|
-
/**
|
|
127
|
-
* Props for AuthOAuthButton component
|
|
128
|
-
*/
|
|
129
|
-
interface AuthOAuthButtonProps {
|
|
130
|
-
provider: OAuthProvider;
|
|
131
|
-
onClick: (provider: OAuthProvider) => void;
|
|
132
|
-
disabled?: boolean;
|
|
133
|
-
loading?: boolean;
|
|
134
|
-
displayMode?: 'full' | 'short' | 'icon';
|
|
135
|
-
style?: CSSProperties;
|
|
136
|
-
className?: string;
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Props for AuthOAuthProviders component
|
|
140
|
-
*/
|
|
141
|
-
interface AuthOAuthProvidersProps {
|
|
142
|
-
providers: OAuthProvider[];
|
|
143
|
-
onClick: (provider: OAuthProvider) => void;
|
|
144
|
-
disabled?: boolean;
|
|
145
|
-
loading: OAuthProvider | null;
|
|
146
|
-
appearance?: {
|
|
147
|
-
containerClassName?: string;
|
|
148
|
-
buttonClassName?: string;
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
|
-
/**
|
|
152
|
-
* Props for AuthVerificationCodeInput component
|
|
153
|
-
*/
|
|
154
|
-
interface AuthVerificationCodeInputProps {
|
|
155
|
-
length?: number;
|
|
156
|
-
value: string;
|
|
157
|
-
email: string;
|
|
158
|
-
onChange: (value: string) => void;
|
|
159
|
-
disabled?: boolean;
|
|
160
|
-
appearance?: {
|
|
161
|
-
containerClassName?: string;
|
|
162
|
-
inputClassName?: string;
|
|
163
|
-
};
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* Configuration for an OAuth provider
|
|
167
|
-
*/
|
|
168
|
-
interface OAuthProviderConfig {
|
|
169
|
-
name: string;
|
|
170
|
-
svg: ReactNode;
|
|
171
|
-
className: string;
|
|
172
|
-
}
|
|
173
|
-
/**
|
|
174
|
-
* Props for SignInForm component
|
|
175
|
-
*/
|
|
176
|
-
interface SignInFormProps {
|
|
177
|
-
email: string;
|
|
178
|
-
password: string;
|
|
179
|
-
onEmailChange: (email: string) => void;
|
|
180
|
-
onPasswordChange: (password: string) => void;
|
|
181
|
-
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
182
|
-
error?: string;
|
|
183
|
-
loading?: boolean;
|
|
184
|
-
oauthLoading?: OAuthProvider | null;
|
|
185
|
-
availableProviders?: OAuthProvider[];
|
|
186
|
-
onOAuthClick?: (provider: OAuthProvider) => void;
|
|
187
|
-
emailAuthConfig?: EmailAuthConfig;
|
|
188
|
-
appearance?: {
|
|
189
|
-
containerClassName?: string;
|
|
190
|
-
cardClassName?: string;
|
|
191
|
-
formClassName?: string;
|
|
192
|
-
buttonClassName?: string;
|
|
193
|
-
};
|
|
194
|
-
title?: string;
|
|
195
|
-
subtitle?: string;
|
|
196
|
-
emailLabel?: string;
|
|
197
|
-
emailPlaceholder?: string;
|
|
198
|
-
passwordLabel?: string;
|
|
199
|
-
passwordPlaceholder?: string;
|
|
200
|
-
forgotPasswordText?: string;
|
|
201
|
-
forgotPasswordUrl?: string;
|
|
202
|
-
submitButtonText?: string;
|
|
203
|
-
loadingButtonText?: string;
|
|
204
|
-
signUpText?: string;
|
|
205
|
-
signUpLinkText?: string;
|
|
206
|
-
signUpUrl?: string;
|
|
207
|
-
dividerText?: string;
|
|
208
|
-
}
|
|
209
|
-
/**
|
|
210
|
-
* Props for SignUpForm component
|
|
211
|
-
*/
|
|
212
|
-
interface SignUpFormProps {
|
|
213
|
-
email: string;
|
|
214
|
-
password: string;
|
|
215
|
-
onEmailChange: (email: string) => void;
|
|
216
|
-
onPasswordChange: (password: string) => void;
|
|
217
|
-
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
218
|
-
error?: string;
|
|
219
|
-
loading?: boolean;
|
|
220
|
-
oauthLoading?: OAuthProvider | null;
|
|
221
|
-
availableProviders?: OAuthProvider[];
|
|
222
|
-
onOAuthClick?: (provider: OAuthProvider) => void;
|
|
223
|
-
emailAuthConfig?: EmailAuthConfig;
|
|
224
|
-
appearance?: {
|
|
225
|
-
containerClassName?: string;
|
|
226
|
-
cardClassName?: string;
|
|
227
|
-
formClassName?: string;
|
|
228
|
-
buttonClassName?: string;
|
|
229
|
-
};
|
|
230
|
-
title?: string;
|
|
231
|
-
subtitle?: string;
|
|
232
|
-
emailLabel?: string;
|
|
233
|
-
emailPlaceholder?: string;
|
|
234
|
-
passwordLabel?: string;
|
|
235
|
-
passwordPlaceholder?: string;
|
|
236
|
-
submitButtonText?: string;
|
|
237
|
-
loadingButtonText?: string;
|
|
238
|
-
signInText?: string;
|
|
239
|
-
signInLinkText?: string;
|
|
240
|
-
signInUrl?: string;
|
|
241
|
-
dividerText?: string;
|
|
242
|
-
}
|
|
243
|
-
/**
|
|
244
|
-
* Props for ForgotPasswordForm component
|
|
245
|
-
*/
|
|
246
|
-
interface ForgotPasswordFormProps {
|
|
247
|
-
email: string;
|
|
248
|
-
onEmailChange: (email: string) => void;
|
|
249
|
-
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
250
|
-
error?: string;
|
|
251
|
-
loading?: boolean;
|
|
252
|
-
success?: boolean;
|
|
253
|
-
appearance?: {
|
|
254
|
-
containerClassName?: string;
|
|
255
|
-
cardClassName?: string;
|
|
256
|
-
formClassName?: string;
|
|
257
|
-
buttonClassName?: string;
|
|
258
|
-
};
|
|
259
|
-
title?: string;
|
|
260
|
-
subtitle?: string;
|
|
261
|
-
emailLabel?: string;
|
|
262
|
-
emailPlaceholder?: string;
|
|
263
|
-
submitButtonText?: string;
|
|
264
|
-
loadingButtonText?: string;
|
|
265
|
-
backToSignInText?: string;
|
|
266
|
-
backToSignInUrl?: string;
|
|
267
|
-
successTitle?: string;
|
|
268
|
-
successMessage?: string;
|
|
269
|
-
}
|
|
270
|
-
/**
|
|
271
|
-
* Props for ResetPasswordForm component
|
|
272
|
-
*/
|
|
273
|
-
interface ResetPasswordFormProps {
|
|
274
|
-
newPassword: string;
|
|
275
|
-
confirmPassword: string;
|
|
276
|
-
onNewPasswordChange: (password: string) => void;
|
|
277
|
-
onConfirmPasswordChange: (password: string) => void;
|
|
278
|
-
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
279
|
-
error?: string;
|
|
280
|
-
loading?: boolean;
|
|
281
|
-
emailAuthConfig?: EmailAuthConfig;
|
|
282
|
-
appearance?: {
|
|
283
|
-
containerClassName?: string;
|
|
284
|
-
cardClassName?: string;
|
|
285
|
-
formClassName?: string;
|
|
286
|
-
buttonClassName?: string;
|
|
287
|
-
};
|
|
288
|
-
title?: string;
|
|
289
|
-
subtitle?: string;
|
|
290
|
-
newPasswordLabel?: string;
|
|
291
|
-
newPasswordPlaceholder?: string;
|
|
292
|
-
confirmPasswordLabel?: string;
|
|
293
|
-
confirmPasswordPlaceholder?: string;
|
|
294
|
-
submitButtonText?: string;
|
|
295
|
-
loadingButtonText?: string;
|
|
296
|
-
backToSignInText?: string;
|
|
297
|
-
backToSignInUrl?: string;
|
|
298
|
-
}
|
|
299
|
-
/**
|
|
300
|
-
* Props for VerifyEmailStatus component
|
|
301
|
-
*/
|
|
302
|
-
interface VerifyEmailStatusProps {
|
|
303
|
-
status: 'verifying' | 'success' | 'error';
|
|
304
|
-
error?: string;
|
|
305
|
-
appearance?: {
|
|
306
|
-
containerClassName?: string;
|
|
307
|
-
cardClassName?: string;
|
|
308
|
-
};
|
|
309
|
-
verifyingTitle?: string;
|
|
310
|
-
successTitle?: string;
|
|
311
|
-
successMessage?: string;
|
|
312
|
-
errorTitle?: string;
|
|
313
|
-
}
|
|
314
|
-
/**
|
|
315
|
-
* Props for the SignIn component
|
|
316
|
-
*/
|
|
317
|
-
interface SignInProps {
|
|
318
|
-
afterSignInUrl?: string;
|
|
319
|
-
appearance?: {
|
|
320
|
-
containerClassName?: string;
|
|
321
|
-
cardClassName?: string;
|
|
322
|
-
formClassName?: string;
|
|
323
|
-
buttonClassName?: string;
|
|
324
|
-
};
|
|
325
|
-
title?: string;
|
|
326
|
-
subtitle?: string;
|
|
327
|
-
emailLabel?: string;
|
|
328
|
-
emailPlaceholder?: string;
|
|
329
|
-
passwordLabel?: string;
|
|
330
|
-
passwordPlaceholder?: string;
|
|
331
|
-
forgotPasswordText?: string;
|
|
332
|
-
forgotPasswordUrl?: string;
|
|
333
|
-
submitButtonText?: string;
|
|
334
|
-
loadingButtonText?: string;
|
|
335
|
-
signUpText?: string;
|
|
336
|
-
signUpLinkText?: string;
|
|
337
|
-
signUpUrl?: string;
|
|
338
|
-
dividerText?: string;
|
|
339
|
-
onSuccess?: (user: {
|
|
340
|
-
id: string;
|
|
341
|
-
email: string;
|
|
342
|
-
name: string;
|
|
343
|
-
}, accessToken: string) => void;
|
|
344
|
-
onError?: (error: Error) => void;
|
|
345
|
-
onRedirect?: (url: string) => void;
|
|
346
|
-
}
|
|
347
|
-
/**
|
|
348
|
-
* Props for the SignUp component
|
|
349
|
-
*/
|
|
350
|
-
interface SignUpProps {
|
|
351
|
-
afterSignUpUrl?: string;
|
|
352
|
-
appearance?: {
|
|
353
|
-
containerClassName?: string;
|
|
354
|
-
cardClassName?: string;
|
|
355
|
-
formClassName?: string;
|
|
356
|
-
buttonClassName?: string;
|
|
357
|
-
};
|
|
358
|
-
title?: string;
|
|
359
|
-
subtitle?: string;
|
|
360
|
-
emailLabel?: string;
|
|
361
|
-
emailPlaceholder?: string;
|
|
362
|
-
passwordLabel?: string;
|
|
363
|
-
passwordPlaceholder?: string;
|
|
364
|
-
submitButtonText?: string;
|
|
365
|
-
loadingButtonText?: string;
|
|
366
|
-
signInText?: string;
|
|
367
|
-
signInLinkText?: string;
|
|
368
|
-
signInUrl?: string;
|
|
369
|
-
dividerText?: string;
|
|
370
|
-
onSuccess?: (user: {
|
|
371
|
-
id: string;
|
|
372
|
-
email: string;
|
|
373
|
-
name: string;
|
|
374
|
-
}, accessToken: string) => void;
|
|
375
|
-
onError?: (error: Error) => void;
|
|
376
|
-
onRedirect?: (url: string) => void;
|
|
377
|
-
}
|
|
378
|
-
/**
|
|
379
|
-
* Props for Protect component
|
|
380
|
-
*/
|
|
381
|
-
interface ProtectProps {
|
|
382
|
-
children: ReactNode;
|
|
383
|
-
fallback?: ReactNode;
|
|
384
|
-
redirectTo?: string;
|
|
385
|
-
condition?: (user: InsforgeUser) => boolean;
|
|
386
|
-
onRedirect?: (url: string) => void;
|
|
387
|
-
}
|
|
388
|
-
/**
|
|
389
|
-
* Props for conditional rendering components (SignedIn, SignedOut)
|
|
390
|
-
*/
|
|
391
|
-
interface ConditionalProps {
|
|
392
|
-
children: ReactNode;
|
|
393
|
-
}
|
|
394
|
-
/**
|
|
395
|
-
* Props for UserButton component
|
|
396
|
-
*/
|
|
397
|
-
interface UserButtonProps {
|
|
398
|
-
afterSignOutUrl?: string;
|
|
399
|
-
mode?: 'detailed' | 'simple';
|
|
400
|
-
appearance?: {
|
|
401
|
-
containerClassName?: string;
|
|
402
|
-
buttonClassName?: string;
|
|
403
|
-
nameClassName?: string;
|
|
404
|
-
emailClassName?: string;
|
|
405
|
-
dropdownClassName?: string;
|
|
406
|
-
};
|
|
407
|
-
}
|
|
408
|
-
|
|
409
13
|
/**
|
|
410
14
|
* Pre-built sign-in component with full authentication logic.
|
|
411
15
|
*
|
|
@@ -587,545 +191,6 @@ interface InsforgeCallbackProps {
|
|
|
587
191
|
*/
|
|
588
192
|
declare function InsforgeCallback({ redirectTo, onSuccess, onError, loadingComponent, onRedirect, }: InsforgeCallbackProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
|
|
589
193
|
|
|
590
|
-
/**
|
|
591
|
-
* Pre-built sign-in form component (UI only, no business logic).
|
|
592
|
-
*
|
|
593
|
-
* @component
|
|
594
|
-
* @example
|
|
595
|
-
* ```tsx
|
|
596
|
-
* const [email, setEmail] = useState('');
|
|
597
|
-
* const [password, setPassword] = useState('');
|
|
598
|
-
* const [error, setError] = useState('');
|
|
599
|
-
* const [loading, setLoading] = useState(false);
|
|
600
|
-
*
|
|
601
|
-
* const handleSubmit = async (e) => {
|
|
602
|
-
* e.preventDefault();
|
|
603
|
-
* setLoading(true);
|
|
604
|
-
* try {
|
|
605
|
-
* await authService.signIn(email, password);
|
|
606
|
-
* } catch (err) {
|
|
607
|
-
* setError(err.message);
|
|
608
|
-
* } finally {
|
|
609
|
-
* setLoading(false);
|
|
610
|
-
* }
|
|
611
|
-
* };
|
|
612
|
-
*
|
|
613
|
-
* <SignInForm
|
|
614
|
-
* email={email}
|
|
615
|
-
* password={password}
|
|
616
|
-
* onEmailChange={setEmail}
|
|
617
|
-
* onPasswordChange={setPassword}
|
|
618
|
-
* onSubmit={handleSubmit}
|
|
619
|
-
* error={error}
|
|
620
|
-
* loading={loading}
|
|
621
|
-
* />
|
|
622
|
-
* ```
|
|
623
|
-
*/
|
|
624
|
-
declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, emailAuthConfig, appearance, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, }: SignInFormProps): react_jsx_runtime.JSX.Element;
|
|
625
|
-
|
|
626
|
-
/**
|
|
627
|
-
* Pre-built sign-up form component (UI only, no business logic).
|
|
628
|
-
*
|
|
629
|
-
* @component
|
|
630
|
-
* @example
|
|
631
|
-
* ```tsx
|
|
632
|
-
* const [email, setEmail] = useState('');
|
|
633
|
-
* const [password, setPassword] = useState('');
|
|
634
|
-
* const [error, setError] = useState('');
|
|
635
|
-
* const [loading, setLoading] = useState(false);
|
|
636
|
-
*
|
|
637
|
-
* const handleSubmit = async (e) => {
|
|
638
|
-
* e.preventDefault();
|
|
639
|
-
* setLoading(true);
|
|
640
|
-
* try {
|
|
641
|
-
* await authService.signUp(email, password);
|
|
642
|
-
* } catch (err) {
|
|
643
|
-
* setError(err.message);
|
|
644
|
-
* } finally {
|
|
645
|
-
* setLoading(false);
|
|
646
|
-
* }
|
|
647
|
-
* };
|
|
648
|
-
*
|
|
649
|
-
* <SignUpForm
|
|
650
|
-
* email={email}
|
|
651
|
-
* password={password}
|
|
652
|
-
* onEmailChange={setEmail}
|
|
653
|
-
* onPasswordChange={setPassword}
|
|
654
|
-
* onSubmit={handleSubmit}
|
|
655
|
-
* error={error}
|
|
656
|
-
* loading={loading}
|
|
657
|
-
* />
|
|
658
|
-
* ```
|
|
659
|
-
*/
|
|
660
|
-
declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, emailAuthConfig, appearance, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
|
|
661
|
-
|
|
662
|
-
/**
|
|
663
|
-
* Pre-built forgot password form component (UI only, no business logic).
|
|
664
|
-
*
|
|
665
|
-
* @component
|
|
666
|
-
* @example
|
|
667
|
-
* ```tsx
|
|
668
|
-
* const [email, setEmail] = useState('');
|
|
669
|
-
* const [error, setError] = useState('');
|
|
670
|
-
* const [loading, setLoading] = useState(false);
|
|
671
|
-
* const [success, setSuccess] = useState(false);
|
|
672
|
-
*
|
|
673
|
-
* const handleSubmit = async (e) => {
|
|
674
|
-
* e.preventDefault();
|
|
675
|
-
* setLoading(true);
|
|
676
|
-
* try {
|
|
677
|
-
* await authService.sendResetPasswordCode({ email });
|
|
678
|
-
* setSuccess(true);
|
|
679
|
-
* } catch (err) {
|
|
680
|
-
* setError(err.message);
|
|
681
|
-
* } finally {
|
|
682
|
-
* setLoading(false);
|
|
683
|
-
* }
|
|
684
|
-
* };
|
|
685
|
-
*
|
|
686
|
-
* <ForgotPasswordForm
|
|
687
|
-
* email={email}
|
|
688
|
-
* onEmailChange={setEmail}
|
|
689
|
-
* onSubmit={handleSubmit}
|
|
690
|
-
* error={error}
|
|
691
|
-
* loading={loading}
|
|
692
|
-
* success={success}
|
|
693
|
-
* />
|
|
694
|
-
* ```
|
|
695
|
-
*/
|
|
696
|
-
declare function ForgotPasswordForm({ email, onEmailChange, onSubmit, error, loading, success, appearance, title, subtitle, emailLabel, emailPlaceholder, submitButtonText, loadingButtonText, backToSignInText, backToSignInUrl, successTitle, successMessage, }: ForgotPasswordFormProps): react_jsx_runtime.JSX.Element;
|
|
697
|
-
|
|
698
|
-
/**
|
|
699
|
-
* Pre-built reset password form component (UI only, no business logic).
|
|
700
|
-
*
|
|
701
|
-
* @component
|
|
702
|
-
* @example
|
|
703
|
-
* ```tsx
|
|
704
|
-
* const [newPassword, setNewPassword] = useState('');
|
|
705
|
-
* const [confirmPassword, setConfirmPassword] = useState('');
|
|
706
|
-
* const [error, setError] = useState('');
|
|
707
|
-
* const [loading, setLoading] = useState(false);
|
|
708
|
-
*
|
|
709
|
-
* const handleSubmit = async (e) => {
|
|
710
|
-
* e.preventDefault();
|
|
711
|
-
* if (newPassword !== confirmPassword) {
|
|
712
|
-
* setError('Passwords do not match');
|
|
713
|
-
* return;
|
|
714
|
-
* }
|
|
715
|
-
* setLoading(true);
|
|
716
|
-
* try {
|
|
717
|
-
* await authService.resetPassword({ newPassword, token });
|
|
718
|
-
* } catch (err) {
|
|
719
|
-
* setError(err.message);
|
|
720
|
-
* } finally {
|
|
721
|
-
* setLoading(false);
|
|
722
|
-
* }
|
|
723
|
-
* };
|
|
724
|
-
*
|
|
725
|
-
* <ResetPasswordForm
|
|
726
|
-
* newPassword={newPassword}
|
|
727
|
-
* confirmPassword={confirmPassword}
|
|
728
|
-
* onNewPasswordChange={setNewPassword}
|
|
729
|
-
* onConfirmPasswordChange={setConfirmPassword}
|
|
730
|
-
* onSubmit={handleSubmit}
|
|
731
|
-
* error={error}
|
|
732
|
-
* loading={loading}
|
|
733
|
-
* emailAuthConfig={config}
|
|
734
|
-
* />
|
|
735
|
-
* ```
|
|
736
|
-
*/
|
|
737
|
-
declare function ResetPasswordForm({ newPassword, confirmPassword, onNewPasswordChange, onConfirmPasswordChange, onSubmit, error, loading, emailAuthConfig, appearance, title, subtitle, newPasswordLabel, newPasswordPlaceholder, confirmPasswordLabel, confirmPasswordPlaceholder, submitButtonText, loadingButtonText, backToSignInText, backToSignInUrl, }: ResetPasswordFormProps): react_jsx_runtime.JSX.Element;
|
|
738
|
-
|
|
739
|
-
/**
|
|
740
|
-
* Email verification status display component (UI only, no business logic).
|
|
741
|
-
*
|
|
742
|
-
* @component
|
|
743
|
-
* @example
|
|
744
|
-
* ```tsx
|
|
745
|
-
* const [status, setStatus] = useState('verifying');
|
|
746
|
-
* const [error, setError] = useState('');
|
|
747
|
-
*
|
|
748
|
-
* useEffect(() => {
|
|
749
|
-
* const verify = async () => {
|
|
750
|
-
* try {
|
|
751
|
-
* await authService.verifyEmail({ token });
|
|
752
|
-
* setStatus('success');
|
|
753
|
-
* } catch (err) {
|
|
754
|
-
* setError(err.message);
|
|
755
|
-
* setStatus('error');
|
|
756
|
-
* }
|
|
757
|
-
* };
|
|
758
|
-
* verify();
|
|
759
|
-
* }, [token]);
|
|
760
|
-
*
|
|
761
|
-
* <VerifyEmailStatus
|
|
762
|
-
* status={status}
|
|
763
|
-
* error={error}
|
|
764
|
-
* />
|
|
765
|
-
* ```
|
|
766
|
-
*/
|
|
767
|
-
declare function VerifyEmailStatus({ status, error, appearance, verifyingTitle, successTitle, successMessage, errorTitle, }: VerifyEmailStatusProps): react_jsx_runtime.JSX.Element;
|
|
768
|
-
|
|
769
|
-
/**
|
|
770
|
-
* Insforge branding component for authentication pages.
|
|
771
|
-
*
|
|
772
|
-
* @component
|
|
773
|
-
* @example
|
|
774
|
-
* ```tsx
|
|
775
|
-
* <AuthBranding />
|
|
776
|
-
* ```
|
|
777
|
-
*/
|
|
778
|
-
declare function AuthBranding(): react_jsx_runtime.JSX.Element;
|
|
779
|
-
|
|
780
|
-
/**
|
|
781
|
-
* Main container component for authentication forms.
|
|
782
|
-
*
|
|
783
|
-
* @component
|
|
784
|
-
* @example
|
|
785
|
-
* ```tsx
|
|
786
|
-
* <AuthContainer>
|
|
787
|
-
* <AuthHeader title="Sign In" />
|
|
788
|
-
* <form>...</form>
|
|
789
|
-
* </AuthContainer>
|
|
790
|
-
*
|
|
791
|
-
* // With custom styling
|
|
792
|
-
* <AuthContainer
|
|
793
|
-
* appearance={{
|
|
794
|
-
* cardClassName: "bg-gray-50"
|
|
795
|
-
* }}
|
|
796
|
-
* >
|
|
797
|
-
* <AuthHeader title="Sign In" />
|
|
798
|
-
* <form>...</form>
|
|
799
|
-
* </AuthContainer>
|
|
800
|
-
* ```
|
|
801
|
-
*
|
|
802
|
-
* @param {ReactNode} children - Form content
|
|
803
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
804
|
-
* - `appearance.containerClassName`: Outer container element
|
|
805
|
-
* - `appearance.cardClassName`: Inner card element (white background area)
|
|
806
|
-
*/
|
|
807
|
-
declare function AuthContainer({ children, appearance }: AuthContainerProps): react_jsx_runtime.JSX.Element;
|
|
808
|
-
|
|
809
|
-
/**
|
|
810
|
-
* Header component for authentication forms displaying title and optional subtitle.
|
|
811
|
-
*
|
|
812
|
-
* @component
|
|
813
|
-
* @example
|
|
814
|
-
* ```tsx
|
|
815
|
-
* // Basic usage
|
|
816
|
-
* <AuthHeader
|
|
817
|
-
* title="Welcome Back"
|
|
818
|
-
* subtitle="Sign in to continue"
|
|
819
|
-
* />
|
|
820
|
-
*
|
|
821
|
-
* // With custom styling
|
|
822
|
-
* <AuthHeader
|
|
823
|
-
* title="Welcome Back"
|
|
824
|
-
* appearance={{
|
|
825
|
-
* titleClassName: "text-purple-900 text-3xl",
|
|
826
|
-
* subtitleClassName: "text-purple-700"
|
|
827
|
-
* }}
|
|
828
|
-
* />
|
|
829
|
-
* ```
|
|
830
|
-
*
|
|
831
|
-
* @param {string} title - Main heading text
|
|
832
|
-
* @param {string} [subtitle] - Optional subheading text
|
|
833
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
834
|
-
* - `appearance.containerClassName`: Container element
|
|
835
|
-
* - `appearance.titleClassName`: Title element
|
|
836
|
-
* - `appearance.subtitleClassName`: Subtitle element
|
|
837
|
-
*/
|
|
838
|
-
declare function AuthHeader({ title, subtitle, appearance }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
|
|
839
|
-
|
|
840
|
-
/**
|
|
841
|
-
* Error message banner for authentication forms.
|
|
842
|
-
*
|
|
843
|
-
* @component
|
|
844
|
-
* @example
|
|
845
|
-
* ```tsx
|
|
846
|
-
* <AuthErrorBanner error={error} />
|
|
847
|
-
* ```
|
|
848
|
-
*
|
|
849
|
-
* @param {string} error - Error message to display
|
|
850
|
-
* @param {string} [className] - Banner element classes
|
|
851
|
-
*/
|
|
852
|
-
declare function AuthErrorBanner({ error, className }: AuthErrorBannerProps): react_jsx_runtime.JSX.Element | null;
|
|
853
|
-
|
|
854
|
-
/**
|
|
855
|
-
* Standard form input field with label for authentication forms.
|
|
856
|
-
*
|
|
857
|
-
* @component
|
|
858
|
-
* @example
|
|
859
|
-
* ```tsx
|
|
860
|
-
* // Basic usage
|
|
861
|
-
* <AuthFormField
|
|
862
|
-
* id="email"
|
|
863
|
-
* type="email"
|
|
864
|
-
* label="Email Address"
|
|
865
|
-
* />
|
|
866
|
-
*
|
|
867
|
-
* // With custom styling
|
|
868
|
-
* <AuthFormField
|
|
869
|
-
* id="email"
|
|
870
|
-
* label="Email"
|
|
871
|
-
* appearance={{
|
|
872
|
-
* containerClassName: "flex flex-col justify-center items-stretch gap-1",
|
|
873
|
-
* inputClassName: "border-blue-500 focus:ring-blue-500",
|
|
874
|
-
* labelClassName: "text-blue-900 font-semibold"
|
|
875
|
-
* }}
|
|
876
|
-
* />
|
|
877
|
-
* ```
|
|
878
|
-
*
|
|
879
|
-
* @param {string} label - Label text
|
|
880
|
-
* @param {string} id - Input element ID
|
|
881
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
882
|
-
* - `appearance.containerClassName`: Container element
|
|
883
|
-
* - `appearance.labelClassName`: Label element
|
|
884
|
-
* - `appearance.inputClassName`: Input element
|
|
885
|
-
*/
|
|
886
|
-
declare function AuthFormField({ label, id, appearance, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
|
|
887
|
-
|
|
888
|
-
/**
|
|
889
|
-
* Password input field with visibility toggle and optional strength indicator.
|
|
890
|
-
*
|
|
891
|
-
* @component
|
|
892
|
-
* @example
|
|
893
|
-
* ```tsx
|
|
894
|
-
* // With forgot password link
|
|
895
|
-
* <AuthPasswordField
|
|
896
|
-
* id="password"
|
|
897
|
-
* label="Password"
|
|
898
|
-
* forgotPasswordLink={{ href: '/forgot-password' }}
|
|
899
|
-
* emailAuthConfig={config}
|
|
900
|
-
* />
|
|
901
|
-
*
|
|
902
|
-
* // With custom styling
|
|
903
|
-
* <AuthPasswordField
|
|
904
|
-
* id="password"
|
|
905
|
-
* label="Password"
|
|
906
|
-
* emailAuthConfig={config}
|
|
907
|
-
* appearance={{
|
|
908
|
-
* inputClassName: "border-blue-500",
|
|
909
|
-
* labelClassName: "text-blue-900"
|
|
910
|
-
* }}
|
|
911
|
-
* />
|
|
912
|
-
* ```
|
|
913
|
-
*
|
|
914
|
-
* @param {string} label - Label text
|
|
915
|
-
* @param {string} id - Input element ID
|
|
916
|
-
* @param {boolean} [showStrengthIndicator] - Show password strength requirements
|
|
917
|
-
* @param {object} [forgotPasswordLink] - Forgot password link config
|
|
918
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
919
|
-
* - `appearance.containerClassName`: Container element
|
|
920
|
-
* - `appearance.labelClassName`: Label element
|
|
921
|
-
* - `appearance.inputClassName`: Input element
|
|
922
|
-
*/
|
|
923
|
-
declare function AuthPasswordField({ label, id, showStrengthIndicator, emailAuthConfig, forgotPasswordLink, value, appearance, onFocus, ...props }: AuthPasswordFieldProps): react_jsx_runtime.JSX.Element;
|
|
924
|
-
|
|
925
|
-
/**
|
|
926
|
-
* Password strength indicator showing requirement checklist.
|
|
927
|
-
*
|
|
928
|
-
* @component
|
|
929
|
-
* @example
|
|
930
|
-
* ```tsx
|
|
931
|
-
* <AuthPasswordStrengthIndicator
|
|
932
|
-
* password={password}
|
|
933
|
-
* config={emailAuthConfig}
|
|
934
|
-
* />
|
|
935
|
-
*
|
|
936
|
-
* // With custom styling
|
|
937
|
-
* <AuthPasswordStrengthIndicator
|
|
938
|
-
* password={password}
|
|
939
|
-
* config={emailAuthConfig}
|
|
940
|
-
* appearance={{
|
|
941
|
-
* requirementClassName: "text-lg"
|
|
942
|
-
* }}
|
|
943
|
-
* />
|
|
944
|
-
* ```
|
|
945
|
-
*
|
|
946
|
-
* @param {string} password - Current password value
|
|
947
|
-
* @param {object} config - Email auth configuration
|
|
948
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
949
|
-
* - `appearance.containerClassName`: Container element
|
|
950
|
-
* - `appearance.requirementClassName`: Requirement text elements
|
|
951
|
-
*/
|
|
952
|
-
declare function AuthPasswordStrengthIndicator({ password, config, appearance, }: AuthPasswordStrengthIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
953
|
-
/**
|
|
954
|
-
* Validates that a password meets all strength requirements based on email auth configuration.
|
|
955
|
-
*
|
|
956
|
-
* @param password - The password string to validate
|
|
957
|
-
* @param config - Email authentication configuration from backend
|
|
958
|
-
* @returns true if all requirements are met, false otherwise
|
|
959
|
-
*/
|
|
960
|
-
declare function validatePasswordStrength(password: string, config: EmailAuthConfig): boolean;
|
|
961
|
-
|
|
962
|
-
/**
|
|
963
|
-
* Primary submit button for authentication forms with loading and confirmed states.
|
|
964
|
-
*
|
|
965
|
-
* @component
|
|
966
|
-
* @example
|
|
967
|
-
* ```tsx
|
|
968
|
-
* // Basic usage
|
|
969
|
-
* <AuthSubmitButton isLoading={loading}>
|
|
970
|
-
* Sign In
|
|
971
|
-
* </AuthSubmitButton>
|
|
972
|
-
*
|
|
973
|
-
* // With custom styling
|
|
974
|
-
* <AuthSubmitButton className="bg-purple-600 hover:bg-purple-700">
|
|
975
|
-
* Sign In
|
|
976
|
-
* </AuthSubmitButton>
|
|
977
|
-
* ```
|
|
978
|
-
*
|
|
979
|
-
* @param {ReactNode} children - Button text
|
|
980
|
-
* @param {boolean} [isLoading] - Loading state (shows spinner)
|
|
981
|
-
* @param {boolean} [confirmed] - Confirmed state (shows checkmark)
|
|
982
|
-
* @param {boolean} [disabled] - Disabled state
|
|
983
|
-
* @param {string} [className] - Button element classes
|
|
984
|
-
*/
|
|
985
|
-
declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, className, }: AuthSubmitButtonProps): react_jsx_runtime.JSX.Element;
|
|
986
|
-
|
|
987
|
-
/**
|
|
988
|
-
* Call-to-action link component for navigation between auth pages.
|
|
989
|
-
*
|
|
990
|
-
* @component
|
|
991
|
-
* @example
|
|
992
|
-
* ```tsx
|
|
993
|
-
* <AuthLink
|
|
994
|
-
* text="Don't have an account?"
|
|
995
|
-
* linkText="Sign up"
|
|
996
|
-
* href="/sign-up"
|
|
997
|
-
* />
|
|
998
|
-
*
|
|
999
|
-
* // With custom styling
|
|
1000
|
-
* <AuthLink
|
|
1001
|
-
* text="Don't have an account?"
|
|
1002
|
-
* linkText="Sign up"
|
|
1003
|
-
* href="/sign-up"
|
|
1004
|
-
* appearance={{
|
|
1005
|
-
* linkClassName: "text-blue-500"
|
|
1006
|
-
* }}
|
|
1007
|
-
* />
|
|
1008
|
-
* ```
|
|
1009
|
-
*
|
|
1010
|
-
* @param {string} text - Regular text before the link
|
|
1011
|
-
* @param {string} linkText - Clickable link text
|
|
1012
|
-
* @param {string} href - Link URL
|
|
1013
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
1014
|
-
* - `appearance.containerClassName`: Container element
|
|
1015
|
-
* - `appearance.linkClassName`: Link element
|
|
1016
|
-
*/
|
|
1017
|
-
declare function AuthLink({ text, linkText, href, appearance }: AuthLinkProps): react_jsx_runtime.JSX.Element;
|
|
1018
|
-
|
|
1019
|
-
/**
|
|
1020
|
-
* Visual divider with optional centered text for auth forms.
|
|
1021
|
-
*
|
|
1022
|
-
* @component
|
|
1023
|
-
* @example
|
|
1024
|
-
* ```tsx
|
|
1025
|
-
* <AuthDivider text="or" />
|
|
1026
|
-
* ```
|
|
1027
|
-
*
|
|
1028
|
-
* @param {string} [text='or'] - Centered text
|
|
1029
|
-
* @param {string} [className] - Divider element classes
|
|
1030
|
-
*/
|
|
1031
|
-
declare function AuthDivider({ text, className }: AuthDividerProps): react_jsx_runtime.JSX.Element;
|
|
1032
|
-
|
|
1033
|
-
/**
|
|
1034
|
-
* OAuth provider button with adaptive display modes.
|
|
1035
|
-
*
|
|
1036
|
-
* @component
|
|
1037
|
-
* @example
|
|
1038
|
-
* ```tsx
|
|
1039
|
-
* <AuthOAuthButton
|
|
1040
|
-
* provider="google"
|
|
1041
|
-
* onClick={handleOAuth}
|
|
1042
|
-
* displayMode="full"
|
|
1043
|
-
* />
|
|
1044
|
-
* ```
|
|
1045
|
-
*
|
|
1046
|
-
* @param {OAuthProvider} provider - Provider identifier (e.g., 'google', 'github')
|
|
1047
|
-
* @param {function} onClick - Click handler
|
|
1048
|
-
* @param {boolean} [disabled] - Disabled state
|
|
1049
|
-
* @param {boolean} [loading] - Loading state (shows spinner)
|
|
1050
|
-
* @param {string} [displayMode='full'] - Display mode ('full' | 'short' | 'icon')
|
|
1051
|
-
* @param {string} [className] - Button element classes
|
|
1052
|
-
*/
|
|
1053
|
-
declare function AuthOAuthButton({ provider, onClick, disabled, loading, displayMode, style, className }: AuthOAuthButtonProps): react_jsx_runtime.JSX.Element | null;
|
|
1054
|
-
|
|
1055
|
-
/**
|
|
1056
|
-
* Smart OAuth provider grid with adaptive layout.
|
|
1057
|
-
*
|
|
1058
|
-
* Automatically adjusts layout based on provider count:
|
|
1059
|
-
* - 1 provider: Full-width
|
|
1060
|
-
* - 2 or 4 providers: Two columns
|
|
1061
|
-
* - 3+ providers: Three columns
|
|
1062
|
-
*
|
|
1063
|
-
* @component
|
|
1064
|
-
* @example
|
|
1065
|
-
* ```tsx
|
|
1066
|
-
* <AuthOAuthProviders
|
|
1067
|
-
* providers={['google', 'github', 'discord']}
|
|
1068
|
-
* onClick={handleOAuth}
|
|
1069
|
-
* loading={currentProvider}
|
|
1070
|
-
* />
|
|
1071
|
-
*
|
|
1072
|
-
* // With custom styling
|
|
1073
|
-
* <AuthOAuthProviders
|
|
1074
|
-
* providers={['google', 'github']}
|
|
1075
|
-
* onClick={handleOAuth}
|
|
1076
|
-
* loading={currentProvider}
|
|
1077
|
-
* appearance={{
|
|
1078
|
-
* buttonClassName: "hover:bg-blue-50"
|
|
1079
|
-
* }}
|
|
1080
|
-
* />
|
|
1081
|
-
* ```
|
|
1082
|
-
*
|
|
1083
|
-
* @param {OAuthProvider[]} providers - Provider identifiers array
|
|
1084
|
-
* @param {function} onClick - Provider click handler
|
|
1085
|
-
* @param {boolean} [disabled] - Disabled state for all buttons
|
|
1086
|
-
* @param {OAuthProvider | null} loading - Currently loading provider
|
|
1087
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
1088
|
-
* - `appearance.containerClassName`: Grid container element
|
|
1089
|
-
* - `appearance.buttonClassName`: OAuth button elements
|
|
1090
|
-
*/
|
|
1091
|
-
declare function AuthOAuthProviders({ providers, onClick, disabled, loading, appearance, }: AuthOAuthProvidersProps): react_jsx_runtime.JSX.Element | null;
|
|
1092
|
-
|
|
1093
|
-
/**
|
|
1094
|
-
* 6-digit verification code input component with auto-focus and paste support.
|
|
1095
|
-
*
|
|
1096
|
-
* @component
|
|
1097
|
-
* @example
|
|
1098
|
-
* ```tsx
|
|
1099
|
-
* const [code, setCode] = useState('');
|
|
1100
|
-
*
|
|
1101
|
-
* <AuthVerificationCodeInput
|
|
1102
|
-
* email="user@example.com"
|
|
1103
|
-
* value={code}
|
|
1104
|
-
* onChange={setCode}
|
|
1105
|
-
* />
|
|
1106
|
-
*
|
|
1107
|
-
* // With custom styling
|
|
1108
|
-
* <AuthVerificationCodeInput
|
|
1109
|
-
* email="user@example.com"
|
|
1110
|
-
* value={code}
|
|
1111
|
-
* onChange={setCode}
|
|
1112
|
-
* appearance={{
|
|
1113
|
-
* inputClassName: "border-blue-500"
|
|
1114
|
-
* }}
|
|
1115
|
-
* />
|
|
1116
|
-
* ```
|
|
1117
|
-
*
|
|
1118
|
-
* @param {string} email - Email address to display in instructions
|
|
1119
|
-
* @param {string} value - Current code value
|
|
1120
|
-
* @param {function} onChange - Code change handler
|
|
1121
|
-
* @param {number} [length=6] - Number of digits
|
|
1122
|
-
* @param {boolean} [disabled] - Disabled state
|
|
1123
|
-
* @param {object} [appearance] - Tailwind CSS classes for styling
|
|
1124
|
-
* - `appearance.containerClassName`: Container element
|
|
1125
|
-
* - `appearance.inputClassName`: Input elements
|
|
1126
|
-
*/
|
|
1127
|
-
declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
|
|
1128
|
-
|
|
1129
194
|
interface InsforgeContextValue {
|
|
1130
195
|
user: InsforgeUser | null;
|
|
1131
196
|
isLoaded: boolean;
|
|
@@ -1374,6 +439,7 @@ declare function usePublicAuthConfig(): {
|
|
|
1374
439
|
isLoaded: boolean;
|
|
1375
440
|
};
|
|
1376
441
|
|
|
442
|
+
declare const OAUTH_PROVIDER_CONFIG: Record<OAuthProvider, OAuthProviderConfig>;
|
|
1377
443
|
/**
|
|
1378
444
|
* Get OAuth provider configuration by provider name
|
|
1379
445
|
*/
|
|
@@ -1383,4 +449,4 @@ declare function getProviderConfig(provider: OAuthProvider): OAuthProviderConfig
|
|
|
1383
449
|
*/
|
|
1384
450
|
declare function getAllProviderConfigs(): Partial<Record<OAuthProvider, OAuthProviderConfig>>;
|
|
1385
451
|
|
|
1386
|
-
export {
|
|
452
|
+
export { ConditionalProps, InsforgeCallback, type InsforgeCallbackProps, InsforgeProvider, type InsforgeProviderProps, InsforgeUser, OAUTH_PROVIDER_CONFIG, OAuthProvider, OAuthProviderConfig, Protect, ProtectProps, SignIn, SignInProps, SignUp, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, getAllProviderConfigs, getProviderConfig, useAuth, useInsforge, usePublicAuthConfig, useUser };
|