@ory/elements-react 0.0.0-pr.7af5f16 → 0.0.0-pr.827df319
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/CHANGELOG.md +104 -0
- package/README.md +253 -4
- package/dist/index.d.mts +85 -48
- package/dist/index.d.ts +85 -48
- package/dist/index.js +744 -408
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +742 -408
- package/dist/index.mjs.map +1 -1
- package/dist/theme/default/index.css +12 -6
- package/dist/theme/default/index.css.map +1 -1
- package/dist/theme/default/index.js +3539 -3280
- package/dist/theme/default/index.js.map +1 -1
- package/dist/theme/default/index.mjs +3580 -3311
- package/dist/theme/default/index.mjs.map +1 -1
- package/package.json +8 -7
- package/tsconfig.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,107 @@
|
|
|
1
|
+
## 1.0.0-rc.4 (2025-05-15)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- properly handle missing fields in OIDC registration ([#534](https://github.com/ory/elements/pull/534))
|
|
6
|
+
- incorrect if branching in handle error ([#533](https://github.com/ory/elements/pull/533))
|
|
7
|
+
- re-enable method chooser on mfa method active screens ([#530](https://github.com/ory/elements/pull/530))
|
|
8
|
+
|
|
9
|
+
### ❤️ Thank You
|
|
10
|
+
|
|
11
|
+
- hackerman @aeneasr
|
|
12
|
+
- Jonas Hungershausen
|
|
13
|
+
|
|
14
|
+
## 1.0.0-rc.3 (2025-05-09)
|
|
15
|
+
|
|
16
|
+
### 🩹 Fixes
|
|
17
|
+
|
|
18
|
+
- captcha reloading and duplication ([#518](https://github.com/ory/elements/pull/518))
|
|
19
|
+
- ⚠️ rework configuration management ([#515](https://github.com/ory/elements/pull/515))
|
|
20
|
+
- add missing testids to method selector and checkbox ([#517](https://github.com/ory/elements/pull/517))
|
|
21
|
+
|
|
22
|
+
### ⚠️ Breaking Changes
|
|
23
|
+
|
|
24
|
+
- ⚠️ rework configuration management ([#515](https://github.com/ory/elements/pull/515))
|
|
25
|
+
|
|
26
|
+
### ❤️ Thank You
|
|
27
|
+
|
|
28
|
+
- hackerman @aeneasr
|
|
29
|
+
- Jonas Hungershausen
|
|
30
|
+
|
|
31
|
+
## 1.0.0-rc.2 (2025-04-30)
|
|
32
|
+
|
|
33
|
+
### 🚀 Features
|
|
34
|
+
|
|
35
|
+
- method translation for totp, code, webauthn ([#500](https://github.com/ory/elements/pull/500))
|
|
36
|
+
- add all missing stories ([#480](https://github.com/ory/elements/pull/480))
|
|
37
|
+
- preview deployments for example apps ([#488](https://github.com/ory/elements/pull/488))
|
|
38
|
+
- add back button to settings page ([#464](https://github.com/ory/elements/pull/464))
|
|
39
|
+
|
|
40
|
+
### 🩹 Fixes
|
|
41
|
+
|
|
42
|
+
- ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
|
|
43
|
+
- sort captcha before submit button ([#507](https://github.com/ory/elements/pull/507))
|
|
44
|
+
- cors credentials in default client ([#508](https://github.com/ory/elements/pull/508))
|
|
45
|
+
- back button should return to application ([#465](https://github.com/ory/elements/pull/465))
|
|
46
|
+
- adjust design of generic OIDC provider ([#492](https://github.com/ory/elements/pull/492))
|
|
47
|
+
- use proper id for react element arrays ([#495](https://github.com/ory/elements/pull/495))
|
|
48
|
+
- add test id to header messages ([#489](https://github.com/ory/elements/pull/489))
|
|
49
|
+
- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
|
|
50
|
+
- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
|
|
51
|
+
- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
|
|
52
|
+
- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
|
|
53
|
+
|
|
54
|
+
### ⚠️ Breaking Changes
|
|
55
|
+
|
|
56
|
+
- ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
|
|
57
|
+
|
|
58
|
+
### ❤️ Thank You
|
|
59
|
+
|
|
60
|
+
- hackerman @aeneasr
|
|
61
|
+
- Jonas Hungershausen
|
|
62
|
+
|
|
63
|
+
## 1.0.0-rc.1 (2025-04-21)
|
|
64
|
+
|
|
65
|
+
### 🩹 Fixes
|
|
66
|
+
|
|
67
|
+
- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
|
|
68
|
+
- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
|
|
69
|
+
- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
|
|
70
|
+
- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
|
|
71
|
+
|
|
72
|
+
### ❤️ Thank You
|
|
73
|
+
|
|
74
|
+
- hackerman @aeneasr
|
|
75
|
+
- Jonas Hungershausen
|
|
76
|
+
|
|
77
|
+
## 1.0.0-rc.0 (2025-04-17)
|
|
78
|
+
|
|
79
|
+
### 🚀 Features
|
|
80
|
+
|
|
81
|
+
- add missing translations for de, es and fr ([#456](https://github.com/ory/elements/pull/456))
|
|
82
|
+
|
|
83
|
+
### 🩹 Fixes
|
|
84
|
+
|
|
85
|
+
- correctly set input field value ([#447](https://github.com/ory/elements/pull/447))
|
|
86
|
+
- add missing settings padding ([#446](https://github.com/ory/elements/pull/446))
|
|
87
|
+
- always omit conflicting keys ([#444](https://github.com/ory/elements/pull/444))
|
|
88
|
+
|
|
89
|
+
### ❤️ Thank You
|
|
90
|
+
|
|
91
|
+
- hackerman @aeneasr
|
|
92
|
+
- Jonas Hungershausen
|
|
93
|
+
|
|
94
|
+
## 1.0.0-next.46 (2025-04-16)
|
|
95
|
+
|
|
96
|
+
### 🩹 Fixes
|
|
97
|
+
|
|
98
|
+
- missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
|
|
99
|
+
- use correct testid ([#438](https://github.com/ory/elements/pull/438))
|
|
100
|
+
|
|
101
|
+
### ❤️ Thank You
|
|
102
|
+
|
|
103
|
+
- hackerman @aeneasr
|
|
104
|
+
|
|
1
105
|
## 1.0.0-next.45 (2025-04-15)
|
|
2
106
|
|
|
3
107
|
### 🩹 Fixes
|
package/README.md
CHANGED
|
@@ -202,16 +202,243 @@ import "@ory/elements-react/theme/styles.css"
|
|
|
202
202
|
|
|
203
203
|
### Theming
|
|
204
204
|
|
|
205
|
-
|
|
205
|
+
The styling for specific elements or groups of elements in the UI can be
|
|
206
|
+
overwritten by providing your own custom CSS variables. For more complex
|
|
207
|
+
customizations see the [Component System](#component-system).
|
|
206
208
|
|
|
207
209
|
```css
|
|
208
210
|
:root {
|
|
209
|
-
/*
|
|
210
|
-
|
|
211
|
+
/* primitives */
|
|
212
|
+
/* Overriding these may affect more variables "down stream" */
|
|
213
|
+
--ui-100: #f1f5f9;
|
|
214
|
+
--ui-200: #e2e8f0;
|
|
215
|
+
--ui-300: #cbd5e1;
|
|
216
|
+
--ui-400: #94a3b8;
|
|
217
|
+
--ui-50: #f8fafc;
|
|
218
|
+
--ui-500: #64748b;
|
|
219
|
+
--ui-600: #475569;
|
|
220
|
+
--ui-700: #334155;
|
|
221
|
+
--ui-800: #1e293b;
|
|
222
|
+
--ui-900: #0f172a;
|
|
223
|
+
--ui-950: #020617;
|
|
224
|
+
--ui-black: #000000;
|
|
225
|
+
--ui-danger: #dc2626;
|
|
226
|
+
--ui-success: #22c55e;
|
|
227
|
+
--ui-transparent: #ffffff00;
|
|
228
|
+
--ui-warning: #eab308;
|
|
229
|
+
--ui-white: #ffffff;
|
|
230
|
+
/* primitives end */
|
|
231
|
+
|
|
232
|
+
/* brand */
|
|
233
|
+
--brand-100: var(--ui-100);
|
|
234
|
+
--brand-200: var(--ui-300);
|
|
235
|
+
--brand-300: var(--ui-500);
|
|
236
|
+
--brand-400: var(--ui-700);
|
|
237
|
+
--brand-50: var(--ui-50);
|
|
238
|
+
--brand-500: var(--ui-900);
|
|
239
|
+
--brand-600: var(--ui-white);
|
|
240
|
+
--brand-700: var(--ui-200);
|
|
241
|
+
--brand-800: var(--ui-400);
|
|
242
|
+
--brand-900: var(--ui-600);
|
|
243
|
+
--brand-950: var(--ui-800);
|
|
244
|
+
/* brand end */
|
|
245
|
+
|
|
246
|
+
/* interface */
|
|
247
|
+
/* These variables affect "groups" of variables, and are re-used in the more specific variables below */
|
|
248
|
+
--interface-background-brand-primary: var(--brand-500);
|
|
249
|
+
--interface-background-brand-primary-hover: var(--brand-400);
|
|
250
|
+
--interface-background-brand-secondary: var(--brand-50);
|
|
251
|
+
--interface-background-brand-secondary-hover: var(--brand-100);
|
|
252
|
+
--interface-background-default-inverted: var(--ui-900);
|
|
253
|
+
--interface-background-default-inverted-hover: var(--ui-800);
|
|
254
|
+
--interface-background-default-none: var(--ui-transparent);
|
|
255
|
+
--interface-background-default-primary: var(--ui-white);
|
|
256
|
+
--interface-background-default-primary-hover: var(--ui-50);
|
|
257
|
+
--interface-background-default-secondary: var(--ui-50);
|
|
258
|
+
--interface-background-default-secondary-hover: var(--ui-200);
|
|
259
|
+
--interface-background-default-tertiary: var(--ui-200);
|
|
260
|
+
--interface-background-default-tertiary-hover: var(--ui-300);
|
|
261
|
+
--interface-background-disabled-disabled: var(--ui-200);
|
|
262
|
+
--interface-background-validation-danger: var(--ui-danger);
|
|
263
|
+
--interface-background-validation-success: var(--ui-success);
|
|
264
|
+
--interface-background-validation-warning: var(--ui-warning);
|
|
265
|
+
--interface-border-brand-brand: var(--brand-500);
|
|
266
|
+
--interface-border-default-inverted: var(--ui-700);
|
|
267
|
+
--interface-border-default-none: var(--ui-transparent);
|
|
268
|
+
--interface-border-default-primary: var(--ui-300);
|
|
269
|
+
--interface-border-disabled-disabled: var(--ui-300);
|
|
270
|
+
--interface-border-validation-danger: var(--ui-danger);
|
|
271
|
+
--interface-border-validation-success: var(--ui-success);
|
|
272
|
+
--interface-border-validation-warning: var(--ui-warning);
|
|
273
|
+
--interface-foreground-brand-on-primary: var(--brand-50);
|
|
274
|
+
--interface-foreground-brand-on-secondary: var(--brand-950);
|
|
275
|
+
--interface-foreground-brand-primary: var(--brand-500);
|
|
276
|
+
--interface-foreground-brand-secondary: var(--brand-50);
|
|
277
|
+
--interface-foreground-default-inverted: var(--ui-white);
|
|
278
|
+
--interface-foreground-default-primary: var(--ui-900);
|
|
279
|
+
--interface-foreground-default-secondary: var(--ui-700);
|
|
280
|
+
--interface-foreground-default-tertiary: var(--ui-500);
|
|
281
|
+
--interface-foreground-disabled-disabled: var(--ui-300);
|
|
282
|
+
--interface-foreground-disabled-on-disabled: var(--ui-400);
|
|
283
|
+
--interface-foreground-validation-danger: var(--ui-danger);
|
|
284
|
+
--interface-foreground-validation-success: var(--ui-success);
|
|
285
|
+
--interface-foreground-validation-warning: var(--ui-warning);
|
|
286
|
+
/* interface end */
|
|
287
|
+
|
|
288
|
+
/* Specific elements */
|
|
289
|
+
--button-identifier-background-default: var(
|
|
290
|
+
--interface-background-brand-secondary
|
|
291
|
+
);
|
|
292
|
+
--button-identifier-background-hover: var(
|
|
293
|
+
--interface-background-brand-secondary-hover
|
|
294
|
+
);
|
|
295
|
+
--button-identifier-border-border-default: var(
|
|
296
|
+
--interface-border-brand-brand
|
|
297
|
+
);
|
|
298
|
+
--button-identifier-border-border-hover: var(--interface-border-brand-brand);
|
|
299
|
+
--button-identifier-foreground-default: var(
|
|
300
|
+
--interface-foreground-brand-on-secondary
|
|
301
|
+
);
|
|
302
|
+
--button-identifier-foreground-hover: var(
|
|
303
|
+
--interface-foreground-brand-on-secondary
|
|
304
|
+
);
|
|
305
|
+
--button-link-brand-brand: var(--interface-foreground-brand-primary);
|
|
306
|
+
--button-link-brand-brand-hover: var(--interface-foreground-default-primary);
|
|
307
|
+
--button-link-default-primary: var(--interface-foreground-default-primary);
|
|
308
|
+
--button-link-default-primary-hover: var(
|
|
309
|
+
--interface-foreground-brand-primary
|
|
310
|
+
);
|
|
311
|
+
--button-link-default-secondary: var(
|
|
312
|
+
--interface-foreground-default-secondary
|
|
313
|
+
);
|
|
314
|
+
--button-link-default-secondary-hover: var(
|
|
315
|
+
--interface-foreground-default-tertiary
|
|
316
|
+
);
|
|
317
|
+
--button-link-disabled-disabled: var(
|
|
318
|
+
--interface-foreground-disabled-disabled
|
|
319
|
+
);
|
|
320
|
+
--button-primary-background-default: var(
|
|
321
|
+
--interface-background-brand-primary
|
|
322
|
+
);
|
|
323
|
+
--button-primary-background-disabled: var(
|
|
324
|
+
--interface-background-disabled-disabled
|
|
325
|
+
);
|
|
326
|
+
--button-primary-background-hover: var(
|
|
327
|
+
--interface-background-brand-primary-hover
|
|
328
|
+
);
|
|
329
|
+
--button-primary-border-default: var(--interface-border-default-none);
|
|
330
|
+
--button-primary-border-disabled: var(--interface-border-disabled-disabled);
|
|
331
|
+
--button-primary-border-hover: var(--interface-border-default-none);
|
|
332
|
+
--button-primary-foreground-default: var(
|
|
333
|
+
--interface-foreground-brand-on-primary
|
|
334
|
+
);
|
|
335
|
+
--button-primary-foreground-disabled: var(
|
|
336
|
+
--interface-foreground-disabled-on-disabled
|
|
337
|
+
);
|
|
338
|
+
--button-primary-foreground-hover: var(
|
|
339
|
+
--interface-foreground-brand-on-primary
|
|
340
|
+
);
|
|
341
|
+
--button-secondary-background-default: var(
|
|
342
|
+
--interface-background-default-primary
|
|
343
|
+
);
|
|
344
|
+
--button-secondary-background-disabled: var(
|
|
345
|
+
--interface-background-disabled-disabled
|
|
346
|
+
);
|
|
347
|
+
--button-secondary-background-hover: var(
|
|
348
|
+
--interface-background-default-primary-hover
|
|
349
|
+
);
|
|
350
|
+
--button-secondary-border-default: var(--interface-border-default-primary);
|
|
351
|
+
--button-secondary-border-disabled: var(--interface-border-disabled-disabled);
|
|
352
|
+
--button-secondary-border-hover: var(--interface-border-default-primary);
|
|
353
|
+
--button-secondary-foreground-default: var(
|
|
354
|
+
--interface-foreground-default-primary
|
|
355
|
+
);
|
|
356
|
+
--button-secondary-foreground-disabled: var(
|
|
357
|
+
--interface-foreground-disabled-on-disabled
|
|
358
|
+
);
|
|
359
|
+
--button-secondary-foreground-hover: var(
|
|
360
|
+
--interface-foreground-default-secondary
|
|
361
|
+
);
|
|
362
|
+
--button-social-background-default: var(
|
|
363
|
+
--interface-background-default-primary
|
|
364
|
+
);
|
|
365
|
+
--button-social-background-disabled: var(
|
|
366
|
+
--interface-background-disabled-disabled
|
|
367
|
+
);
|
|
368
|
+
--button-social-background-generic-provider: var(
|
|
369
|
+
--interface-background-default-inverted
|
|
370
|
+
);
|
|
371
|
+
--button-social-background-hover: var(
|
|
372
|
+
--interface-background-default-primary-hover
|
|
373
|
+
);
|
|
374
|
+
--button-social-border-default: var(--interface-border-default-primary);
|
|
375
|
+
--button-social-border-disabled: var(--interface-border-disabled-disabled);
|
|
376
|
+
--button-social-border-generic-provider: var(--interface-border-default-none);
|
|
377
|
+
--button-social-border-hover: var(--interface-border-default-primary);
|
|
378
|
+
--button-social-foreground-default: var(
|
|
379
|
+
--interface-foreground-default-primary
|
|
380
|
+
);
|
|
381
|
+
--button-social-foreground-disabled: var(
|
|
382
|
+
--interface-foreground-disabled-on-disabled
|
|
383
|
+
);
|
|
384
|
+
--button-social-foreground-generic-provider: var(
|
|
385
|
+
--interface-foreground-default-inverted
|
|
386
|
+
);
|
|
387
|
+
--button-social-foreground-hover: var(
|
|
388
|
+
--interface-foreground-default-secondary
|
|
389
|
+
);
|
|
390
|
+
--checkbox-background-checked: var(--interface-background-brand-primary);
|
|
391
|
+
--checkbox-background-default: var(--interface-background-default-secondary);
|
|
392
|
+
--checkbox-border-checkbox-border-checked: var(
|
|
393
|
+
--interface-border-brand-brand
|
|
394
|
+
);
|
|
395
|
+
--checkbox-border-checkbox-border-default: var(
|
|
396
|
+
--interface-border-default-primary
|
|
397
|
+
);
|
|
398
|
+
--checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
399
|
+
--checkbox-foreground-default: var(--interface-foreground-default-primary);
|
|
400
|
+
--form-background-default: var(--interface-background-default-primary);
|
|
401
|
+
--form-border-default: var(--interface-border-default-primary);
|
|
402
|
+
--input-background-default: var(--interface-background-default-primary);
|
|
403
|
+
--input-background-disabled: var(--interface-background-disabled-disabled);
|
|
404
|
+
--input-background-hover: var(--interface-background-default-primary-hover);
|
|
405
|
+
--input-border-default: var(--interface-border-default-primary);
|
|
406
|
+
--input-border-disabled: var(--interface-border-disabled-disabled);
|
|
407
|
+
--input-border-focus: var(--interface-border-brand-brand);
|
|
408
|
+
--input-border-hover: var(--interface-border-default-primary);
|
|
409
|
+
--input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
|
|
410
|
+
--input-foreground-primary: var(--interface-foreground-default-primary);
|
|
411
|
+
--input-foreground-secondary: var(--interface-foreground-default-secondary);
|
|
412
|
+
--input-foreground-tertiary: var(--interface-foreground-default-tertiary);
|
|
413
|
+
--ory-background-default: var(--interface-background-default-primary);
|
|
414
|
+
--ory-border-default: var(--interface-border-default-primary);
|
|
415
|
+
--ory-foreground-default: var(--interface-foreground-default-primary);
|
|
416
|
+
--radio-background-checked: var(--interface-background-brand-primary);
|
|
417
|
+
--radio-background-default: var(--interface-background-default-secondary);
|
|
418
|
+
--radio-border-checked: var(--interface-border-brand-brand);
|
|
419
|
+
--radio-border-default: var(--interface-border-default-primary);
|
|
420
|
+
--radio-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
421
|
+
--radio-foreground-default: var(--interface-foreground-default-primary);
|
|
422
|
+
--toggle-background-checked: var(--interface-background-brand-primary);
|
|
423
|
+
--toggle-background-default: var(--interface-background-default-secondary);
|
|
424
|
+
--toggle-border-checked: var(--interface-border-default-none);
|
|
425
|
+
--toggle-border-default: var(--interface-border-default-primary);
|
|
426
|
+
--toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
427
|
+
--toggle-foreground-default: var(--interface-foreground-brand-primary);
|
|
428
|
+
/* Specific elements end */
|
|
429
|
+
|
|
430
|
+
/* border radius */
|
|
431
|
+
--border-radius-buttons: 0.25rem;
|
|
432
|
+
--border-radius-forms: 0.25rem;
|
|
433
|
+
--border-radius-general: 0.25rem;
|
|
434
|
+
--border-radius-branding: 0.5rem;
|
|
435
|
+
--border-radius-cards: 0.75rem;
|
|
436
|
+
--border-radius-identifier: 62.4375rem;
|
|
437
|
+
/* border radius end*/
|
|
211
438
|
}
|
|
212
439
|
```
|
|
213
440
|
|
|
214
|
-
### Component
|
|
441
|
+
### Component system
|
|
215
442
|
|
|
216
443
|
Many components in Ory Elements can be overriden with your own implementation.
|
|
217
444
|
Ory Elements also provides useful hooks that be used inside of your custom
|
|
@@ -249,6 +476,28 @@ export default async function RegistrationPage({ searchParams }: PageProps) {
|
|
|
249
476
|
}
|
|
250
477
|
```
|
|
251
478
|
|
|
479
|
+
### internationalization (i18n)
|
|
480
|
+
|
|
481
|
+
`@ory/elements-react` comes with default translations for many languages.
|
|
482
|
+
Additionally, it provides a way to override the default messages, through the
|
|
483
|
+
`locale` property of the `OryClientConfiguration`.
|
|
484
|
+
|
|
485
|
+
```ts
|
|
486
|
+
const config = {
|
|
487
|
+
intl: {
|
|
488
|
+
locale: "en", // Or any of the other supported locales.
|
|
489
|
+
customTranslations: {
|
|
490
|
+
en: {
|
|
491
|
+
"identities.messages.1040006": "This is a custom translation",
|
|
492
|
+
},
|
|
493
|
+
},
|
|
494
|
+
},
|
|
495
|
+
}
|
|
496
|
+
```
|
|
497
|
+
|
|
498
|
+
For a full list of messages, see
|
|
499
|
+
[en.json](https://github.com/ory/elements/blob/main/packages/elements-react/src/locales/en.json).
|
|
500
|
+
|
|
252
501
|
## Development
|
|
253
502
|
|
|
254
503
|
See [DEVELOPMENT.md](./DEVELOPMENT.md).
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText,
|
|
1
|
+
import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, ConfigurationParameters, AccountExperienceConfiguration, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, FrontendApi } from '@ory/client-fetch';
|
|
2
2
|
import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -384,44 +384,6 @@ declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
|
|
|
384
384
|
flowType: string;
|
|
385
385
|
}) => number;
|
|
386
386
|
|
|
387
|
-
type LocaleMap = Record<string, Record<string, string>>;
|
|
388
|
-
declare const OryLocales: LocaleMap;
|
|
389
|
-
|
|
390
|
-
type Locale = keyof typeof OryLocales;
|
|
391
|
-
type IntlContextProps = {
|
|
392
|
-
locale: Locale;
|
|
393
|
-
customTranslations?: Partial<LocaleMap>;
|
|
394
|
-
};
|
|
395
|
-
|
|
396
|
-
type IntlConfig = IntlContextProps;
|
|
397
|
-
type OryClientConfiguration = {
|
|
398
|
-
/**
|
|
399
|
-
* The name of the application the user is logging in to.
|
|
400
|
-
*/
|
|
401
|
-
name: string;
|
|
402
|
-
/**
|
|
403
|
-
* An optional logo URL to display in the UI instead of the name.
|
|
404
|
-
*/
|
|
405
|
-
logoUrl?: string;
|
|
406
|
-
stylesheet?: string;
|
|
407
|
-
favicon?: string;
|
|
408
|
-
sdk: {
|
|
409
|
-
url: string;
|
|
410
|
-
options?: Partial<ConfigurationParameters>;
|
|
411
|
-
};
|
|
412
|
-
project: {
|
|
413
|
-
registration_enabled: boolean;
|
|
414
|
-
verification_enabled: boolean;
|
|
415
|
-
recovery_enabled: boolean;
|
|
416
|
-
recovery_ui_url: string;
|
|
417
|
-
registration_ui_url: string;
|
|
418
|
-
verification_ui_url: string;
|
|
419
|
-
login_ui_url: string;
|
|
420
|
-
default_redirect_url?: string;
|
|
421
|
-
};
|
|
422
|
-
intl?: IntlConfig;
|
|
423
|
-
};
|
|
424
|
-
|
|
425
387
|
/**
|
|
426
388
|
* A generic flow container, containing a flowType, the flow itself and the config object
|
|
427
389
|
*
|
|
@@ -430,7 +392,6 @@ type OryClientConfiguration = {
|
|
|
430
392
|
type OryFlow<TFlowType extends FlowType, TFlow> = {
|
|
431
393
|
flowType: TFlowType;
|
|
432
394
|
flow: TFlow;
|
|
433
|
-
config: OryClientConfiguration;
|
|
434
395
|
};
|
|
435
396
|
/**
|
|
436
397
|
* A flow container for the login flow
|
|
@@ -486,6 +447,7 @@ type ConsentFlow = {
|
|
|
486
447
|
ui: UiContainer;
|
|
487
448
|
consent_request: OAuth2ConsentRequest;
|
|
488
449
|
session: Session;
|
|
450
|
+
return_to?: string;
|
|
489
451
|
};
|
|
490
452
|
type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
|
|
491
453
|
/**
|
|
@@ -493,6 +455,48 @@ type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
|
|
|
493
455
|
*/
|
|
494
456
|
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
|
|
495
457
|
|
|
458
|
+
type LocaleMap = Record<string, Record<string, string>>;
|
|
459
|
+
declare const OryLocales: LocaleMap;
|
|
460
|
+
|
|
461
|
+
type Locale = keyof typeof OryLocales;
|
|
462
|
+
type IntlContextProps = {
|
|
463
|
+
locale: Locale;
|
|
464
|
+
customTranslations?: Partial<LocaleMap>;
|
|
465
|
+
};
|
|
466
|
+
|
|
467
|
+
type IntlConfig = IntlContextProps;
|
|
468
|
+
/**
|
|
469
|
+
* The configuration for Ory Elements.
|
|
470
|
+
*
|
|
471
|
+
* This configuration is used to customize the behavior and appearance of Ory Elements.
|
|
472
|
+
*
|
|
473
|
+
* By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
|
|
474
|
+
*
|
|
475
|
+
* You can also set the name of the application, the logo URL, and the SDK configuration.
|
|
476
|
+
* By default, the name and logo are displayed in the card's header.
|
|
477
|
+
*/
|
|
478
|
+
type OryClientConfiguration = {
|
|
479
|
+
/**
|
|
480
|
+
* The SDK configuration.
|
|
481
|
+
* This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
|
|
482
|
+
*/
|
|
483
|
+
sdk?: {
|
|
484
|
+
url?: string;
|
|
485
|
+
options?: Partial<ConfigurationParameters>;
|
|
486
|
+
};
|
|
487
|
+
/**
|
|
488
|
+
* The internationalization configuration.
|
|
489
|
+
* This configuration is used to set the locale and any additional options used for the i18n library.
|
|
490
|
+
* The locale is used to determine the language of the UI.
|
|
491
|
+
* The default locale is "en".
|
|
492
|
+
*/
|
|
493
|
+
intl?: IntlConfig;
|
|
494
|
+
/**
|
|
495
|
+
* The configuration for the project.
|
|
496
|
+
*/
|
|
497
|
+
project: AccountExperienceConfiguration;
|
|
498
|
+
};
|
|
499
|
+
|
|
496
500
|
/**
|
|
497
501
|
* Converts a UiText to a FormattedMessage.
|
|
498
502
|
* The UiText contains the id of the message and the context.
|
|
@@ -561,18 +565,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
|
|
|
561
565
|
* @param message - the UiText message to generate a test id for
|
|
562
566
|
* @returns a unique, stable test id for the message
|
|
563
567
|
*/
|
|
564
|
-
declare function messageTestId(message:
|
|
568
|
+
declare function messageTestId(message: {
|
|
569
|
+
id: number | string;
|
|
570
|
+
}): {
|
|
565
571
|
"data-testid": string;
|
|
566
572
|
};
|
|
567
573
|
|
|
568
|
-
type
|
|
569
|
-
current: "provide_identifier";
|
|
570
|
-
} | {
|
|
574
|
+
type FormStateSelectMethod = {
|
|
571
575
|
current: "select_method";
|
|
572
|
-
}
|
|
576
|
+
};
|
|
577
|
+
type FormStateProvideIdentifier = {
|
|
578
|
+
current: "provide_identifier";
|
|
579
|
+
};
|
|
580
|
+
type FormStateMethodActive = {
|
|
573
581
|
current: "method_active";
|
|
574
582
|
method: UiNodeGroupEnum;
|
|
575
|
-
}
|
|
583
|
+
};
|
|
584
|
+
type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
|
|
576
585
|
current: "success_screen";
|
|
577
586
|
} | {
|
|
578
587
|
current: "settings";
|
|
@@ -583,6 +592,8 @@ type FormStateAction = {
|
|
|
583
592
|
} | {
|
|
584
593
|
type: "action_select_method";
|
|
585
594
|
method: UiNodeGroupEnum;
|
|
595
|
+
} | {
|
|
596
|
+
type: "action_clear_active_method";
|
|
586
597
|
};
|
|
587
598
|
|
|
588
599
|
/**
|
|
@@ -616,7 +627,33 @@ type FlowContextValue = OryFlowContainer & {
|
|
|
616
627
|
|
|
617
628
|
type OryProviderProps = {
|
|
618
629
|
components: OryFlowComponents;
|
|
630
|
+
config: OryClientConfiguration;
|
|
619
631
|
} & OryFlowContainer & PropsWithChildren;
|
|
620
|
-
declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
|
|
632
|
+
declare function OryProvider({ children, components: Components, config, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
|
|
633
|
+
|
|
634
|
+
type OryElementsConfiguration = {
|
|
635
|
+
sdk: OrySDK;
|
|
636
|
+
project: AccountExperienceConfiguration;
|
|
637
|
+
};
|
|
638
|
+
declare function useOryConfiguration(): OryElementsConfiguration;
|
|
639
|
+
type OrySDK = SDKConfig & {
|
|
640
|
+
/**
|
|
641
|
+
* The frontend client for the Ory SDK.
|
|
642
|
+
* This client is used to interact with the Ory SDK and should be used to make API calls.
|
|
643
|
+
*/
|
|
644
|
+
frontend: FrontendApi;
|
|
645
|
+
};
|
|
646
|
+
type SDKConfig = {
|
|
647
|
+
/**
|
|
648
|
+
* The URL of the Ory SDK.
|
|
649
|
+
* This URL is used to connect to the Ory SDK and should be set to the base URL of your Ory instance.
|
|
650
|
+
*/
|
|
651
|
+
url: string;
|
|
652
|
+
options?: Partial<ConfigurationParameters>;
|
|
653
|
+
};
|
|
654
|
+
declare function OryConfigurationProvider({ children, sdk: initialConfig, project, }: PropsWithChildren<{
|
|
655
|
+
sdk?: Partial<OryClientConfiguration["sdk"]>;
|
|
656
|
+
project?: Partial<AccountExperienceConfiguration>;
|
|
657
|
+
}>): react_jsx_runtime.JSX.Element;
|
|
621
658
|
|
|
622
|
-
export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
|
|
659
|
+
export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConfigurationProvider, OryConsentCard, type OryElementsConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };
|