@insforge/react 0.1.6 → 0.1.7
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/components.d.mts +190 -0
- package/dist/components.d.ts +190 -0
- package/dist/components.js +1562 -0
- package/dist/components.js.map +1 -0
- package/dist/components.mjs +1535 -0
- package/dist/components.mjs.map +1 -0
- package/dist/hooks.d.mts +139 -0
- package/dist/hooks.d.ts +139 -0
- package/dist/hooks.js +72 -0
- package/dist/hooks.js.map +1 -0
- package/dist/hooks.mjs +68 -0
- package/dist/hooks.mjs.map +1 -0
- package/dist/index.d.mts +8 -322
- package/dist/index.d.ts +8 -322
- package/package.json +11 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,196 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
import { SignInProps, SignUpProps, UserButtonProps, ProtectProps, ConditionalProps, InsforgeUser, OAuthProvider, OAuthProviderConfig } from './types.mjs';
|
|
3
|
-
export { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ForgotPasswordFormProps, ResetPasswordFormProps, SignInFormProps, SignUpFormProps, VerifyEmailStatusProps } from './types.mjs';
|
|
4
|
-
import * as react from 'react';
|
|
5
|
-
import { ReactNode } from 'react';
|
|
1
|
+
export { InsforgeCallback, InsforgeCallbackProps, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton } from './components.mjs';
|
|
6
2
|
export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.mjs';
|
|
7
3
|
export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.mjs';
|
|
8
|
-
import
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
import { InsforgeUser, OAuthProvider, OAuthProviderConfig } from './types.mjs';
|
|
7
|
+
export { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ConditionalProps, ForgotPasswordFormProps, ProtectProps, ResetPasswordFormProps, SignInFormProps, SignInProps, SignUpFormProps, SignUpProps, UserButtonProps, VerifyEmailStatusProps } from './types.mjs';
|
|
8
|
+
export { useAuth, usePublicAuthConfig, useUser } from './hooks.mjs';
|
|
9
9
|
export { checkPasswordStrength, cn, createPasswordSchema, emailSchema, passwordSchema, validateEmail, validatePassword } from './lib.mjs';
|
|
10
|
+
import '@insforge/shared-schemas';
|
|
10
11
|
import 'clsx';
|
|
11
12
|
import 'zod';
|
|
12
13
|
|
|
13
|
-
/**
|
|
14
|
-
* Pre-built sign-in component with full authentication logic.
|
|
15
|
-
*
|
|
16
|
-
* @component
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* <SignIn afterSignInUrl="/dashboard" />
|
|
20
|
-
*
|
|
21
|
-
* // With custom callbacks
|
|
22
|
-
* <SignIn
|
|
23
|
-
* onSuccess={(user) => console.log('Signed in:', user)}
|
|
24
|
-
* onError={(error) => console.error('Error:', error)}
|
|
25
|
-
* />
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
declare function SignIn({ afterSignInUrl, onSuccess, onError, onRedirect, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Pre-built sign-up component with full authentication logic.
|
|
32
|
-
*
|
|
33
|
-
* @component
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* <SignUp afterSignUpUrl="/onboarding" />
|
|
37
|
-
*
|
|
38
|
-
* // With custom callbacks
|
|
39
|
-
* <SignUp
|
|
40
|
-
* onSuccess={(user) => console.log('Signed up:', user)}
|
|
41
|
-
* onError={(error) => console.error('Error:', error)}
|
|
42
|
-
* />
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
declare function SignUp({ afterSignUpUrl, onSuccess, onError, onRedirect, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* User profile button with dropdown menu and sign-out functionality.
|
|
49
|
-
*
|
|
50
|
-
* @component
|
|
51
|
-
* @example
|
|
52
|
-
* ```tsx
|
|
53
|
-
* <UserButton afterSignOutUrl="/" />
|
|
54
|
-
*
|
|
55
|
-
* // Simple mode
|
|
56
|
-
* <UserButton mode="simple" />
|
|
57
|
-
*
|
|
58
|
-
* // With custom styling
|
|
59
|
-
* <UserButton
|
|
60
|
-
* appearance={{
|
|
61
|
-
* buttonClassName: "hover:bg-white/10",
|
|
62
|
-
* dropdownClassName: "bg-gray-900"
|
|
63
|
-
* }}
|
|
64
|
-
* />
|
|
65
|
-
* ```
|
|
66
|
-
*
|
|
67
|
-
* @param {string} [afterSignOutUrl='/'] - URL to redirect to after sign-out
|
|
68
|
-
* @param {'detailed'|'simple'} [mode='detailed'] - Display mode
|
|
69
|
-
* @param {object} [appearance] - Custom Tailwind classes
|
|
70
|
-
*/
|
|
71
|
-
declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Protected route component that redirects unauthenticated users.
|
|
75
|
-
*
|
|
76
|
-
* @component
|
|
77
|
-
* @example
|
|
78
|
-
* ```tsx
|
|
79
|
-
* // Basic usage
|
|
80
|
-
* <Protect redirectTo="/sign-in">
|
|
81
|
-
* <Dashboard />
|
|
82
|
-
* </Protect>
|
|
83
|
-
*
|
|
84
|
-
* // With custom redirect handler (e.g., for Next.js router)
|
|
85
|
-
* <Protect
|
|
86
|
-
* redirectTo="/sign-in"
|
|
87
|
-
* onRedirect={(url) => router.push(url)}
|
|
88
|
-
* >
|
|
89
|
-
* <AdminPanel />
|
|
90
|
-
* </Protect>
|
|
91
|
-
*
|
|
92
|
-
* // With custom condition (role-based access)
|
|
93
|
-
* <Protect
|
|
94
|
-
* redirectTo="/unauthorized"
|
|
95
|
-
* condition={(user) => user.role === 'admin'}
|
|
96
|
-
* >
|
|
97
|
-
* <AdminContent />
|
|
98
|
-
* </Protect>
|
|
99
|
-
* ```
|
|
100
|
-
*
|
|
101
|
-
* @param {ReactNode} children - Content to protect
|
|
102
|
-
* @param {ReactNode} [fallback] - Fallback UI while loading
|
|
103
|
-
* @param {string} [redirectTo='/sign-in'] - Redirect URL
|
|
104
|
-
* @param {function} [condition] - Custom access condition
|
|
105
|
-
* @param {function} [onRedirect] - Custom redirect handler (default: window.location)
|
|
106
|
-
*/
|
|
107
|
-
declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Conditional component that renders children only when user is signed in.
|
|
111
|
-
*
|
|
112
|
-
* @component
|
|
113
|
-
* @example
|
|
114
|
-
* ```tsx
|
|
115
|
-
* <SignedIn>
|
|
116
|
-
* <Dashboard />
|
|
117
|
-
* </SignedIn>
|
|
118
|
-
* ```
|
|
119
|
-
*
|
|
120
|
-
* @param {ReactNode} children - React nodes to render when user is authenticated
|
|
121
|
-
* @returns {JSX.Element | null} Renders children when signed in, null otherwise
|
|
122
|
-
*/
|
|
123
|
-
declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Conditional component that renders children only when user is signed out.
|
|
127
|
-
*
|
|
128
|
-
* @component
|
|
129
|
-
* @example
|
|
130
|
-
* ```tsx
|
|
131
|
-
* <SignedOut>
|
|
132
|
-
* <SignIn />
|
|
133
|
-
* </SignedOut>
|
|
134
|
-
* ```
|
|
135
|
-
*
|
|
136
|
-
* @param {ReactNode} children - React nodes to render when user is not authenticated
|
|
137
|
-
* @returns {JSX.Element | null} Renders children when signed out, null otherwise
|
|
138
|
-
*/
|
|
139
|
-
declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
|
|
140
|
-
|
|
141
|
-
interface InsforgeCallbackProps {
|
|
142
|
-
/**
|
|
143
|
-
* Redirect destination after successful authentication
|
|
144
|
-
*/
|
|
145
|
-
redirectTo?: string;
|
|
146
|
-
/**
|
|
147
|
-
* Callback fired on successful authentication
|
|
148
|
-
*/
|
|
149
|
-
onSuccess?: () => void;
|
|
150
|
-
/**
|
|
151
|
-
* Callback fired on authentication error
|
|
152
|
-
*/
|
|
153
|
-
onError?: (error: string) => void;
|
|
154
|
-
/**
|
|
155
|
-
* Custom loading component
|
|
156
|
-
*/
|
|
157
|
-
loadingComponent?: ReactNode;
|
|
158
|
-
/**
|
|
159
|
-
* Custom redirect handler (default: window.location)
|
|
160
|
-
*/
|
|
161
|
-
onRedirect?: (url: string) => void;
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* InsforgeCallback - Handles OAuth and email/password authentication callbacks
|
|
165
|
-
*
|
|
166
|
-
* Place this component on your `/auth/callback` page.
|
|
167
|
-
*
|
|
168
|
-
* @example
|
|
169
|
-
* ```tsx
|
|
170
|
-
* // Minimal usage
|
|
171
|
-
* export default function CallbackPage() {
|
|
172
|
-
* return <InsforgeCallback />;
|
|
173
|
-
* }
|
|
174
|
-
* ```
|
|
175
|
-
*
|
|
176
|
-
* @example
|
|
177
|
-
* ```tsx
|
|
178
|
-
* // With Next.js router
|
|
179
|
-
* import { useRouter } from 'next/navigation';
|
|
180
|
-
*
|
|
181
|
-
* export default function CallbackPage() {
|
|
182
|
-
* const router = useRouter();
|
|
183
|
-
* return (
|
|
184
|
-
* <InsforgeCallback
|
|
185
|
-
* redirectTo="/dashboard"
|
|
186
|
-
* onRedirect={(url) => router.push(url)}
|
|
187
|
-
* />
|
|
188
|
-
* );
|
|
189
|
-
* }
|
|
190
|
-
* ```
|
|
191
|
-
*/
|
|
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;
|
|
193
|
-
|
|
194
14
|
interface InsforgeContextValue {
|
|
195
15
|
user: InsforgeUser | null;
|
|
196
16
|
isLoaded: boolean;
|
|
@@ -305,140 +125,6 @@ declare function InsforgeProvider({ children, baseUrl, onAuthChange, syncTokenTo
|
|
|
305
125
|
*/
|
|
306
126
|
declare function useInsforge(): InsforgeContextValue;
|
|
307
127
|
|
|
308
|
-
/**
|
|
309
|
-
* Hook to access authentication methods
|
|
310
|
-
*
|
|
311
|
-
* @returns Object containing:
|
|
312
|
-
* - `signIn`: Function to sign in with email and password
|
|
313
|
-
* - `signUp`: Function to sign up with email and password
|
|
314
|
-
* - `signOut`: Function to sign out the current user
|
|
315
|
-
* - `isLoaded`: Boolean indicating if auth state has been loaded
|
|
316
|
-
* - `isSignedIn`: Boolean indicating if user is currently signed in
|
|
317
|
-
*
|
|
318
|
-
* @example
|
|
319
|
-
* ```tsx
|
|
320
|
-
* function LoginForm() {
|
|
321
|
-
* const { signIn, signUp, signOut, isLoaded, isSignedIn } = useAuth();
|
|
322
|
-
*
|
|
323
|
-
* async function handleLogin(email: string, password: string) {
|
|
324
|
-
* try {
|
|
325
|
-
* await signIn(email, password);
|
|
326
|
-
* // User is now signed in
|
|
327
|
-
* } catch (error) {
|
|
328
|
-
* console.error('Sign in failed:', error);
|
|
329
|
-
* }
|
|
330
|
-
* }
|
|
331
|
-
*
|
|
332
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
333
|
-
*
|
|
334
|
-
* return (
|
|
335
|
-
* <form onSubmit={(e) => { e.preventDefault(); handleLogin(email, password); }}>
|
|
336
|
-
* {/* form fields *\/}
|
|
337
|
-
* </form>
|
|
338
|
-
* );
|
|
339
|
-
* }
|
|
340
|
-
* ```
|
|
341
|
-
*/
|
|
342
|
-
declare function useAuth(): {
|
|
343
|
-
signIn: (email: string, password: string) => Promise<{
|
|
344
|
-
user?: {
|
|
345
|
-
id: string;
|
|
346
|
-
email: string;
|
|
347
|
-
name: string;
|
|
348
|
-
};
|
|
349
|
-
accessToken: string | null;
|
|
350
|
-
} | {
|
|
351
|
-
error: string;
|
|
352
|
-
}>;
|
|
353
|
-
signUp: (email: string, password: string) => Promise<{
|
|
354
|
-
user?: {
|
|
355
|
-
id: string;
|
|
356
|
-
email: string;
|
|
357
|
-
name: string;
|
|
358
|
-
};
|
|
359
|
-
accessToken: string | null;
|
|
360
|
-
} | {
|
|
361
|
-
error: string;
|
|
362
|
-
}>;
|
|
363
|
-
signOut: () => Promise<void>;
|
|
364
|
-
isLoaded: boolean;
|
|
365
|
-
isSignedIn: boolean;
|
|
366
|
-
};
|
|
367
|
-
|
|
368
|
-
/**
|
|
369
|
-
* Hook to access current user data
|
|
370
|
-
*
|
|
371
|
-
* @returns Object containing:
|
|
372
|
-
* - `user`: Current user object (InsforgeUser | null)
|
|
373
|
-
* - `isLoaded`: Boolean indicating if auth state has been loaded
|
|
374
|
-
* - `updateUser`: Function to update user profile data
|
|
375
|
-
* - `setUser`: Internal function to manually set user state
|
|
376
|
-
*
|
|
377
|
-
* @example
|
|
378
|
-
* ```tsx
|
|
379
|
-
* function UserProfile() {
|
|
380
|
-
* const { user, isLoaded, updateUser } = useUser();
|
|
381
|
-
*
|
|
382
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
383
|
-
* if (!user) return <div>Not signed in</div>;
|
|
384
|
-
*
|
|
385
|
-
* async function handleUpdate(name: string) {
|
|
386
|
-
* await updateUser({ name });
|
|
387
|
-
* }
|
|
388
|
-
*
|
|
389
|
-
* return (
|
|
390
|
-
* <div>
|
|
391
|
-
* <p>Email: {user.email}</p>
|
|
392
|
-
* {user.name && <p>Name: {user.name}</p>}
|
|
393
|
-
* {user.avatarUrl && <img src={user.avatarUrl} alt="Avatar" />}
|
|
394
|
-
* </div>
|
|
395
|
-
* );
|
|
396
|
-
* }
|
|
397
|
-
* ```
|
|
398
|
-
*/
|
|
399
|
-
declare function useUser(): {
|
|
400
|
-
user: InsforgeUser | null;
|
|
401
|
-
isLoaded: boolean;
|
|
402
|
-
updateUser: (data: Partial<InsforgeUser>) => Promise<void>;
|
|
403
|
-
setUser: (user: InsforgeUser | null) => void;
|
|
404
|
-
};
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* Hook to get all public authentication configuration (OAuth + Email) from Insforge backend
|
|
408
|
-
*
|
|
409
|
-
* **IMPORTANT: This hook should ONLY be used in SignIn and SignUp components.**
|
|
410
|
-
*
|
|
411
|
-
* This hook lazily fetches all public authentication configuration from the backend
|
|
412
|
-
* only when the component mounts. Using it in other components will cause unnecessary
|
|
413
|
-
* API calls on every page load.
|
|
414
|
-
*
|
|
415
|
-
* @returns Object containing OAuth providers, email auth config, and loading state
|
|
416
|
-
*
|
|
417
|
-
* @example
|
|
418
|
-
* ```tsx
|
|
419
|
-
* // ✅ Correct usage - only in SignIn/SignUp components
|
|
420
|
-
* function SignUp() {
|
|
421
|
-
* const { oauthProviders, emailConfig, isLoaded } = usePublicAuthConfig();
|
|
422
|
-
*
|
|
423
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
424
|
-
*
|
|
425
|
-
* return (
|
|
426
|
-
* <div>
|
|
427
|
-
* <p>OAuth providers: {oauthProviders.length}</p>
|
|
428
|
-
* <p>Password min length: {emailConfig?.passwordMinLength}</p>
|
|
429
|
-
* </div>
|
|
430
|
-
* );
|
|
431
|
-
* }
|
|
432
|
-
* ```
|
|
433
|
-
*
|
|
434
|
-
* @requires Must be used within InsforgeProvider
|
|
435
|
-
*/
|
|
436
|
-
declare function usePublicAuthConfig(): {
|
|
437
|
-
oauthProviders: OAuthProvidersSchema[];
|
|
438
|
-
emailConfig: GetPublicAuthConfigResponse | null;
|
|
439
|
-
isLoaded: boolean;
|
|
440
|
-
};
|
|
441
|
-
|
|
442
128
|
declare const OAUTH_PROVIDER_CONFIG: Record<OAuthProvider, OAuthProviderConfig>;
|
|
443
129
|
/**
|
|
444
130
|
* Get OAuth provider configuration by provider name
|
|
@@ -449,4 +135,4 @@ declare function getProviderConfig(provider: OAuthProvider): OAuthProviderConfig
|
|
|
449
135
|
*/
|
|
450
136
|
declare function getAllProviderConfigs(): Partial<Record<OAuthProvider, OAuthProviderConfig>>;
|
|
451
137
|
|
|
452
|
-
export {
|
|
138
|
+
export { InsforgeProvider, type InsforgeProviderProps, InsforgeUser, OAUTH_PROVIDER_CONFIG, OAuthProvider, OAuthProviderConfig, getAllProviderConfigs, getProviderConfig, useInsforge };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,196 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
import { SignInProps, SignUpProps, UserButtonProps, ProtectProps, ConditionalProps, InsforgeUser, OAuthProvider, OAuthProviderConfig } from './types.js';
|
|
3
|
-
export { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ForgotPasswordFormProps, ResetPasswordFormProps, SignInFormProps, SignUpFormProps, VerifyEmailStatusProps } from './types.js';
|
|
4
|
-
import * as react from 'react';
|
|
5
|
-
import { ReactNode } from 'react';
|
|
1
|
+
export { InsforgeCallback, InsforgeCallbackProps, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton } from './components.js';
|
|
6
2
|
export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.js';
|
|
7
3
|
export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.js';
|
|
8
|
-
import
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
import { InsforgeUser, OAuthProvider, OAuthProviderConfig } from './types.js';
|
|
7
|
+
export { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ConditionalProps, ForgotPasswordFormProps, ProtectProps, ResetPasswordFormProps, SignInFormProps, SignInProps, SignUpFormProps, SignUpProps, UserButtonProps, VerifyEmailStatusProps } from './types.js';
|
|
8
|
+
export { useAuth, usePublicAuthConfig, useUser } from './hooks.js';
|
|
9
9
|
export { checkPasswordStrength, cn, createPasswordSchema, emailSchema, passwordSchema, validateEmail, validatePassword } from './lib.js';
|
|
10
|
+
import '@insforge/shared-schemas';
|
|
10
11
|
import 'clsx';
|
|
11
12
|
import 'zod';
|
|
12
13
|
|
|
13
|
-
/**
|
|
14
|
-
* Pre-built sign-in component with full authentication logic.
|
|
15
|
-
*
|
|
16
|
-
* @component
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* <SignIn afterSignInUrl="/dashboard" />
|
|
20
|
-
*
|
|
21
|
-
* // With custom callbacks
|
|
22
|
-
* <SignIn
|
|
23
|
-
* onSuccess={(user) => console.log('Signed in:', user)}
|
|
24
|
-
* onError={(error) => console.error('Error:', error)}
|
|
25
|
-
* />
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
declare function SignIn({ afterSignInUrl, onSuccess, onError, onRedirect, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Pre-built sign-up component with full authentication logic.
|
|
32
|
-
*
|
|
33
|
-
* @component
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* <SignUp afterSignUpUrl="/onboarding" />
|
|
37
|
-
*
|
|
38
|
-
* // With custom callbacks
|
|
39
|
-
* <SignUp
|
|
40
|
-
* onSuccess={(user) => console.log('Signed up:', user)}
|
|
41
|
-
* onError={(error) => console.error('Error:', error)}
|
|
42
|
-
* />
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
declare function SignUp({ afterSignUpUrl, onSuccess, onError, onRedirect, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* User profile button with dropdown menu and sign-out functionality.
|
|
49
|
-
*
|
|
50
|
-
* @component
|
|
51
|
-
* @example
|
|
52
|
-
* ```tsx
|
|
53
|
-
* <UserButton afterSignOutUrl="/" />
|
|
54
|
-
*
|
|
55
|
-
* // Simple mode
|
|
56
|
-
* <UserButton mode="simple" />
|
|
57
|
-
*
|
|
58
|
-
* // With custom styling
|
|
59
|
-
* <UserButton
|
|
60
|
-
* appearance={{
|
|
61
|
-
* buttonClassName: "hover:bg-white/10",
|
|
62
|
-
* dropdownClassName: "bg-gray-900"
|
|
63
|
-
* }}
|
|
64
|
-
* />
|
|
65
|
-
* ```
|
|
66
|
-
*
|
|
67
|
-
* @param {string} [afterSignOutUrl='/'] - URL to redirect to after sign-out
|
|
68
|
-
* @param {'detailed'|'simple'} [mode='detailed'] - Display mode
|
|
69
|
-
* @param {object} [appearance] - Custom Tailwind classes
|
|
70
|
-
*/
|
|
71
|
-
declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Protected route component that redirects unauthenticated users.
|
|
75
|
-
*
|
|
76
|
-
* @component
|
|
77
|
-
* @example
|
|
78
|
-
* ```tsx
|
|
79
|
-
* // Basic usage
|
|
80
|
-
* <Protect redirectTo="/sign-in">
|
|
81
|
-
* <Dashboard />
|
|
82
|
-
* </Protect>
|
|
83
|
-
*
|
|
84
|
-
* // With custom redirect handler (e.g., for Next.js router)
|
|
85
|
-
* <Protect
|
|
86
|
-
* redirectTo="/sign-in"
|
|
87
|
-
* onRedirect={(url) => router.push(url)}
|
|
88
|
-
* >
|
|
89
|
-
* <AdminPanel />
|
|
90
|
-
* </Protect>
|
|
91
|
-
*
|
|
92
|
-
* // With custom condition (role-based access)
|
|
93
|
-
* <Protect
|
|
94
|
-
* redirectTo="/unauthorized"
|
|
95
|
-
* condition={(user) => user.role === 'admin'}
|
|
96
|
-
* >
|
|
97
|
-
* <AdminContent />
|
|
98
|
-
* </Protect>
|
|
99
|
-
* ```
|
|
100
|
-
*
|
|
101
|
-
* @param {ReactNode} children - Content to protect
|
|
102
|
-
* @param {ReactNode} [fallback] - Fallback UI while loading
|
|
103
|
-
* @param {string} [redirectTo='/sign-in'] - Redirect URL
|
|
104
|
-
* @param {function} [condition] - Custom access condition
|
|
105
|
-
* @param {function} [onRedirect] - Custom redirect handler (default: window.location)
|
|
106
|
-
*/
|
|
107
|
-
declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Conditional component that renders children only when user is signed in.
|
|
111
|
-
*
|
|
112
|
-
* @component
|
|
113
|
-
* @example
|
|
114
|
-
* ```tsx
|
|
115
|
-
* <SignedIn>
|
|
116
|
-
* <Dashboard />
|
|
117
|
-
* </SignedIn>
|
|
118
|
-
* ```
|
|
119
|
-
*
|
|
120
|
-
* @param {ReactNode} children - React nodes to render when user is authenticated
|
|
121
|
-
* @returns {JSX.Element | null} Renders children when signed in, null otherwise
|
|
122
|
-
*/
|
|
123
|
-
declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Conditional component that renders children only when user is signed out.
|
|
127
|
-
*
|
|
128
|
-
* @component
|
|
129
|
-
* @example
|
|
130
|
-
* ```tsx
|
|
131
|
-
* <SignedOut>
|
|
132
|
-
* <SignIn />
|
|
133
|
-
* </SignedOut>
|
|
134
|
-
* ```
|
|
135
|
-
*
|
|
136
|
-
* @param {ReactNode} children - React nodes to render when user is not authenticated
|
|
137
|
-
* @returns {JSX.Element | null} Renders children when signed out, null otherwise
|
|
138
|
-
*/
|
|
139
|
-
declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
|
|
140
|
-
|
|
141
|
-
interface InsforgeCallbackProps {
|
|
142
|
-
/**
|
|
143
|
-
* Redirect destination after successful authentication
|
|
144
|
-
*/
|
|
145
|
-
redirectTo?: string;
|
|
146
|
-
/**
|
|
147
|
-
* Callback fired on successful authentication
|
|
148
|
-
*/
|
|
149
|
-
onSuccess?: () => void;
|
|
150
|
-
/**
|
|
151
|
-
* Callback fired on authentication error
|
|
152
|
-
*/
|
|
153
|
-
onError?: (error: string) => void;
|
|
154
|
-
/**
|
|
155
|
-
* Custom loading component
|
|
156
|
-
*/
|
|
157
|
-
loadingComponent?: ReactNode;
|
|
158
|
-
/**
|
|
159
|
-
* Custom redirect handler (default: window.location)
|
|
160
|
-
*/
|
|
161
|
-
onRedirect?: (url: string) => void;
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* InsforgeCallback - Handles OAuth and email/password authentication callbacks
|
|
165
|
-
*
|
|
166
|
-
* Place this component on your `/auth/callback` page.
|
|
167
|
-
*
|
|
168
|
-
* @example
|
|
169
|
-
* ```tsx
|
|
170
|
-
* // Minimal usage
|
|
171
|
-
* export default function CallbackPage() {
|
|
172
|
-
* return <InsforgeCallback />;
|
|
173
|
-
* }
|
|
174
|
-
* ```
|
|
175
|
-
*
|
|
176
|
-
* @example
|
|
177
|
-
* ```tsx
|
|
178
|
-
* // With Next.js router
|
|
179
|
-
* import { useRouter } from 'next/navigation';
|
|
180
|
-
*
|
|
181
|
-
* export default function CallbackPage() {
|
|
182
|
-
* const router = useRouter();
|
|
183
|
-
* return (
|
|
184
|
-
* <InsforgeCallback
|
|
185
|
-
* redirectTo="/dashboard"
|
|
186
|
-
* onRedirect={(url) => router.push(url)}
|
|
187
|
-
* />
|
|
188
|
-
* );
|
|
189
|
-
* }
|
|
190
|
-
* ```
|
|
191
|
-
*/
|
|
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;
|
|
193
|
-
|
|
194
14
|
interface InsforgeContextValue {
|
|
195
15
|
user: InsforgeUser | null;
|
|
196
16
|
isLoaded: boolean;
|
|
@@ -305,140 +125,6 @@ declare function InsforgeProvider({ children, baseUrl, onAuthChange, syncTokenTo
|
|
|
305
125
|
*/
|
|
306
126
|
declare function useInsforge(): InsforgeContextValue;
|
|
307
127
|
|
|
308
|
-
/**
|
|
309
|
-
* Hook to access authentication methods
|
|
310
|
-
*
|
|
311
|
-
* @returns Object containing:
|
|
312
|
-
* - `signIn`: Function to sign in with email and password
|
|
313
|
-
* - `signUp`: Function to sign up with email and password
|
|
314
|
-
* - `signOut`: Function to sign out the current user
|
|
315
|
-
* - `isLoaded`: Boolean indicating if auth state has been loaded
|
|
316
|
-
* - `isSignedIn`: Boolean indicating if user is currently signed in
|
|
317
|
-
*
|
|
318
|
-
* @example
|
|
319
|
-
* ```tsx
|
|
320
|
-
* function LoginForm() {
|
|
321
|
-
* const { signIn, signUp, signOut, isLoaded, isSignedIn } = useAuth();
|
|
322
|
-
*
|
|
323
|
-
* async function handleLogin(email: string, password: string) {
|
|
324
|
-
* try {
|
|
325
|
-
* await signIn(email, password);
|
|
326
|
-
* // User is now signed in
|
|
327
|
-
* } catch (error) {
|
|
328
|
-
* console.error('Sign in failed:', error);
|
|
329
|
-
* }
|
|
330
|
-
* }
|
|
331
|
-
*
|
|
332
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
333
|
-
*
|
|
334
|
-
* return (
|
|
335
|
-
* <form onSubmit={(e) => { e.preventDefault(); handleLogin(email, password); }}>
|
|
336
|
-
* {/* form fields *\/}
|
|
337
|
-
* </form>
|
|
338
|
-
* );
|
|
339
|
-
* }
|
|
340
|
-
* ```
|
|
341
|
-
*/
|
|
342
|
-
declare function useAuth(): {
|
|
343
|
-
signIn: (email: string, password: string) => Promise<{
|
|
344
|
-
user?: {
|
|
345
|
-
id: string;
|
|
346
|
-
email: string;
|
|
347
|
-
name: string;
|
|
348
|
-
};
|
|
349
|
-
accessToken: string | null;
|
|
350
|
-
} | {
|
|
351
|
-
error: string;
|
|
352
|
-
}>;
|
|
353
|
-
signUp: (email: string, password: string) => Promise<{
|
|
354
|
-
user?: {
|
|
355
|
-
id: string;
|
|
356
|
-
email: string;
|
|
357
|
-
name: string;
|
|
358
|
-
};
|
|
359
|
-
accessToken: string | null;
|
|
360
|
-
} | {
|
|
361
|
-
error: string;
|
|
362
|
-
}>;
|
|
363
|
-
signOut: () => Promise<void>;
|
|
364
|
-
isLoaded: boolean;
|
|
365
|
-
isSignedIn: boolean;
|
|
366
|
-
};
|
|
367
|
-
|
|
368
|
-
/**
|
|
369
|
-
* Hook to access current user data
|
|
370
|
-
*
|
|
371
|
-
* @returns Object containing:
|
|
372
|
-
* - `user`: Current user object (InsforgeUser | null)
|
|
373
|
-
* - `isLoaded`: Boolean indicating if auth state has been loaded
|
|
374
|
-
* - `updateUser`: Function to update user profile data
|
|
375
|
-
* - `setUser`: Internal function to manually set user state
|
|
376
|
-
*
|
|
377
|
-
* @example
|
|
378
|
-
* ```tsx
|
|
379
|
-
* function UserProfile() {
|
|
380
|
-
* const { user, isLoaded, updateUser } = useUser();
|
|
381
|
-
*
|
|
382
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
383
|
-
* if (!user) return <div>Not signed in</div>;
|
|
384
|
-
*
|
|
385
|
-
* async function handleUpdate(name: string) {
|
|
386
|
-
* await updateUser({ name });
|
|
387
|
-
* }
|
|
388
|
-
*
|
|
389
|
-
* return (
|
|
390
|
-
* <div>
|
|
391
|
-
* <p>Email: {user.email}</p>
|
|
392
|
-
* {user.name && <p>Name: {user.name}</p>}
|
|
393
|
-
* {user.avatarUrl && <img src={user.avatarUrl} alt="Avatar" />}
|
|
394
|
-
* </div>
|
|
395
|
-
* );
|
|
396
|
-
* }
|
|
397
|
-
* ```
|
|
398
|
-
*/
|
|
399
|
-
declare function useUser(): {
|
|
400
|
-
user: InsforgeUser | null;
|
|
401
|
-
isLoaded: boolean;
|
|
402
|
-
updateUser: (data: Partial<InsforgeUser>) => Promise<void>;
|
|
403
|
-
setUser: (user: InsforgeUser | null) => void;
|
|
404
|
-
};
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* Hook to get all public authentication configuration (OAuth + Email) from Insforge backend
|
|
408
|
-
*
|
|
409
|
-
* **IMPORTANT: This hook should ONLY be used in SignIn and SignUp components.**
|
|
410
|
-
*
|
|
411
|
-
* This hook lazily fetches all public authentication configuration from the backend
|
|
412
|
-
* only when the component mounts. Using it in other components will cause unnecessary
|
|
413
|
-
* API calls on every page load.
|
|
414
|
-
*
|
|
415
|
-
* @returns Object containing OAuth providers, email auth config, and loading state
|
|
416
|
-
*
|
|
417
|
-
* @example
|
|
418
|
-
* ```tsx
|
|
419
|
-
* // ✅ Correct usage - only in SignIn/SignUp components
|
|
420
|
-
* function SignUp() {
|
|
421
|
-
* const { oauthProviders, emailConfig, isLoaded } = usePublicAuthConfig();
|
|
422
|
-
*
|
|
423
|
-
* if (!isLoaded) return <div>Loading...</div>;
|
|
424
|
-
*
|
|
425
|
-
* return (
|
|
426
|
-
* <div>
|
|
427
|
-
* <p>OAuth providers: {oauthProviders.length}</p>
|
|
428
|
-
* <p>Password min length: {emailConfig?.passwordMinLength}</p>
|
|
429
|
-
* </div>
|
|
430
|
-
* );
|
|
431
|
-
* }
|
|
432
|
-
* ```
|
|
433
|
-
*
|
|
434
|
-
* @requires Must be used within InsforgeProvider
|
|
435
|
-
*/
|
|
436
|
-
declare function usePublicAuthConfig(): {
|
|
437
|
-
oauthProviders: OAuthProvidersSchema[];
|
|
438
|
-
emailConfig: GetPublicAuthConfigResponse | null;
|
|
439
|
-
isLoaded: boolean;
|
|
440
|
-
};
|
|
441
|
-
|
|
442
128
|
declare const OAUTH_PROVIDER_CONFIG: Record<OAuthProvider, OAuthProviderConfig>;
|
|
443
129
|
/**
|
|
444
130
|
* Get OAuth provider configuration by provider name
|
|
@@ -449,4 +135,4 @@ declare function getProviderConfig(provider: OAuthProvider): OAuthProviderConfig
|
|
|
449
135
|
*/
|
|
450
136
|
declare function getAllProviderConfigs(): Partial<Record<OAuthProvider, OAuthProviderConfig>>;
|
|
451
137
|
|
|
452
|
-
export {
|
|
138
|
+
export { InsforgeProvider, type InsforgeProviderProps, InsforgeUser, OAUTH_PROVIDER_CONFIG, OAuthProvider, OAuthProviderConfig, getAllProviderConfigs, getProviderConfig, useInsforge };
|