@ory/elements-react 0.0.0-pr.4a28a8f → 0.0.0-pr.5cdcf132

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 CHANGED
@@ -1,3 +1,105 @@
1
+ ## 1.0.0-rc.1 (2025-04-21)
2
+
3
+ ### 🩹 Fixes
4
+
5
+ - re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
6
+ - resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
7
+ - add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
8
+ - resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
9
+
10
+ ### ❤️ Thank You
11
+
12
+ - hackerman @aeneasr
13
+ - Jonas Hungershausen
14
+
15
+ ## 1.0.0-rc.0 (2025-04-17)
16
+
17
+ ### 🚀 Features
18
+
19
+ - add missing translations for de, es and fr ([#456](https://github.com/ory/elements/pull/456))
20
+
21
+ ### 🩹 Fixes
22
+
23
+ - correctly set input field value ([#447](https://github.com/ory/elements/pull/447))
24
+ - add missing settings padding ([#446](https://github.com/ory/elements/pull/446))
25
+ - always omit conflicting keys ([#444](https://github.com/ory/elements/pull/444))
26
+
27
+ ### ❤️ Thank You
28
+
29
+ - hackerman @aeneasr
30
+ - Jonas Hungershausen
31
+
32
+ ## 1.0.0-next.46 (2025-04-16)
33
+
34
+ ### 🩹 Fixes
35
+
36
+ - missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
37
+ - use correct testid ([#438](https://github.com/ory/elements/pull/438))
38
+
39
+ ### ❤️ Thank You
40
+
41
+ - hackerman @aeneasr
42
+
43
+ ## 1.0.0-next.45 (2025-04-15)
44
+
45
+ ### 🩹 Fixes
46
+
47
+ - add missing test id to scope checkbox label ([#437](https://github.com/ory/elements/pull/437))
48
+ - add missing captcha group to all methods ([#432](https://github.com/ory/elements/pull/432))
49
+
50
+ ### ❤️ Thank You
51
+
52
+ - hackerman @aeneasr
53
+ - Jonas Hungershausen
54
+
55
+ ## 1.0.0-next.44 (2025-04-10)
56
+
57
+ ### 🩹 Fixes
58
+
59
+ - use currentColor in eye icons ([#433](https://github.com/ory/elements/pull/433))
60
+
61
+ ### ❤️ Thank You
62
+
63
+ - Jonas Hungershausen
64
+
65
+ ## 1.0.0-next.43 (2025-04-10)
66
+
67
+ ### 🚀 Features
68
+
69
+ - add missing French translations ([#401](https://github.com/ory/elements/pull/401))
70
+
71
+ ### 🩹 Fixes
72
+
73
+ - two-step registration back button ([#428](https://github.com/ory/elements/pull/428))
74
+ - resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
75
+
76
+ ### ❤️ Thank You
77
+
78
+ - hackerman @aeneasr
79
+ - Jonas Hungershausen
80
+ - Jordan Labrosse
81
+
82
+ ## 1.0.0-next.41 (2025-04-07)
83
+
84
+ ### 🩹 Fixes
85
+
86
+ - resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
87
+
88
+ ### ❤️ Thank You
89
+
90
+ - Jonas Hungershausen
91
+ - Jordan Labrosse
92
+
93
+ ## 1.0.0-next.40 (2025-04-02)
94
+
95
+ ### 🚀 Features
96
+
97
+ - support SAML-native ([#395](https://github.com/ory/elements/pull/395))
98
+
99
+ ### ❤️ Thank You
100
+
101
+ - hackerman @aeneasr
102
+
1
103
  ## 1.0.0-next.39 (2025-03-25)
2
104
 
3
105
  ### 🚀 Features
package/README.md CHANGED
@@ -202,16 +202,243 @@ import "@ory/elements-react/theme/styles.css"
202
202
 
203
203
  ### Theming
204
204
 
205
- Most styling can be overwritten, by providing your own custom CSS variables:
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
- /* To override the text color of the primary buttons */
210
- --button-primary-fg-default: #fffeee;
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 overrides
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).
@@ -1,7 +1,10 @@
1
- import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
1
+ import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
2
2
 
3
3
  declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
4
4
  forceBaseUrl?: string;
5
5
  }>): FrontendApi;
6
+ declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
7
+ forceBaseUrl?: string;
8
+ }>): OAuth2Api;
6
9
 
7
- export { frontendClient };
10
+ export { frontendClient, oauth2Client };
@@ -1,7 +1,10 @@
1
- import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
1
+ import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
2
2
 
3
3
  declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
4
4
  forceBaseUrl?: string;
5
5
  }>): FrontendApi;
6
+ declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
7
+ forceBaseUrl?: string;
8
+ }>): OAuth2Api;
6
9
 
7
- export { frontendClient };
10
+ export { frontendClient, oauth2Client };
@@ -19,7 +19,8 @@ var __copyProps = (to, from, except, desc) => {
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
20
  var frontendClient_exports = {};
21
21
  __export(frontendClient_exports, {
22
- frontendClient: () => frontendClient
22
+ frontendClient: () => frontendClient,
23
+ oauth2Client: () => oauth2Client
23
24
  });
24
25
  module.exports = __toCommonJS(frontendClient_exports);
25
26
  var import_client_fetch = require("@ory/client-fetch");
@@ -45,8 +46,30 @@ function frontendClient({
45
46
  });
46
47
  return new import_client_fetch.FrontendApi(config);
47
48
  }
49
+ function oauth2Client({
50
+ forceBaseUrl,
51
+ ...opts
52
+ } = {
53
+ credentials: "include"
54
+ }) {
55
+ var _a;
56
+ const basePath = forceBaseUrl != null ? forceBaseUrl : (0, import_config.guessPotentiallyProxiedOrySdkUrl)({
57
+ knownProxiedUrl: window.location.origin
58
+ });
59
+ const config = new import_client_fetch.Configuration({
60
+ ...opts,
61
+ basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
62
+ credentials: (_a = opts.credentials) != null ? _a : "include",
63
+ headers: {
64
+ Accept: "application/json",
65
+ ...opts.headers
66
+ }
67
+ });
68
+ return new import_client_fetch.OAuth2Api(config);
69
+ }
48
70
  // Annotate the CommonJS export names for ESM import in node:
49
71
  0 && (module.exports = {
50
- frontendClient
72
+ frontendClient,
73
+ oauth2Client
51
74
  });
52
75
  //# sourceMappingURL=frontendClient.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAIO;AACP,oBAAiD;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAjBF;AAkBE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,gCAAY,MAAM;AAC/B;","names":[]}
1
+ {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n OAuth2Api,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n\nexport function oauth2Client(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new OAuth2Api(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAKO;AACP,oBAAiD;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAlBF;AAmBE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,gCAAY,MAAM;AAC/B;AAEO,SAAS,aACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AA5CF;AA6CE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,8BAAU,MAAM;AAC7B;","names":[]}
@@ -1,7 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  Configuration,
4
- FrontendApi
4
+ FrontendApi,
5
+ OAuth2Api
5
6
  } from "@ory/client-fetch";
6
7
  import { guessPotentiallyProxiedOrySdkUrl } from "./config";
7
8
  function frontendClient({
@@ -25,7 +26,29 @@ function frontendClient({
25
26
  });
26
27
  return new FrontendApi(config);
27
28
  }
29
+ function oauth2Client({
30
+ forceBaseUrl,
31
+ ...opts
32
+ } = {
33
+ credentials: "include"
34
+ }) {
35
+ var _a;
36
+ const basePath = forceBaseUrl != null ? forceBaseUrl : guessPotentiallyProxiedOrySdkUrl({
37
+ knownProxiedUrl: window.location.origin
38
+ });
39
+ const config = new Configuration({
40
+ ...opts,
41
+ basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
42
+ credentials: (_a = opts.credentials) != null ? _a : "include",
43
+ headers: {
44
+ Accept: "application/json",
45
+ ...opts.headers
46
+ }
47
+ });
48
+ return new OAuth2Api(config);
49
+ }
28
50
  export {
29
- frontendClient
51
+ frontendClient,
52
+ oauth2Client
30
53
  };
31
54
  //# sourceMappingURL=frontendClient.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,wCAAwC;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAjBF;AAkBE,QAAM,WACJ,sCACA,iCAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,YAAY,MAAM;AAC/B;","names":[]}
1
+ {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n OAuth2Api,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n\nexport function oauth2Client(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new OAuth2Api(config)\n}\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAlBF;AAmBE,QAAM,WACJ,sCACA,iCAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,YAAY,MAAM;AAC/B;AAEO,SAAS,aACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AA5CF;AA6CE,QAAM,WACJ,sCACA,iCAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,UAAU,MAAM;AAC7B;","names":[]}
@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
17
17
  return to;
18
18
  };
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var client_exports = {};
21
- __export(client_exports, {
20
+ var index_exports = {};
21
+ __export(index_exports, {
22
22
  SessionProvider: () => import_session_provider.SessionProvider,
23
23
  useSession: () => import_useSession.useSession
24
24
  });
25
- module.exports = __toCommonJS(client_exports);
25
+ module.exports = __toCommonJS(index_exports);
26
26
  var import_session_provider = require("./session-provider");
27
27
  var import_useSession = require("./useSession");
28
28
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
1
+ import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } 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';
@@ -53,12 +53,18 @@ type OryNodeImageProps = {
53
53
  type FormValues = Record<string, string | boolean | number | undefined>;
54
54
  type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
55
55
  onSubmit: FormEventHandler<HTMLFormElement>;
56
+ "data-testid"?: string;
56
57
  };
57
58
  type OryNodeInputProps = {
58
59
  attributes: UiNodeInputAttributes;
59
60
  node: UiNode;
60
61
  onClick?: MouseEventHandler;
61
62
  };
63
+ type OryNodeConsentScopeCheckboxProps = {
64
+ attributes: UiNodeInputAttributes;
65
+ node: UiNode;
66
+ onCheckedChange: (checked: boolean) => void;
67
+ };
62
68
  type OryFormSectionContentProps = PropsWithChildren<{
63
69
  title?: string;
64
70
  description?: string;
@@ -105,6 +111,8 @@ declare function OryCardContent({ children }: OryCardContentProps): react_jsx_ru
105
111
 
106
112
  declare function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
107
113
 
114
+ declare function OryConsentCard(): react_jsx_runtime.JSX.Element;
115
+
108
116
  /**
109
117
  * Props type for the Form Group Divider component.
110
118
  */
@@ -248,6 +256,10 @@ type OryFlowComponents = {
248
256
  * The Captcha component is rendered whenever a "captcha" group is encountered.
249
257
  */
250
258
  Captcha: ComponentType<OryNodeCaptchaProps>;
259
+ /**
260
+ * Special version of the Input component for scopes in OAuth2 flows.
261
+ */
262
+ ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
251
263
  };
252
264
  Card: {
253
265
  /**
@@ -363,8 +375,9 @@ type DeepPartialTwoLevels<T> = {
363
375
  type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
364
376
  type OryFormProps = PropsWithChildren<{
365
377
  onAfterSubmit?: (method: string | number | boolean | undefined) => void;
378
+ "data-testid"?: string;
366
379
  }>;
367
- declare function OryForm({ children, onAfterSubmit }: OryFormProps): react_jsx_runtime.JSX.Element;
380
+ declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;
368
381
 
369
382
  declare function useComponents(): OryFlowComponents;
370
383
  declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
@@ -414,7 +427,7 @@ type OryClientConfiguration = {
414
427
  *
415
428
  * @see OryClientConfiguration
416
429
  */
417
- type OryFlow<TFlowType, TFlow> = {
430
+ type OryFlow<TFlowType extends FlowType, TFlow> = {
418
431
  flowType: TFlowType;
419
432
  flow: TFlow;
420
433
  config: OryClientConfiguration;
@@ -463,10 +476,23 @@ type SettingsFlowContainer = OryFlow<FlowType.Settings, SettingsFlow>;
463
476
  *
464
477
  */
465
478
  type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
479
+ type ConsentFlow = {
480
+ created_at: Date;
481
+ expires_at: Date;
482
+ id: string;
483
+ issued_at: Date;
484
+ state: "show_form" | "rejected" | "accepted";
485
+ active: string;
486
+ ui: UiContainer;
487
+ consent_request: OAuth2ConsentRequest;
488
+ session: Session;
489
+ return_to?: string;
490
+ };
491
+ type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
466
492
  /**
467
493
  * A union type of all flow containers
468
494
  */
469
- type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
495
+ type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
470
496
 
471
497
  /**
472
498
  * Converts a UiText to a FormattedMessage.
@@ -536,18 +562,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
536
562
  * @param message - the UiText message to generate a test id for
537
563
  * @returns a unique, stable test id for the message
538
564
  */
539
- declare function messageTestId(message: UiText): {
565
+ declare function messageTestId(message: {
566
+ id: number | string;
567
+ }): {
540
568
  "data-testid": string;
541
569
  };
542
570
 
543
- type FormState = {
544
- current: "provide_identifier";
545
- } | {
571
+ type FormStateSelectMethod = {
546
572
  current: "select_method";
547
- } | {
573
+ };
574
+ type FormStateProvideIdentifier = {
575
+ current: "provide_identifier";
576
+ };
577
+ type FormStateMethodActive = {
548
578
  current: "method_active";
549
579
  method: UiNodeGroupEnum;
550
- } | {
580
+ };
581
+ type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
551
582
  current: "success_screen";
552
583
  } | {
553
584
  current: "settings";
@@ -594,4 +625,4 @@ type OryProviderProps = {
594
625
  } & OryFlowContainer & PropsWithChildren;
595
626
  declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
596
627
 
597
- export { 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, 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 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 };
628
+ 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, 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 };