azirid-react 0.8.0 → 0.9.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/README.md +331 -129
- package/dist/index.cjs +467 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +214 -2
- package/dist/index.d.ts +214 -2
- package/dist/index.js +462 -5
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,11 +27,11 @@ npm install react react-dom @tanstack/react-query
|
|
|
27
27
|
|
|
28
28
|
`azirid-react` supports two connection modes to the Azirid API. Choose the one that fits your stack:
|
|
29
29
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
| **Best for**
|
|
33
|
-
| **Security**
|
|
34
|
-
| **Setup**
|
|
30
|
+
| | Proxy mode | Direct mode |
|
|
31
|
+
| ---------------- | --------------------------------------------- | ----------------------------- |
|
|
32
|
+
| **Best for** | Next.js (App Router) | React SPA (Vite, CRA, Remix) |
|
|
33
|
+
| **Security** | First-party cookies, no CORS | Requires CORS on API |
|
|
34
|
+
| **Setup** | Route handler + Provider | Provider only |
|
|
35
35
|
| **How it works** | Browser → your app `/api/auth/*` → Azirid API | Browser → Azirid API directly |
|
|
36
36
|
|
|
37
37
|
### Proxy mode (recommended for Next.js)
|
|
@@ -148,6 +148,98 @@ No route handler or proxy needed — requests go directly to the API.
|
|
|
148
148
|
|
|
149
149
|
---
|
|
150
150
|
|
|
151
|
+
## Components
|
|
152
|
+
|
|
153
|
+
### `LoginForm` / `SignupForm`
|
|
154
|
+
|
|
155
|
+
See Quick Start examples above.
|
|
156
|
+
|
|
157
|
+
### `ForgotPasswordForm`
|
|
158
|
+
|
|
159
|
+
Pre-built form that sends a password reset email.
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
import { ForgotPasswordForm } from 'azirid-react'
|
|
163
|
+
|
|
164
|
+
export default function ForgotPasswordPage() {
|
|
165
|
+
return <ForgotPasswordForm onSubmit={(data) => console.log('Reset requested for:', data.email)} />
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
| Prop | Type | Default | Description |
|
|
170
|
+
| --------------- | ----------------------------------- | -------- | --------------------------------- |
|
|
171
|
+
| `onSubmit` | `(data: { email: string }) => void` | — | Override default submit behavior |
|
|
172
|
+
| `schema` | `ZodType` | auto | Custom Zod schema for validation |
|
|
173
|
+
| `isLoading` | `boolean` | — | Show loading state / disable form |
|
|
174
|
+
| `error` | `string \| null` | — | Error message to display |
|
|
175
|
+
| `title` | `string` | i18n | Form title |
|
|
176
|
+
| `description` | `string` | i18n | Subtitle below the title |
|
|
177
|
+
| `logo` | `ReactNode` | branding | Logo above the card |
|
|
178
|
+
| `submitText` | `string` | i18n | Submit button text |
|
|
179
|
+
| `footer` | `ReactNode` | — | Content below the form |
|
|
180
|
+
| `defaultValues` | `{ email?: string }` | — | Pre-fill the email field |
|
|
181
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
182
|
+
|
|
183
|
+
### `ResetPasswordForm`
|
|
184
|
+
|
|
185
|
+
Pre-built form for confirming a password reset with a token.
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
import { ResetPasswordForm } from 'azirid-react'
|
|
189
|
+
|
|
190
|
+
export default function ResetPasswordPage({ searchParams }: { searchParams: { token: string } }) {
|
|
191
|
+
return <ResetPasswordForm token={searchParams.token} onSuccess={() => router.push('/login')} />
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
| Prop | Type | Default | Description |
|
|
196
|
+
| ------------- | -------------------------------------------------------- | -------- | -------------------------------------- |
|
|
197
|
+
| `token` | `string` | — | **Required.** Reset token from the URL |
|
|
198
|
+
| `onSubmit` | `(data: { token: string; newPassword: string }) => void` | — | Override default submit |
|
|
199
|
+
| `schema` | `ZodType` | auto | Custom Zod schema |
|
|
200
|
+
| `isLoading` | `boolean` | — | Show loading state |
|
|
201
|
+
| `error` | `string \| null` | — | Error message |
|
|
202
|
+
| `title` | `string` | i18n | Form title |
|
|
203
|
+
| `description` | `string` | i18n | Subtitle |
|
|
204
|
+
| `logo` | `ReactNode` | branding | Logo above the card |
|
|
205
|
+
| `submitText` | `string` | i18n | Submit button text |
|
|
206
|
+
| `footer` | `ReactNode` | — | Content below the form |
|
|
207
|
+
| `onSuccess` | `() => void` | — | Called after successful reset |
|
|
208
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
209
|
+
|
|
210
|
+
### `AuthForm`
|
|
211
|
+
|
|
212
|
+
Multi-view auth component that wraps `LoginForm`, `SignupForm`, `ForgotPasswordForm`, and `ResetPasswordForm` with built-in navigation between views.
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
import { AuthForm } from 'azirid-react'
|
|
216
|
+
|
|
217
|
+
// Uncontrolled — manages its own view state
|
|
218
|
+
<AuthForm defaultView="login" />
|
|
219
|
+
|
|
220
|
+
// Controlled — parent manages the view
|
|
221
|
+
const [view, setView] = useState<AuthView>('login')
|
|
222
|
+
<AuthForm view={view} onViewChange={setView} />
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
| Prop | Type | Default | Description |
|
|
226
|
+
| --------------------- | --------------------------------------- | --------- | -------------------------------------------------------------------------------- |
|
|
227
|
+
| `view` | `AuthView` | — | Controlled view (`'login' \| 'signup' \| 'forgot-password' \| 'reset-password'`) |
|
|
228
|
+
| `onViewChange` | `(view: AuthView) => void` | — | Callback when navigation links are clicked (controlled mode) |
|
|
229
|
+
| `defaultView` | `AuthView` | `'login'` | Initial view for uncontrolled mode |
|
|
230
|
+
| `logo` | `ReactNode` | — | Logo passed to all child forms |
|
|
231
|
+
| `showSocialButtons` | `boolean` | `true` | Show SSO buttons on login/signup |
|
|
232
|
+
| `hideNavigation` | `boolean` | — | Hide navigation links between views |
|
|
233
|
+
| `resetToken` | `string` | — | Token for the reset-password view |
|
|
234
|
+
| `defaultValues` | `{ email?: string; password?: string }` | — | Default values passed to child forms |
|
|
235
|
+
| `loginProps` | `Partial<LoginFormProps>` | — | Props forwarded to `LoginForm` |
|
|
236
|
+
| `signupProps` | `Partial<SignupFormProps>` | — | Props forwarded to `SignupForm` |
|
|
237
|
+
| `forgotPasswordProps` | `Partial<ForgotPasswordFormProps>` | — | Props forwarded to `ForgotPasswordForm` |
|
|
238
|
+
| `resetPasswordProps` | `Partial<ResetPasswordFormProps>` | — | Props forwarded to `ResetPasswordForm` |
|
|
239
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
240
|
+
|
|
241
|
+
---
|
|
242
|
+
|
|
151
243
|
## Headless hooks
|
|
152
244
|
|
|
153
245
|
All hooks require `<AziridProvider>` in the tree.
|
|
@@ -293,15 +385,15 @@ import { useRefresh } from 'azirid-react'
|
|
|
293
385
|
const { refresh } = useRefresh()
|
|
294
386
|
```
|
|
295
387
|
|
|
296
|
-
### `
|
|
388
|
+
### `useAccessClient`
|
|
297
389
|
|
|
298
390
|
Access the raw `AccessClient` instance for custom API calls.
|
|
299
391
|
|
|
300
392
|
```tsx
|
|
301
|
-
import {
|
|
393
|
+
import { useAccessClient } from 'azirid-react'
|
|
302
394
|
|
|
303
395
|
function CustomAction() {
|
|
304
|
-
const client =
|
|
396
|
+
const client = useAccessClient()
|
|
305
397
|
|
|
306
398
|
async function fetchCustomData() {
|
|
307
399
|
const data = await client.get('/v1/custom-endpoint')
|
|
@@ -359,6 +451,28 @@ function PasswordInput() {
|
|
|
359
451
|
}
|
|
360
452
|
```
|
|
361
453
|
|
|
454
|
+
### `usePasswordReset`
|
|
455
|
+
|
|
456
|
+
Two-step password reset flow: request a reset email, then confirm with the token.
|
|
457
|
+
|
|
458
|
+
```tsx
|
|
459
|
+
import { usePasswordReset } from 'azirid-react'
|
|
460
|
+
|
|
461
|
+
function PasswordResetFlow() {
|
|
462
|
+
const passwordReset = usePasswordReset({
|
|
463
|
+
onRequestSuccess: () => toast.success('Check your email'),
|
|
464
|
+
onConfirmSuccess: () => router.push('/login'),
|
|
465
|
+
onError: (err) => console.error(err),
|
|
466
|
+
})
|
|
467
|
+
|
|
468
|
+
// Step 1: request reset email
|
|
469
|
+
passwordReset.request.mutate({ email: 'user@example.com' })
|
|
470
|
+
|
|
471
|
+
// Step 2: confirm with token from URL
|
|
472
|
+
passwordReset.confirm.mutate({ token: 'abc', newPassword: 'newPass123!' })
|
|
473
|
+
}
|
|
474
|
+
```
|
|
475
|
+
|
|
362
476
|
### Zod Schemas
|
|
363
477
|
|
|
364
478
|
The SDK exports pre-built Zod schemas with Spanish validation messages, plus factory functions for custom messages.
|
|
@@ -372,13 +486,20 @@ import {
|
|
|
372
486
|
magicLinkVerifySchema,
|
|
373
487
|
socialLoginSchema,
|
|
374
488
|
passkeyRegisterStartSchema,
|
|
489
|
+
forgotPasswordSchema,
|
|
490
|
+
resetPasswordConfirmSchema,
|
|
375
491
|
} from 'azirid-react'
|
|
376
492
|
|
|
377
493
|
// Default schemas (Spanish messages)
|
|
378
494
|
loginSchema.parse({ email: 'user@example.com', password: 'secret' })
|
|
379
495
|
|
|
380
496
|
// Factory functions for custom messages
|
|
381
|
-
import {
|
|
497
|
+
import {
|
|
498
|
+
createLoginSchema,
|
|
499
|
+
createSignupSchema,
|
|
500
|
+
createForgotPasswordSchema,
|
|
501
|
+
createResetPasswordConfirmSchema,
|
|
502
|
+
} from 'azirid-react'
|
|
382
503
|
|
|
383
504
|
const customSchema = createLoginSchema({
|
|
384
505
|
emailRequired: 'Email is required',
|
|
@@ -388,15 +509,17 @@ const customSchema = createLoginSchema({
|
|
|
388
509
|
})
|
|
389
510
|
```
|
|
390
511
|
|
|
391
|
-
| Schema
|
|
392
|
-
|
|
|
393
|
-
| `loginSchema`
|
|
394
|
-
| `signupSchema`
|
|
395
|
-
| `changePasswordSchema`
|
|
396
|
-
| `magicLinkRequestSchema`
|
|
397
|
-
| `magicLinkVerifySchema`
|
|
398
|
-
| `socialLoginSchema`
|
|
399
|
-
| `passkeyRegisterStartSchema` | `deviceName?`
|
|
512
|
+
| Schema | Fields |
|
|
513
|
+
| ---------------------------- | --------------------------------------------------------------------- |
|
|
514
|
+
| `loginSchema` | `email`, `password` |
|
|
515
|
+
| `signupSchema` | `email`, `password`, `acceptedTosVersion?`, `acceptedPrivacyVersion?` |
|
|
516
|
+
| `changePasswordSchema` | `currentPassword`, `newPassword` |
|
|
517
|
+
| `magicLinkRequestSchema` | `email` |
|
|
518
|
+
| `magicLinkVerifySchema` | `token` |
|
|
519
|
+
| `socialLoginSchema` | `provider`, `providerAccountId`, `email`, `emailVerified?`, ... |
|
|
520
|
+
| `passkeyRegisterStartSchema` | `deviceName?` |
|
|
521
|
+
| `forgotPasswordSchema` | `email` |
|
|
522
|
+
| `resetPasswordConfirmSchema` | `token`, `newPassword` |
|
|
400
523
|
|
|
401
524
|
---
|
|
402
525
|
|
|
@@ -567,7 +690,7 @@ Drop-in pricing grid with checkout flow integrated.
|
|
|
567
690
|
```tsx
|
|
568
691
|
import { PricingTable } from 'azirid-react'
|
|
569
692
|
|
|
570
|
-
|
|
693
|
+
;<PricingTable
|
|
571
694
|
successUrl={`${window.location.origin}/billing?success=true`}
|
|
572
695
|
cancelUrl={`${window.location.origin}/billing`}
|
|
573
696
|
columns={3}
|
|
@@ -575,13 +698,13 @@ import { PricingTable } from 'azirid-react'
|
|
|
575
698
|
/>
|
|
576
699
|
```
|
|
577
700
|
|
|
578
|
-
| Prop
|
|
579
|
-
|
|
|
580
|
-
| `successUrl`
|
|
581
|
-
| `cancelUrl`
|
|
582
|
-
| `columns`
|
|
583
|
-
| `onPlanSelect` | `(plan) => void` | —
|
|
584
|
-
| `className`
|
|
701
|
+
| Prop | Type | Default | Description |
|
|
702
|
+
| -------------- | ---------------- | ------- | --------------------------------------------------- |
|
|
703
|
+
| `successUrl` | `string` | — | **Required.** Redirect URL after successful payment |
|
|
704
|
+
| `cancelUrl` | `string` | — | **Required.** Redirect URL on cancel |
|
|
705
|
+
| `columns` | `number` | `3` | Number of columns in the grid |
|
|
706
|
+
| `onPlanSelect` | `(plan) => void` | — | Called when a plan is selected |
|
|
707
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
585
708
|
|
|
586
709
|
#### `PayButton`
|
|
587
710
|
|
|
@@ -590,7 +713,7 @@ Flexible payment button with provider selection modal. Supports both plans and p
|
|
|
590
713
|
```tsx
|
|
591
714
|
import { PayButton } from 'azirid-react'
|
|
592
715
|
|
|
593
|
-
|
|
716
|
+
;<PayButton
|
|
594
717
|
planId="plan_123"
|
|
595
718
|
successUrl="/billing?success=true"
|
|
596
719
|
cancelUrl="/billing"
|
|
@@ -600,16 +723,16 @@ import { PayButton } from 'azirid-react'
|
|
|
600
723
|
</PayButton>
|
|
601
724
|
```
|
|
602
725
|
|
|
603
|
-
| Prop
|
|
604
|
-
|
|
|
605
|
-
| `planId`
|
|
606
|
-
| `intentId`
|
|
607
|
-
| `successUrl` | `string`
|
|
608
|
-
| `cancelUrl`
|
|
609
|
-
| `onSuccess`
|
|
610
|
-
| `onError`
|
|
611
|
-
| `children`
|
|
612
|
-
| `disabled`
|
|
726
|
+
| Prop | Type | Default | Description |
|
|
727
|
+
| ------------ | ----------------- | ------- | --------------------------------------------- |
|
|
728
|
+
| `planId` | `string` | — | Plan to purchase (use `planId` or `intentId`) |
|
|
729
|
+
| `intentId` | `string` | — | Payment intent ID (alternative to `planId`) |
|
|
730
|
+
| `successUrl` | `string` | — | **Required.** Redirect URL after success |
|
|
731
|
+
| `cancelUrl` | `string` | — | **Required.** Redirect URL on cancel |
|
|
732
|
+
| `onSuccess` | `(data) => void` | — | Called on successful checkout |
|
|
733
|
+
| `onError` | `(error) => void` | — | Called on error |
|
|
734
|
+
| `children` | `ReactNode` | — | Button label |
|
|
735
|
+
| `disabled` | `boolean` | — | Disable the button |
|
|
613
736
|
|
|
614
737
|
#### `CheckoutButton`
|
|
615
738
|
|
|
@@ -618,11 +741,7 @@ Simple checkout button for a specific plan.
|
|
|
618
741
|
```tsx
|
|
619
742
|
import { CheckoutButton } from 'azirid-react'
|
|
620
743
|
|
|
621
|
-
|
|
622
|
-
planId="plan_123"
|
|
623
|
-
successUrl="/billing?success=true"
|
|
624
|
-
cancelUrl="/billing"
|
|
625
|
-
>
|
|
744
|
+
;<CheckoutButton planId="plan_123" successUrl="/billing?success=true" cancelUrl="/billing">
|
|
626
745
|
Subscribe
|
|
627
746
|
</CheckoutButton>
|
|
628
747
|
```
|
|
@@ -634,7 +753,7 @@ Color-coded badge showing the current subscription status.
|
|
|
634
753
|
```tsx
|
|
635
754
|
import { SubscriptionBadge } from 'azirid-react'
|
|
636
755
|
|
|
637
|
-
|
|
756
|
+
;<SubscriptionBadge />
|
|
638
757
|
// Renders: "Pro · Active" (green), "Free · Trialing" (blue), etc.
|
|
639
758
|
```
|
|
640
759
|
|
|
@@ -647,7 +766,7 @@ Table of invoices with status badges and download links.
|
|
|
647
766
|
```tsx
|
|
648
767
|
import { InvoiceList } from 'azirid-react'
|
|
649
768
|
|
|
650
|
-
|
|
769
|
+
;<InvoiceList />
|
|
651
770
|
```
|
|
652
771
|
|
|
653
772
|
#### `PayphoneCallback`
|
|
@@ -684,7 +803,9 @@ function TenantSwitcher({ tenantId }: { tenantId: string }) {
|
|
|
684
803
|
|
|
685
804
|
return (
|
|
686
805
|
<div>
|
|
687
|
-
<p>
|
|
806
|
+
<p>
|
|
807
|
+
Active tenant: {user?.tenantId} ({user?.tenantRole})
|
|
808
|
+
</p>
|
|
688
809
|
<button onClick={() => switchTenant(tenantId)}>Switch</button>
|
|
689
810
|
</div>
|
|
690
811
|
)
|
|
@@ -814,17 +935,17 @@ Card displaying the referral link with copy button and stats.
|
|
|
814
935
|
```tsx
|
|
815
936
|
import { ReferralCard } from 'azirid-react'
|
|
816
937
|
|
|
817
|
-
|
|
938
|
+
;<ReferralCard
|
|
818
939
|
title="Refer a Friend"
|
|
819
940
|
description="Share your link and earn rewards for each signup."
|
|
820
941
|
/>
|
|
821
942
|
```
|
|
822
943
|
|
|
823
|
-
| Prop
|
|
824
|
-
|
|
|
825
|
-
| `title`
|
|
826
|
-
| `description` | `string` | —
|
|
827
|
-
| `className`
|
|
944
|
+
| Prop | Type | Default | Description |
|
|
945
|
+
| ------------- | -------- | ------------------ | ---------------------- |
|
|
946
|
+
| `title` | `string` | `"Refer a Friend"` | Card title |
|
|
947
|
+
| `description` | `string` | — | Card description |
|
|
948
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
828
949
|
|
|
829
950
|
#### `ReferralStats`
|
|
830
951
|
|
|
@@ -833,7 +954,7 @@ Table showing referral history with status and reward badges.
|
|
|
833
954
|
```tsx
|
|
834
955
|
import { ReferralStats } from 'azirid-react'
|
|
835
956
|
|
|
836
|
-
|
|
957
|
+
;<ReferralStats />
|
|
837
958
|
```
|
|
838
959
|
|
|
839
960
|
---
|
|
@@ -885,6 +1006,22 @@ function CustomForm() {
|
|
|
885
1006
|
}
|
|
886
1007
|
```
|
|
887
1008
|
|
|
1009
|
+
### i18n exports
|
|
1010
|
+
|
|
1011
|
+
The SDK exports the raw dictionaries and the resolver function for advanced use cases:
|
|
1012
|
+
|
|
1013
|
+
```tsx
|
|
1014
|
+
import { resolveMessages, es, en } from 'azirid-react'
|
|
1015
|
+
|
|
1016
|
+
// Get the full Spanish dictionary
|
|
1017
|
+
console.log(es.login.title) // "Iniciar sesión"
|
|
1018
|
+
|
|
1019
|
+
// Resolve with overrides
|
|
1020
|
+
const messages = resolveMessages('en', {
|
|
1021
|
+
login: { title: 'Welcome back!' },
|
|
1022
|
+
})
|
|
1023
|
+
```
|
|
1024
|
+
|
|
888
1025
|
### Locale-aware Zod schemas
|
|
889
1026
|
|
|
890
1027
|
```tsx
|
|
@@ -949,17 +1086,7 @@ function CustomHeader() {
|
|
|
949
1086
|
|
|
950
1087
|
### "Secured by Azirid" badge
|
|
951
1088
|
|
|
952
|
-
The
|
|
953
|
-
|
|
954
|
-
```tsx
|
|
955
|
-
import { SecuredByBadge } from "azirid-react";
|
|
956
|
-
|
|
957
|
-
// Use in custom form layouts
|
|
958
|
-
<form>
|
|
959
|
-
{/* ... your form fields ... */}
|
|
960
|
-
</form>
|
|
961
|
-
<SecuredByBadge />
|
|
962
|
-
```
|
|
1089
|
+
The badge renders automatically below each built-in form component (`LoginForm`, `SignupForm`, etc.). It's hidden when `branding.removeBranding` is `true` (configurable in the dashboard). No extra code needed.
|
|
963
1090
|
|
|
964
1091
|
---
|
|
965
1092
|
|
|
@@ -998,32 +1125,32 @@ function createAccessClient(
|
|
|
998
1125
|
): AccessClient
|
|
999
1126
|
```
|
|
1000
1127
|
|
|
1001
|
-
| Param
|
|
1002
|
-
|
|
|
1003
|
-
| `config`
|
|
1004
|
-
| `appContext` | `object`
|
|
1128
|
+
| Param | Type | Description |
|
|
1129
|
+
| ------------ | -------------------- | ----------------------------------------- |
|
|
1130
|
+
| `config` | `AccessClientConfig` | `{ baseUrl, basePath?, headers? }` |
|
|
1131
|
+
| `appContext` | `object` | Optional. `publishableKey` and `tenantId` |
|
|
1005
1132
|
|
|
1006
1133
|
---
|
|
1007
1134
|
|
|
1008
1135
|
## AziridProvider props
|
|
1009
1136
|
|
|
1010
|
-
| Prop | Type | Default
|
|
1011
|
-
| ------------------ | ------------------------- |
|
|
1012
|
-
| `children` | `ReactNode` | —
|
|
1013
|
-
| `apiUrl` | `string` | —
|
|
1014
|
-
| `publishableKey` | `string` | —
|
|
1015
|
-
| `tenantId` | `string` | —
|
|
1016
|
-
| `fetchOptions` | `Record<string, string>` | —
|
|
1017
|
-
| `autoBootstrap` | `boolean` | `true`
|
|
1018
|
-
| `refreshInterval` | `number` | `50000`
|
|
1019
|
-
| `sessionSyncUrl` | `string \| false` | auto
|
|
1020
|
-
| `onLoginSuccess` | `(data) => void` | —
|
|
1021
|
-
| `onSignupSuccess` | `(data) => void` | —
|
|
1022
|
-
| `onLogoutSuccess` | `() => void` | —
|
|
1023
|
-
| `onSessionExpired` | `() => void` | —
|
|
1024
|
-
| `onError` | `(msg: string) => void` | —
|
|
1025
|
-
| `locale` | `"es" \| "en"` | `"es"`
|
|
1026
|
-
| `messages` | `Partial<AccessMessages>` | —
|
|
1137
|
+
| Prop | Type | Default | Description |
|
|
1138
|
+
| ------------------ | ------------------------- | ------- | -------------------------------------------------------------------------------- |
|
|
1139
|
+
| `children` | `ReactNode` | — | **Required.** Your app tree |
|
|
1140
|
+
| `apiUrl` | `string` | — | API URL for direct mode. Omit for proxy mode (recommended in Next.js) |
|
|
1141
|
+
| `publishableKey` | `string` | — | Publishable key (e.g. `pk_live_...`) |
|
|
1142
|
+
| `tenantId` | `string` | — | Tenant ID for multi-tenant apps |
|
|
1143
|
+
| `fetchOptions` | `Record<string, string>` | — | Extra headers to send with every request |
|
|
1144
|
+
| `autoBootstrap` | `boolean` | `true` | Auto-restore session on mount |
|
|
1145
|
+
| `refreshInterval` | `number` | `50000` | Token refresh interval in ms. `0` to disable |
|
|
1146
|
+
| `sessionSyncUrl` | `string \| false` | auto | URL for session cookie sync. Auto-activates in dev mode. Pass `false` to disable |
|
|
1147
|
+
| `onLoginSuccess` | `(data) => void` | — | Called after successful login |
|
|
1148
|
+
| `onSignupSuccess` | `(data) => void` | — | Called after successful signup |
|
|
1149
|
+
| `onLogoutSuccess` | `() => void` | — | Called after logout |
|
|
1150
|
+
| `onSessionExpired` | `() => void` | — | Called when refresh fails |
|
|
1151
|
+
| `onError` | `(msg: string) => void` | — | Called on any auth error |
|
|
1152
|
+
| `locale` | `"es" \| "en"` | `"es"` | UI language for built-in forms and validation messages |
|
|
1153
|
+
| `messages` | `Partial<AccessMessages>` | — | Override any i18n string (merged on top of the locale dictionary) |
|
|
1027
1154
|
|
|
1028
1155
|
---
|
|
1029
1156
|
|
|
@@ -1298,7 +1425,25 @@ Tailwind class merge utility (powered by `clsx` + `tailwind-merge`).
|
|
|
1298
1425
|
```tsx
|
|
1299
1426
|
import { cn } from 'azirid-react'
|
|
1300
1427
|
|
|
1301
|
-
|
|
1428
|
+
;<div className={cn('bg-white p-4', isActive && 'bg-blue-500')} />
|
|
1429
|
+
```
|
|
1430
|
+
|
|
1431
|
+
### `createMutationHook`
|
|
1432
|
+
|
|
1433
|
+
Factory function for creating custom `useMutation`-based hooks that use the `AccessClient`. Eliminates boilerplate when building headless hooks for custom API endpoints.
|
|
1434
|
+
|
|
1435
|
+
```ts
|
|
1436
|
+
import { createMutationHook } from 'azirid-react'
|
|
1437
|
+
|
|
1438
|
+
const useUpdateProfile = createMutationHook<{ updated: boolean }, { name: string }>({
|
|
1439
|
+
mutationKey: ['custom', 'update-profile'],
|
|
1440
|
+
mutationFn: (client, data) => client.post<{ updated: boolean }>('/v1/users/profile', data),
|
|
1441
|
+
})
|
|
1442
|
+
|
|
1443
|
+
// Usage
|
|
1444
|
+
const { mutate, isPending } = useUpdateProfile({
|
|
1445
|
+
onSuccess: (data) => console.log('Updated:', data),
|
|
1446
|
+
})
|
|
1302
1447
|
```
|
|
1303
1448
|
|
|
1304
1449
|
### `BASE_PATHS` and `buildPaths`
|
|
@@ -1306,7 +1451,7 @@ import { cn } from 'azirid-react'
|
|
|
1306
1451
|
```tsx
|
|
1307
1452
|
import { BASE_PATHS, buildPaths } from 'azirid-react'
|
|
1308
1453
|
|
|
1309
|
-
BASE_PATHS.proxy
|
|
1454
|
+
BASE_PATHS.proxy // '/api/auth'
|
|
1310
1455
|
BASE_PATHS.direct // '/v1/users/auth'
|
|
1311
1456
|
|
|
1312
1457
|
// Build custom path map from a base path
|
|
@@ -1336,64 +1481,121 @@ import type {
|
|
|
1336
1481
|
|
|
1337
1482
|
### Auth Types
|
|
1338
1483
|
|
|
1339
|
-
| Type
|
|
1340
|
-
|
|
|
1341
|
-
| `AuthUser`
|
|
1342
|
-
| `AuthSuccessResponse`
|
|
1343
|
-
| `AuthState`
|
|
1344
|
-
| `SignupData`
|
|
1345
|
-
| `AppBranding`
|
|
1346
|
-
| `BootstrapResponse`
|
|
1347
|
-
| `AziridProviderProps`
|
|
1348
|
-
| `AziridContextValue`
|
|
1484
|
+
| Type | Description |
|
|
1485
|
+
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
1486
|
+
| `AuthUser` | Authenticated user object (`id`, `email`, `tenantId`, `tenantRole`, `appId`, ...) — `tenantId` and `tenantRole` are always present |
|
|
1487
|
+
| `AuthSuccessResponse` | Login/signup response (`accessToken`, `user`) |
|
|
1488
|
+
| `AuthState` | Full auth state (`user`, `accessToken`, `isAuthenticated`, `isLoading`, `error`) |
|
|
1489
|
+
| `SignupData` | Signup payload (`email`, `password`, `acceptedTosVersion?`, `referralCode?`, ...) |
|
|
1490
|
+
| `AppBranding` | Branding config (`displayName`, `logoUrl`, `primaryColor`, `removeBranding`, ...) |
|
|
1491
|
+
| `BootstrapResponse` | Bootstrap result (authenticated/unauthenticated + branding) |
|
|
1492
|
+
| `AziridProviderProps` | All provider props (see table above) |
|
|
1493
|
+
| `AziridContextValue` | Context value returned by `useAzirid()` |
|
|
1494
|
+
| `SocialLoginData` | Social login payload (`provider`, `providerAccountId`, `email`, ...) |
|
|
1495
|
+
| `ChangePasswordData` | Change password payload (`currentPassword`, `newPassword`) |
|
|
1496
|
+
| `PasskeyRegisterVerifyData` | Passkey registration verification data |
|
|
1497
|
+
| `PasskeyLoginStartData` | Passkey login start payload |
|
|
1498
|
+
| `PasskeyLoginVerifyData` | Passkey login verification data |
|
|
1499
|
+
| `PasskeyLoginData` | Combined passkey login data |
|
|
1500
|
+
| `RegisterPasskeyData` | Register passkey payload |
|
|
1501
|
+
| `SupportedLocale` | `'es' \| 'en'` |
|
|
1502
|
+
| `AccessMessages` | Full i18n messages dictionary |
|
|
1349
1503
|
|
|
1350
1504
|
### Tenant Types
|
|
1351
1505
|
|
|
1352
|
-
| Type
|
|
1353
|
-
|
|
|
1354
|
-
| `TenantWithRole`
|
|
1355
|
-
| `TenantMemberInfo` | Tenant member (`id`, `role`, `joinedAt`, `user: { id, email, firstName, lastName }`)
|
|
1356
|
-
| `CreateTenantData` | Create tenant payload (`name`, `description?`)
|
|
1506
|
+
| Type | Description |
|
|
1507
|
+
| ------------------ | --------------------------------------------------------------------------------------- |
|
|
1508
|
+
| `TenantWithRole` | Tenant membership (`tenantId`, `name`, `slug`, `role: 'OWNER' \| 'MEMBER'`, `joinedAt`) |
|
|
1509
|
+
| `TenantMemberInfo` | Tenant member (`id`, `role`, `joinedAt`, `user: { id, email, firstName, lastName }`) |
|
|
1510
|
+
| `CreateTenantData` | Create tenant payload (`name`, `description?`) |
|
|
1357
1511
|
|
|
1358
1512
|
### Billing Types
|
|
1359
1513
|
|
|
1360
|
-
| Type
|
|
1361
|
-
|
|
|
1362
|
-
| `BillingPlan`
|
|
1363
|
-
| `UserSubscription`
|
|
1364
|
-
| `CheckoutResponse`
|
|
1365
|
-
| `BillingInvoice`
|
|
1366
|
-
| `PaymentProviderType`
|
|
1367
|
-
| `AvailableProvider`
|
|
1368
|
-
| `SubmitTransferProofData` | Transfer proof payload (`planId`, `fileUrl`, `amount`, ...)
|
|
1369
|
-
| `TransferProof`
|
|
1370
|
-
| `PayphoneWidgetConfig`
|
|
1514
|
+
| Type | Description |
|
|
1515
|
+
| ------------------------- | -------------------------------------------------------------------------------------------- |
|
|
1516
|
+
| `BillingPlan` | Plan object (`id`, `name`, `amount`, `currency`, `interval`, `features`, ...) |
|
|
1517
|
+
| `UserSubscription` | Subscription (`planId`, `plan`, `status`, `currentPeriodEnd`, `cancelAtPeriodEnd`, ...) |
|
|
1518
|
+
| `CheckoutResponse` | Checkout result (`url`, `sessionId`, `provider`, `plan`, `widgetConfig`, `bankDetails`, ...) |
|
|
1519
|
+
| `BillingInvoice` | Invoice (`amount`, `currency`, `status`, `paidAt`, `invoiceUrl`, ...) |
|
|
1520
|
+
| `PaymentProviderType` | `'STRIPE' \| 'PAYPAL' \| 'PAYPHONE' \| 'NUVEI' \| 'MANUAL_TRANSFER'` |
|
|
1521
|
+
| `AvailableProvider` | Provider info (`provider`, `checkout`, `subscriptions`) |
|
|
1522
|
+
| `SubmitTransferProofData` | Transfer proof payload (`planId`, `fileUrl`, `amount`, ...) |
|
|
1523
|
+
| `TransferProof` | Transfer proof object (`status`: `PENDING_REVIEW \| APPROVED \| REJECTED`, ...) |
|
|
1524
|
+
| `PayphoneWidgetConfig` | Payphone widget config (`token`, `storeId`, `amount`, ...) |
|
|
1525
|
+
| `PaymentIntent` | Payment intent object |
|
|
1371
1526
|
|
|
1372
1527
|
### Referral Types
|
|
1373
1528
|
|
|
1374
|
-
| Type
|
|
1375
|
-
|
|
|
1376
|
-
| `ReferralInfo`
|
|
1377
|
-
| `ReferralStatsData` | Stats + referral list (`totalRewards`, `referrals[]`)
|
|
1378
|
-
| `ReferralItem`
|
|
1529
|
+
| Type | Description |
|
|
1530
|
+
| ------------------- | ----------------------------------------------------------------------------------------- |
|
|
1531
|
+
| `ReferralInfo` | Referral info (`referralCode`, `referralUrl`, `totalReferred`, `completedReferrals`, ...) |
|
|
1532
|
+
| `ReferralStatsData` | Stats + referral list (`totalRewards`, `referrals[]`) |
|
|
1533
|
+
| `ReferralItem` | Single referral (`referredEmail`, `status`, `rewardStatus`, `rewardAmount`, ...) |
|
|
1379
1534
|
|
|
1380
1535
|
### Form Types
|
|
1381
1536
|
|
|
1382
|
-
| Type
|
|
1383
|
-
|
|
|
1384
|
-
| `LoginFormProps`
|
|
1385
|
-
| `SignupFormProps`
|
|
1386
|
-
| `FieldError`
|
|
1387
|
-
| `UseFormReturn<T>`
|
|
1537
|
+
| Type | Description |
|
|
1538
|
+
| ------------------------- | ------------------------------------------------------------------------------- |
|
|
1539
|
+
| `LoginFormProps` | LoginForm component props (`title`, `logo`, `labels`, `showSocialButtons`, ...) |
|
|
1540
|
+
| `SignupFormProps` | SignupForm component props |
|
|
1541
|
+
| `FieldError` | Validation error (`{ field: string, message: string }`) |
|
|
1542
|
+
| `UseFormReturn<T>` | Return type of `useFormState()` |
|
|
1543
|
+
| `ForgotPasswordFormProps` | ForgotPasswordForm component props |
|
|
1544
|
+
| `ResetPasswordFormProps` | ResetPasswordForm component props |
|
|
1545
|
+
| `AuthView` | Auth view type (`'login' \| 'signup' \| 'forgot-password' \| 'reset-password'`) |
|
|
1546
|
+
| `AuthFormProps` | AuthForm component props |
|
|
1388
1547
|
|
|
1389
1548
|
### Passkey Types
|
|
1390
1549
|
|
|
1391
|
-
| Type
|
|
1392
|
-
|
|
|
1393
|
-
| `PasskeyItem`
|
|
1394
|
-
| `PasskeyRegisterStartData`
|
|
1395
|
-
| `PasskeyRegisterStartResponse` | Registration challenge (`challengeId`, `options`)
|
|
1396
|
-
| `PasskeyLoginStartResponse`
|
|
1550
|
+
| Type | Description |
|
|
1551
|
+
| ------------------------------ | ---------------------------------------------------------------- |
|
|
1552
|
+
| `PasskeyItem` | Passkey entry (`id`, `deviceName`, `credentialId`, `lastUsedAt`) |
|
|
1553
|
+
| `PasskeyRegisterStartData` | Registration start payload (`deviceName?`) |
|
|
1554
|
+
| `PasskeyRegisterStartResponse` | Registration challenge (`challengeId`, `options`) |
|
|
1555
|
+
| `PasskeyLoginStartResponse` | Login challenge (`challengeId`, `options`) |
|
|
1556
|
+
|
|
1557
|
+
### Hook Types
|
|
1558
|
+
|
|
1559
|
+
| Type | Description |
|
|
1560
|
+
| ------------------------------------------------------ | -------------------------------------------------- |
|
|
1561
|
+
| `UseLoginOptions` / `UseLoginReturn` | Options and return type for `useLogin()` |
|
|
1562
|
+
| `UseSignupOptions` / `UseSignupReturn` | Options and return type for `useSignup()` |
|
|
1563
|
+
| `UseLogoutOptions` / `UseLogoutReturn` | Options and return type for `useLogout()` |
|
|
1564
|
+
| `UseSessionOptions` / `UseSessionReturn` | Options and return type for `useSession()` |
|
|
1565
|
+
| `UseMagicLinkOptions` / `UseMagicLinkReturn` | Options and return type for `useMagicLink()` |
|
|
1566
|
+
| `UseSocialLoginOptions` / `UseSocialLoginReturn` | Options and return type for `useSocialLogin()` |
|
|
1567
|
+
| `UseChangePasswordOptions` / `UseChangePasswordReturn` | Options and return type for `useChangePassword()` |
|
|
1568
|
+
| `UseRefreshOptions` / `UseRefreshReturn` | Options and return type for `useRefresh()` |
|
|
1569
|
+
| `UseBootstrapOptions` / `UseBootstrapReturn` | Options and return type for `useBootstrap()` |
|
|
1570
|
+
| `UsePasskeysOptions` / `UsePasskeysReturn` | Options and return type for `usePasskeys()` |
|
|
1571
|
+
| `UsePasswordResetOptions` / `UsePasswordResetReturn` | Options and return type for `usePasswordReset()` |
|
|
1572
|
+
| `UseCheckoutOptions` / `CheckoutParams` | Options and params for `useCheckout()` |
|
|
1573
|
+
| `UsePayphoneConfirmOptions` / `PayphoneConfirmParams` | Options and params for `usePayphoneConfirm()` |
|
|
1574
|
+
| `SimpleMutationOptions<T>` | Options for hooks created via `createMutationHook` |
|
|
1575
|
+
| `MutationHookConfig<TData, TInput>` | Configuration for `createMutationHook()` |
|
|
1576
|
+
|
|
1577
|
+
### Client Types
|
|
1578
|
+
|
|
1579
|
+
| Type | Description |
|
|
1580
|
+
| -------------------- | --------------------------------------------------------- |
|
|
1581
|
+
| `AccessClient` | API client instance type |
|
|
1582
|
+
| `AccessClientConfig` | Client configuration (`baseUrl`, `basePath?`, `headers?`) |
|
|
1583
|
+
| `ApiError` | API error response type |
|
|
1584
|
+
| `AuthPaths` | Map of all auth endpoint paths |
|
|
1585
|
+
|
|
1586
|
+
### Schema Input Types
|
|
1587
|
+
|
|
1588
|
+
| Type | Description |
|
|
1589
|
+
| --------------------------- | ----------------------------------------------- |
|
|
1590
|
+
| `LoginInput` | Inferred type from `loginSchema` |
|
|
1591
|
+
| `SignupInput` | Inferred type from `signupSchema` |
|
|
1592
|
+
| `ChangePasswordInput` | Inferred type from `changePasswordSchema` |
|
|
1593
|
+
| `MagicLinkRequestInput` | Inferred type from `magicLinkRequestSchema` |
|
|
1594
|
+
| `MagicLinkVerifyInput` | Inferred type from `magicLinkVerifySchema` |
|
|
1595
|
+
| `SocialLoginInput` | Inferred type from `socialLoginSchema` |
|
|
1596
|
+
| `PasskeyRegisterStartInput` | Inferred type from `passkeyRegisterStartSchema` |
|
|
1597
|
+
| `ForgotPasswordInput` | Inferred type from `forgotPasswordSchema` |
|
|
1598
|
+
| `ResetPasswordConfirmInput` | Inferred type from `resetPasswordConfirmSchema` |
|
|
1397
1599
|
|
|
1398
1600
|
---
|
|
1399
1601
|
|