@ory/elements-react 0.0.0-pr.8e964fc1 → 0.0.0-pr.96c07cce
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 +245 -0
- package/DEVELOPMENT.md +19 -4
- package/README.md +253 -4
- package/babel.config.js +10 -0
- package/dist/client/frontendClient.d.mts +5 -2
- package/dist/client/frontendClient.d.ts +5 -2
- package/dist/client/frontendClient.js +25 -2
- package/dist/client/frontendClient.js.map +1 -1
- package/dist/client/frontendClient.mjs +25 -2
- package/dist/client/frontendClient.mjs.map +1 -1
- package/dist/client/index.js +3 -3
- package/dist/index.d.mts +97 -27
- package/dist/index.d.ts +97 -27
- package/dist/index.js +943 -352
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +946 -356
- package/dist/index.mjs.map +1 -1
- package/dist/theme/default/index.css +187 -117
- package/dist/theme/default/index.css.map +1 -1
- package/dist/theme/default/index.d.mts +31 -5
- package/dist/theme/default/index.d.ts +31 -5
- package/dist/theme/default/index.js +4320 -814
- package/dist/theme/default/index.js.map +1 -1
- package/dist/theme/default/index.mjs +4377 -793
- package/dist/theme/default/index.mjs.map +1 -1
- package/package.json +22 -15
- package/tailwind/generated/default-variables.css +1 -1
- package/tsconfig.json +3 -2
|
@@ -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;
|
|
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":[]}
|
package/dist/client/index.js
CHANGED
|
@@ -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
|
|
21
|
-
__export(
|
|
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(
|
|
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, AccountExperienceConfiguration, 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';
|
|
@@ -28,6 +28,9 @@ type OryNodeTextProps = {
|
|
|
28
28
|
node: UiNode;
|
|
29
29
|
};
|
|
30
30
|
type OryCardLogoProps = Record<string, never>;
|
|
31
|
+
type OryNodeCaptchaProps = {
|
|
32
|
+
node: UiNode;
|
|
33
|
+
};
|
|
31
34
|
/**
|
|
32
35
|
* Props for the AuthMethodListItem component. This component is used
|
|
33
36
|
* to render a single auth method in the AuthMethodList component.
|
|
@@ -35,6 +38,10 @@ type OryCardLogoProps = Record<string, never>;
|
|
|
35
38
|
type OryCardAuthMethodListItemProps = {
|
|
36
39
|
onClick: () => void;
|
|
37
40
|
group: string;
|
|
41
|
+
title?: {
|
|
42
|
+
id: string;
|
|
43
|
+
values?: Record<string, string>;
|
|
44
|
+
};
|
|
38
45
|
};
|
|
39
46
|
type OryNodeImageProps = {
|
|
40
47
|
attributes: UiNodeImageAttributes;
|
|
@@ -46,12 +53,18 @@ type OryNodeImageProps = {
|
|
|
46
53
|
type FormValues = Record<string, string | boolean | number | undefined>;
|
|
47
54
|
type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
|
|
48
55
|
onSubmit: FormEventHandler<HTMLFormElement>;
|
|
56
|
+
"data-testid"?: string;
|
|
49
57
|
};
|
|
50
58
|
type OryNodeInputProps = {
|
|
51
59
|
attributes: UiNodeInputAttributes;
|
|
52
60
|
node: UiNode;
|
|
53
61
|
onClick?: MouseEventHandler;
|
|
54
62
|
};
|
|
63
|
+
type OryNodeConsentScopeCheckboxProps = {
|
|
64
|
+
attributes: UiNodeInputAttributes;
|
|
65
|
+
node: UiNode;
|
|
66
|
+
onCheckedChange: (checked: boolean) => void;
|
|
67
|
+
};
|
|
55
68
|
type OryFormSectionContentProps = PropsWithChildren<{
|
|
56
69
|
title?: string;
|
|
57
70
|
description?: string;
|
|
@@ -98,6 +111,8 @@ declare function OryCardContent({ children }: OryCardContentProps): react_jsx_ru
|
|
|
98
111
|
|
|
99
112
|
declare function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
|
|
100
113
|
|
|
114
|
+
declare function OryConsentCard(): react_jsx_runtime.JSX.Element;
|
|
115
|
+
|
|
101
116
|
/**
|
|
102
117
|
* Props type for the Form Group Divider component.
|
|
103
118
|
*/
|
|
@@ -237,6 +252,14 @@ type OryFlowComponents = {
|
|
|
237
252
|
* The Text component is rendered whenever a "text" node is encountered.
|
|
238
253
|
*/
|
|
239
254
|
Text: ComponentType<OryNodeTextProps>;
|
|
255
|
+
/**
|
|
256
|
+
* The Captcha component is rendered whenever a "captcha" group is encountered.
|
|
257
|
+
*/
|
|
258
|
+
Captcha: ComponentType<OryNodeCaptchaProps>;
|
|
259
|
+
/**
|
|
260
|
+
* Special version of the Input component for scopes in OAuth2 flows.
|
|
261
|
+
*/
|
|
262
|
+
ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
|
|
240
263
|
};
|
|
241
264
|
Card: {
|
|
242
265
|
/**
|
|
@@ -352,8 +375,9 @@ type DeepPartialTwoLevels<T> = {
|
|
|
352
375
|
type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
|
|
353
376
|
type OryFormProps = PropsWithChildren<{
|
|
354
377
|
onAfterSubmit?: (method: string | number | boolean | undefined) => void;
|
|
378
|
+
"data-testid"?: string;
|
|
355
379
|
}>;
|
|
356
|
-
declare function OryForm({ children, onAfterSubmit }: OryFormProps):
|
|
380
|
+
declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;
|
|
357
381
|
|
|
358
382
|
declare function useComponents(): OryFlowComponents;
|
|
359
383
|
declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
|
|
@@ -370,39 +394,67 @@ type IntlContextProps = {
|
|
|
370
394
|
};
|
|
371
395
|
|
|
372
396
|
type IntlConfig = IntlContextProps;
|
|
397
|
+
/**
|
|
398
|
+
* The configuration for Ory Elements.
|
|
399
|
+
*
|
|
400
|
+
* This configuration is used to customize the behavior and appearance of Ory Elements.
|
|
401
|
+
*
|
|
402
|
+
* By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
|
|
403
|
+
*
|
|
404
|
+
* You can also set the name of the application, the logo URL, and the SDK configuration.
|
|
405
|
+
* By default, the name and logo are displayed in the card's header.
|
|
406
|
+
*/
|
|
373
407
|
type OryClientConfiguration = {
|
|
374
|
-
/**
|
|
375
|
-
* The name of the application the user is logging in to.
|
|
376
|
-
*/
|
|
377
|
-
name: string;
|
|
378
408
|
/**
|
|
379
409
|
* An optional logo URL to display in the UI instead of the name.
|
|
410
|
+
* @deprecated Use `project.logo_light_url` instead.
|
|
380
411
|
*/
|
|
381
412
|
logoUrl?: string;
|
|
382
|
-
|
|
383
|
-
|
|
413
|
+
/**
|
|
414
|
+
* The SDK configuration.
|
|
415
|
+
* This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
|
|
416
|
+
*/
|
|
384
417
|
sdk: {
|
|
385
418
|
url: string;
|
|
386
419
|
options?: Partial<ConfigurationParameters>;
|
|
387
420
|
};
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
verification_ui_url: string;
|
|
395
|
-
login_ui_url: string;
|
|
396
|
-
};
|
|
421
|
+
/**
|
|
422
|
+
* The internationalization configuration.
|
|
423
|
+
* This configuration is used to set the locale and any additional options used for the i18n library.
|
|
424
|
+
* The locale is used to determine the language of the UI.
|
|
425
|
+
* The default locale is "en".
|
|
426
|
+
*/
|
|
397
427
|
intl?: IntlConfig;
|
|
398
|
-
}
|
|
428
|
+
} & ({
|
|
429
|
+
/**
|
|
430
|
+
* The name of the application the user is logging in to.
|
|
431
|
+
* @deprecated Use `project.name` instead.
|
|
432
|
+
*/
|
|
433
|
+
name: string;
|
|
434
|
+
/**
|
|
435
|
+
* The configuration for the project.
|
|
436
|
+
*/
|
|
437
|
+
project: Omit<AccountExperienceConfiguration, "name"> & {
|
|
438
|
+
name?: string;
|
|
439
|
+
};
|
|
440
|
+
} | {
|
|
441
|
+
/**
|
|
442
|
+
* The name of the application the user is logging in to.
|
|
443
|
+
* @deprecated Use `project.name` instead.
|
|
444
|
+
*/
|
|
445
|
+
name?: string;
|
|
446
|
+
/**
|
|
447
|
+
* The configuration for the project.
|
|
448
|
+
*/
|
|
449
|
+
project: AccountExperienceConfiguration;
|
|
450
|
+
});
|
|
399
451
|
|
|
400
452
|
/**
|
|
401
453
|
* A generic flow container, containing a flowType, the flow itself and the config object
|
|
402
454
|
*
|
|
403
455
|
* @see OryClientConfiguration
|
|
404
456
|
*/
|
|
405
|
-
type OryFlow<TFlowType, TFlow> = {
|
|
457
|
+
type OryFlow<TFlowType extends FlowType, TFlow> = {
|
|
406
458
|
flowType: TFlowType;
|
|
407
459
|
flow: TFlow;
|
|
408
460
|
config: OryClientConfiguration;
|
|
@@ -451,10 +503,23 @@ type SettingsFlowContainer = OryFlow<FlowType.Settings, SettingsFlow>;
|
|
|
451
503
|
*
|
|
452
504
|
*/
|
|
453
505
|
type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
|
|
506
|
+
type ConsentFlow = {
|
|
507
|
+
created_at: Date;
|
|
508
|
+
expires_at: Date;
|
|
509
|
+
id: string;
|
|
510
|
+
issued_at: Date;
|
|
511
|
+
state: "show_form" | "rejected" | "accepted";
|
|
512
|
+
active: string;
|
|
513
|
+
ui: UiContainer;
|
|
514
|
+
consent_request: OAuth2ConsentRequest;
|
|
515
|
+
session: Session;
|
|
516
|
+
return_to?: string;
|
|
517
|
+
};
|
|
518
|
+
type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
|
|
454
519
|
/**
|
|
455
520
|
* A union type of all flow containers
|
|
456
521
|
*/
|
|
457
|
-
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
|
|
522
|
+
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
|
|
458
523
|
|
|
459
524
|
/**
|
|
460
525
|
* Converts a UiText to a FormattedMessage.
|
|
@@ -524,18 +589,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
|
|
|
524
589
|
* @param message - the UiText message to generate a test id for
|
|
525
590
|
* @returns a unique, stable test id for the message
|
|
526
591
|
*/
|
|
527
|
-
declare function messageTestId(message:
|
|
592
|
+
declare function messageTestId(message: {
|
|
593
|
+
id: number | string;
|
|
594
|
+
}): {
|
|
528
595
|
"data-testid": string;
|
|
529
596
|
};
|
|
530
597
|
|
|
531
|
-
type
|
|
532
|
-
current: "provide_identifier";
|
|
533
|
-
} | {
|
|
598
|
+
type FormStateSelectMethod = {
|
|
534
599
|
current: "select_method";
|
|
535
|
-
}
|
|
600
|
+
};
|
|
601
|
+
type FormStateProvideIdentifier = {
|
|
602
|
+
current: "provide_identifier";
|
|
603
|
+
};
|
|
604
|
+
type FormStateMethodActive = {
|
|
536
605
|
current: "method_active";
|
|
537
606
|
method: UiNodeGroupEnum;
|
|
538
|
-
}
|
|
607
|
+
};
|
|
608
|
+
type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
|
|
539
609
|
current: "success_screen";
|
|
540
610
|
} | {
|
|
541
611
|
current: "settings";
|
|
@@ -582,4 +652,4 @@ type OryProviderProps = {
|
|
|
582
652
|
} & OryFlowContainer & PropsWithChildren;
|
|
583
653
|
declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
|
|
584
654
|
|
|
585
|
-
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 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 };
|
|
655
|
+
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 };
|
package/dist/index.d.ts
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, AccountExperienceConfiguration, 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';
|
|
@@ -28,6 +28,9 @@ type OryNodeTextProps = {
|
|
|
28
28
|
node: UiNode;
|
|
29
29
|
};
|
|
30
30
|
type OryCardLogoProps = Record<string, never>;
|
|
31
|
+
type OryNodeCaptchaProps = {
|
|
32
|
+
node: UiNode;
|
|
33
|
+
};
|
|
31
34
|
/**
|
|
32
35
|
* Props for the AuthMethodListItem component. This component is used
|
|
33
36
|
* to render a single auth method in the AuthMethodList component.
|
|
@@ -35,6 +38,10 @@ type OryCardLogoProps = Record<string, never>;
|
|
|
35
38
|
type OryCardAuthMethodListItemProps = {
|
|
36
39
|
onClick: () => void;
|
|
37
40
|
group: string;
|
|
41
|
+
title?: {
|
|
42
|
+
id: string;
|
|
43
|
+
values?: Record<string, string>;
|
|
44
|
+
};
|
|
38
45
|
};
|
|
39
46
|
type OryNodeImageProps = {
|
|
40
47
|
attributes: UiNodeImageAttributes;
|
|
@@ -46,12 +53,18 @@ type OryNodeImageProps = {
|
|
|
46
53
|
type FormValues = Record<string, string | boolean | number | undefined>;
|
|
47
54
|
type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
|
|
48
55
|
onSubmit: FormEventHandler<HTMLFormElement>;
|
|
56
|
+
"data-testid"?: string;
|
|
49
57
|
};
|
|
50
58
|
type OryNodeInputProps = {
|
|
51
59
|
attributes: UiNodeInputAttributes;
|
|
52
60
|
node: UiNode;
|
|
53
61
|
onClick?: MouseEventHandler;
|
|
54
62
|
};
|
|
63
|
+
type OryNodeConsentScopeCheckboxProps = {
|
|
64
|
+
attributes: UiNodeInputAttributes;
|
|
65
|
+
node: UiNode;
|
|
66
|
+
onCheckedChange: (checked: boolean) => void;
|
|
67
|
+
};
|
|
55
68
|
type OryFormSectionContentProps = PropsWithChildren<{
|
|
56
69
|
title?: string;
|
|
57
70
|
description?: string;
|
|
@@ -98,6 +111,8 @@ declare function OryCardContent({ children }: OryCardContentProps): react_jsx_ru
|
|
|
98
111
|
|
|
99
112
|
declare function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
|
|
100
113
|
|
|
114
|
+
declare function OryConsentCard(): react_jsx_runtime.JSX.Element;
|
|
115
|
+
|
|
101
116
|
/**
|
|
102
117
|
* Props type for the Form Group Divider component.
|
|
103
118
|
*/
|
|
@@ -237,6 +252,14 @@ type OryFlowComponents = {
|
|
|
237
252
|
* The Text component is rendered whenever a "text" node is encountered.
|
|
238
253
|
*/
|
|
239
254
|
Text: ComponentType<OryNodeTextProps>;
|
|
255
|
+
/**
|
|
256
|
+
* The Captcha component is rendered whenever a "captcha" group is encountered.
|
|
257
|
+
*/
|
|
258
|
+
Captcha: ComponentType<OryNodeCaptchaProps>;
|
|
259
|
+
/**
|
|
260
|
+
* Special version of the Input component for scopes in OAuth2 flows.
|
|
261
|
+
*/
|
|
262
|
+
ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
|
|
240
263
|
};
|
|
241
264
|
Card: {
|
|
242
265
|
/**
|
|
@@ -352,8 +375,9 @@ type DeepPartialTwoLevels<T> = {
|
|
|
352
375
|
type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
|
|
353
376
|
type OryFormProps = PropsWithChildren<{
|
|
354
377
|
onAfterSubmit?: (method: string | number | boolean | undefined) => void;
|
|
378
|
+
"data-testid"?: string;
|
|
355
379
|
}>;
|
|
356
|
-
declare function OryForm({ children, onAfterSubmit }: OryFormProps):
|
|
380
|
+
declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;
|
|
357
381
|
|
|
358
382
|
declare function useComponents(): OryFlowComponents;
|
|
359
383
|
declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
|
|
@@ -370,39 +394,67 @@ type IntlContextProps = {
|
|
|
370
394
|
};
|
|
371
395
|
|
|
372
396
|
type IntlConfig = IntlContextProps;
|
|
397
|
+
/**
|
|
398
|
+
* The configuration for Ory Elements.
|
|
399
|
+
*
|
|
400
|
+
* This configuration is used to customize the behavior and appearance of Ory Elements.
|
|
401
|
+
*
|
|
402
|
+
* By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
|
|
403
|
+
*
|
|
404
|
+
* You can also set the name of the application, the logo URL, and the SDK configuration.
|
|
405
|
+
* By default, the name and logo are displayed in the card's header.
|
|
406
|
+
*/
|
|
373
407
|
type OryClientConfiguration = {
|
|
374
|
-
/**
|
|
375
|
-
* The name of the application the user is logging in to.
|
|
376
|
-
*/
|
|
377
|
-
name: string;
|
|
378
408
|
/**
|
|
379
409
|
* An optional logo URL to display in the UI instead of the name.
|
|
410
|
+
* @deprecated Use `project.logo_light_url` instead.
|
|
380
411
|
*/
|
|
381
412
|
logoUrl?: string;
|
|
382
|
-
|
|
383
|
-
|
|
413
|
+
/**
|
|
414
|
+
* The SDK configuration.
|
|
415
|
+
* This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
|
|
416
|
+
*/
|
|
384
417
|
sdk: {
|
|
385
418
|
url: string;
|
|
386
419
|
options?: Partial<ConfigurationParameters>;
|
|
387
420
|
};
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
verification_ui_url: string;
|
|
395
|
-
login_ui_url: string;
|
|
396
|
-
};
|
|
421
|
+
/**
|
|
422
|
+
* The internationalization configuration.
|
|
423
|
+
* This configuration is used to set the locale and any additional options used for the i18n library.
|
|
424
|
+
* The locale is used to determine the language of the UI.
|
|
425
|
+
* The default locale is "en".
|
|
426
|
+
*/
|
|
397
427
|
intl?: IntlConfig;
|
|
398
|
-
}
|
|
428
|
+
} & ({
|
|
429
|
+
/**
|
|
430
|
+
* The name of the application the user is logging in to.
|
|
431
|
+
* @deprecated Use `project.name` instead.
|
|
432
|
+
*/
|
|
433
|
+
name: string;
|
|
434
|
+
/**
|
|
435
|
+
* The configuration for the project.
|
|
436
|
+
*/
|
|
437
|
+
project: Omit<AccountExperienceConfiguration, "name"> & {
|
|
438
|
+
name?: string;
|
|
439
|
+
};
|
|
440
|
+
} | {
|
|
441
|
+
/**
|
|
442
|
+
* The name of the application the user is logging in to.
|
|
443
|
+
* @deprecated Use `project.name` instead.
|
|
444
|
+
*/
|
|
445
|
+
name?: string;
|
|
446
|
+
/**
|
|
447
|
+
* The configuration for the project.
|
|
448
|
+
*/
|
|
449
|
+
project: AccountExperienceConfiguration;
|
|
450
|
+
});
|
|
399
451
|
|
|
400
452
|
/**
|
|
401
453
|
* A generic flow container, containing a flowType, the flow itself and the config object
|
|
402
454
|
*
|
|
403
455
|
* @see OryClientConfiguration
|
|
404
456
|
*/
|
|
405
|
-
type OryFlow<TFlowType, TFlow> = {
|
|
457
|
+
type OryFlow<TFlowType extends FlowType, TFlow> = {
|
|
406
458
|
flowType: TFlowType;
|
|
407
459
|
flow: TFlow;
|
|
408
460
|
config: OryClientConfiguration;
|
|
@@ -451,10 +503,23 @@ type SettingsFlowContainer = OryFlow<FlowType.Settings, SettingsFlow>;
|
|
|
451
503
|
*
|
|
452
504
|
*/
|
|
453
505
|
type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
|
|
506
|
+
type ConsentFlow = {
|
|
507
|
+
created_at: Date;
|
|
508
|
+
expires_at: Date;
|
|
509
|
+
id: string;
|
|
510
|
+
issued_at: Date;
|
|
511
|
+
state: "show_form" | "rejected" | "accepted";
|
|
512
|
+
active: string;
|
|
513
|
+
ui: UiContainer;
|
|
514
|
+
consent_request: OAuth2ConsentRequest;
|
|
515
|
+
session: Session;
|
|
516
|
+
return_to?: string;
|
|
517
|
+
};
|
|
518
|
+
type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
|
|
454
519
|
/**
|
|
455
520
|
* A union type of all flow containers
|
|
456
521
|
*/
|
|
457
|
-
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
|
|
522
|
+
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
|
|
458
523
|
|
|
459
524
|
/**
|
|
460
525
|
* Converts a UiText to a FormattedMessage.
|
|
@@ -524,18 +589,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
|
|
|
524
589
|
* @param message - the UiText message to generate a test id for
|
|
525
590
|
* @returns a unique, stable test id for the message
|
|
526
591
|
*/
|
|
527
|
-
declare function messageTestId(message:
|
|
592
|
+
declare function messageTestId(message: {
|
|
593
|
+
id: number | string;
|
|
594
|
+
}): {
|
|
528
595
|
"data-testid": string;
|
|
529
596
|
};
|
|
530
597
|
|
|
531
|
-
type
|
|
532
|
-
current: "provide_identifier";
|
|
533
|
-
} | {
|
|
598
|
+
type FormStateSelectMethod = {
|
|
534
599
|
current: "select_method";
|
|
535
|
-
}
|
|
600
|
+
};
|
|
601
|
+
type FormStateProvideIdentifier = {
|
|
602
|
+
current: "provide_identifier";
|
|
603
|
+
};
|
|
604
|
+
type FormStateMethodActive = {
|
|
536
605
|
current: "method_active";
|
|
537
606
|
method: UiNodeGroupEnum;
|
|
538
|
-
}
|
|
607
|
+
};
|
|
608
|
+
type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
|
|
539
609
|
current: "success_screen";
|
|
540
610
|
} | {
|
|
541
611
|
current: "settings";
|
|
@@ -582,4 +652,4 @@ type OryProviderProps = {
|
|
|
582
652
|
} & OryFlowContainer & PropsWithChildren;
|
|
583
653
|
declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
|
|
584
654
|
|
|
585
|
-
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 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 };
|
|
655
|
+
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 };
|