@ory/elements-react 1.0.0-rc.2 → 1.0.0-rc.4
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 +30 -0
- package/dist/index.d.mts +73 -69
- package/dist/index.d.ts +73 -69
- package/dist/index.js +332 -120
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +330 -120
- package/dist/index.mjs.map +1 -1
- package/dist/theme/default/index.js +882 -774
- package/dist/theme/default/index.js.map +1 -1
- package/dist/theme/default/index.mjs +709 -594
- package/dist/theme/default/index.mjs.map +1 -1
- package/package.json +6 -6
- package/tsconfig.json +1 -1
package/dist/index.js
CHANGED
|
@@ -322,9 +322,7 @@ function parseStateFromFlow(flow) {
|
|
|
322
322
|
return { current: "method_active", method: "code" };
|
|
323
323
|
} else if (methodWithMessage) {
|
|
324
324
|
return { current: "method_active", method: methodWithMessage.group };
|
|
325
|
-
} else if (flow.flow.active && !["default", "identifier_first"
|
|
326
|
-
flow.flow.active
|
|
327
|
-
)) {
|
|
325
|
+
} else if (flow.flow.active && !["default", "identifier_first"].includes(flow.flow.active)) {
|
|
328
326
|
return { current: "method_active", method: flow.flow.active };
|
|
329
327
|
} else if (isChoosingMethod(flow)) {
|
|
330
328
|
const authMethods = nodesToAuthMethodGroups(flow.flow.ui.nodes);
|
|
@@ -362,14 +360,20 @@ function useFormStateReducer(flow) {
|
|
|
362
360
|
const formStateReducer = (state, action2) => {
|
|
363
361
|
switch (action2.type) {
|
|
364
362
|
case "action_flow_update": {
|
|
365
|
-
if (selectedMethod)
|
|
363
|
+
if (selectedMethod) {
|
|
366
364
|
return { current: "method_active", method: selectedMethod };
|
|
365
|
+
}
|
|
367
366
|
return parseStateFromFlow(action2.flow);
|
|
368
367
|
}
|
|
369
368
|
case "action_select_method": {
|
|
370
369
|
setSelectedMethod(action2.method);
|
|
371
370
|
return { current: "method_active", method: action2.method };
|
|
372
371
|
}
|
|
372
|
+
case "action_clear_active_method": {
|
|
373
|
+
return {
|
|
374
|
+
current: "select_method"
|
|
375
|
+
};
|
|
376
|
+
}
|
|
373
377
|
}
|
|
374
378
|
return state;
|
|
375
379
|
};
|
|
@@ -408,6 +412,110 @@ function OryFlowProvider({
|
|
|
408
412
|
}
|
|
409
413
|
);
|
|
410
414
|
}
|
|
415
|
+
|
|
416
|
+
// src/client/config.ts
|
|
417
|
+
function isProduction() {
|
|
418
|
+
var _a, _b;
|
|
419
|
+
return ["production", "prod"].indexOf(
|
|
420
|
+
(_b = (_a = process.env.VERCEL_ENV) != null ? _a : process.env.NODE_ENV) != null ? _b : ""
|
|
421
|
+
) > -1;
|
|
422
|
+
}
|
|
423
|
+
function frontendClient(sdkUrl, opts = {}) {
|
|
424
|
+
const config = new clientFetch.Configuration({
|
|
425
|
+
...opts,
|
|
426
|
+
basePath: sdkUrl,
|
|
427
|
+
credentials: "include",
|
|
428
|
+
headers: {
|
|
429
|
+
Accept: "application/json",
|
|
430
|
+
...opts.headers
|
|
431
|
+
}
|
|
432
|
+
});
|
|
433
|
+
return new clientFetch.FrontendApi(config);
|
|
434
|
+
}
|
|
435
|
+
var defaultProject = {
|
|
436
|
+
name: "Ory",
|
|
437
|
+
registration_enabled: true,
|
|
438
|
+
verification_enabled: true,
|
|
439
|
+
recovery_enabled: true,
|
|
440
|
+
recovery_ui_url: "/ui/recovery",
|
|
441
|
+
registration_ui_url: "/ui/registration",
|
|
442
|
+
verification_ui_url: "/ui/verification",
|
|
443
|
+
login_ui_url: "/ui/login",
|
|
444
|
+
settings_ui_url: "/ui/settings",
|
|
445
|
+
default_redirect_url: "/ui/welcome",
|
|
446
|
+
error_ui_url: "/ui/error",
|
|
447
|
+
default_locale: "en",
|
|
448
|
+
locale_behavior: "force_default"
|
|
449
|
+
};
|
|
450
|
+
function useOryConfiguration() {
|
|
451
|
+
const configCtx = react.useContext(OryConfigurationContext);
|
|
452
|
+
return {
|
|
453
|
+
sdk: {
|
|
454
|
+
...configCtx.sdk,
|
|
455
|
+
frontend: frontendClient(configCtx.sdk.url, configCtx.sdk.options)
|
|
456
|
+
},
|
|
457
|
+
project: {
|
|
458
|
+
...configCtx.project
|
|
459
|
+
}
|
|
460
|
+
};
|
|
461
|
+
}
|
|
462
|
+
var OryConfigurationContext = react.createContext({
|
|
463
|
+
sdk: computeSdkConfig({}),
|
|
464
|
+
project: defaultProject
|
|
465
|
+
});
|
|
466
|
+
function OryConfigurationProvider({
|
|
467
|
+
children,
|
|
468
|
+
sdk: initialConfig,
|
|
469
|
+
project
|
|
470
|
+
}) {
|
|
471
|
+
const configRef = react.useRef({
|
|
472
|
+
sdk: computeSdkConfig(initialConfig),
|
|
473
|
+
project: {
|
|
474
|
+
...defaultProject,
|
|
475
|
+
...project
|
|
476
|
+
}
|
|
477
|
+
});
|
|
478
|
+
return /* @__PURE__ */ jsxRuntime.jsx(OryConfigurationContext.Provider, { value: configRef.current, children });
|
|
479
|
+
}
|
|
480
|
+
function computeSdkConfig(config) {
|
|
481
|
+
if ((config == null ? void 0 : config.url) && typeof config.url === "string") {
|
|
482
|
+
console.debug("Using sdk url from config");
|
|
483
|
+
return {
|
|
484
|
+
url: config.url.replace(/\/$/, ""),
|
|
485
|
+
options: config.options || {}
|
|
486
|
+
};
|
|
487
|
+
}
|
|
488
|
+
return {
|
|
489
|
+
url: getSDKUrl(),
|
|
490
|
+
options: (config == null ? void 0 : config.options) || {}
|
|
491
|
+
};
|
|
492
|
+
}
|
|
493
|
+
function getSDKUrl() {
|
|
494
|
+
var _a;
|
|
495
|
+
if (typeof process !== "undefined" && process.versions && process.versions.node) {
|
|
496
|
+
if (isProduction()) {
|
|
497
|
+
const sdkUrl = (_a = process.env["NEXT_PUBLIC_ORY_SDK_URL"]) != null ? _a : process.env["ORY_SDK_URL"];
|
|
498
|
+
if (!sdkUrl) {
|
|
499
|
+
throw new Error(
|
|
500
|
+
"Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL in production environments."
|
|
501
|
+
);
|
|
502
|
+
}
|
|
503
|
+
return sdkUrl.replace(/\/$/, "");
|
|
504
|
+
} else {
|
|
505
|
+
if (process.env["__NEXT_PRIVATE_ORIGIN"]) {
|
|
506
|
+
return process.env["__NEXT_PRIVATE_ORIGIN"].replace(/\/$/, "");
|
|
507
|
+
} else if (process.env["VERCEL_URL"]) {
|
|
508
|
+
return `https://${process.env["VERCEL_URL"]}`.replace(/\/$/, "");
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
if (typeof window !== "undefined") {
|
|
513
|
+
return window.location.origin;
|
|
514
|
+
}
|
|
515
|
+
throw new Error(
|
|
516
|
+
"Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL or supply the sdk.url parameter in the Ory configuration."
|
|
517
|
+
);
|
|
518
|
+
}
|
|
411
519
|
function mergeTranslations(customTranslations) {
|
|
412
520
|
return Object.keys(customTranslations).reduce((acc, key) => {
|
|
413
521
|
acc[key] = { ...OryLocales[key], ...customTranslations[key] };
|
|
@@ -437,17 +545,18 @@ var IntlProvider = ({
|
|
|
437
545
|
function OryProvider({
|
|
438
546
|
children,
|
|
439
547
|
components: Components,
|
|
548
|
+
config,
|
|
440
549
|
...oryFlowProps
|
|
441
550
|
}) {
|
|
442
551
|
var _a, _b, _c;
|
|
443
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
552
|
+
return /* @__PURE__ */ jsxRuntime.jsx(OryConfigurationProvider, { sdk: config.sdk, project: config.project, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
444
553
|
IntlProvider,
|
|
445
554
|
{
|
|
446
|
-
locale: (_b = (_a =
|
|
447
|
-
customTranslations: (_c =
|
|
555
|
+
locale: (_b = (_a = config.intl) == null ? void 0 : _a.locale) != null ? _b : "en",
|
|
556
|
+
customTranslations: (_c = config.intl) == null ? void 0 : _c.customTranslations,
|
|
448
557
|
children: /* @__PURE__ */ jsxRuntime.jsx(OryFlowProvider, { ...oryFlowProps, children: /* @__PURE__ */ jsxRuntime.jsx(OryComponentProvider, { components: Components, children }) })
|
|
449
558
|
}
|
|
450
|
-
);
|
|
559
|
+
) });
|
|
451
560
|
}
|
|
452
561
|
function OryCardHeader() {
|
|
453
562
|
const { Card } = useComponents();
|
|
@@ -566,18 +675,6 @@ function OryCardContent({ children }) {
|
|
|
566
675
|
const { Card } = useComponents();
|
|
567
676
|
return /* @__PURE__ */ jsxRuntime.jsx(Card.Content, { children });
|
|
568
677
|
}
|
|
569
|
-
function frontendClient(sdkUrl, opts = {}) {
|
|
570
|
-
const config = new clientFetch.Configuration({
|
|
571
|
-
...opts,
|
|
572
|
-
basePath: sdkUrl,
|
|
573
|
-
credentials: "include",
|
|
574
|
-
headers: {
|
|
575
|
-
Accept: "application/json",
|
|
576
|
-
...opts.headers
|
|
577
|
-
}
|
|
578
|
-
});
|
|
579
|
-
return new clientFetch.FrontendApi(config);
|
|
580
|
-
}
|
|
581
678
|
|
|
582
679
|
// src/util/internal.ts
|
|
583
680
|
function replaceWindowFlowId(flow) {
|
|
@@ -585,9 +682,137 @@ function replaceWindowFlowId(flow) {
|
|
|
585
682
|
url.searchParams.set("flow", flow);
|
|
586
683
|
window.location.href = url.toString();
|
|
587
684
|
}
|
|
685
|
+
function isGenericErrorResponse(response) {
|
|
686
|
+
return typeof response === "object" && !!response && "error" in response && typeof response.error === "object" && !!response.error && "id" in response.error;
|
|
687
|
+
}
|
|
688
|
+
function isNeedsPrivilegedSessionError(response) {
|
|
689
|
+
return isGenericErrorResponse(response) && response.error.id === "session_refresh_required";
|
|
690
|
+
}
|
|
691
|
+
function isSelfServiceFlowExpiredError(response) {
|
|
692
|
+
return isGenericErrorResponse(response) && response.error.id === "self_service_flow_expired";
|
|
693
|
+
}
|
|
694
|
+
function isBrowserLocationChangeRequired(response) {
|
|
695
|
+
return isGenericErrorResponse(response) && isGenericErrorResponse(response) && response.error.id === "browser_location_change_required";
|
|
696
|
+
}
|
|
697
|
+
function isAddressNotVerified(response) {
|
|
698
|
+
return isGenericErrorResponse(response) && response.error.id === "session_verified_address_required";
|
|
699
|
+
}
|
|
700
|
+
function isCsrfError(response) {
|
|
701
|
+
return isGenericErrorResponse(response) && response.error.id === "security_csrf_violation";
|
|
702
|
+
}
|
|
703
|
+
var isResponseError = (err) => {
|
|
704
|
+
if (err instanceof clientFetch.ResponseError) {
|
|
705
|
+
return true;
|
|
706
|
+
}
|
|
707
|
+
return typeof err === "object" && !!err && "name" in err && err.name === "ResponseError";
|
|
708
|
+
};
|
|
709
|
+
var isFetchError = (err) => {
|
|
710
|
+
return err instanceof clientFetch.FetchError;
|
|
711
|
+
};
|
|
712
|
+
|
|
713
|
+
// src/util/sdk-helpers/urlHelpers.ts
|
|
714
|
+
var verificationUrl = (config) => config.sdk.url + "/self-service/verification/browser";
|
|
715
|
+
var handleFlowError = (opts) => async (err) => {
|
|
716
|
+
var _a;
|
|
717
|
+
if (!isResponseError(err)) {
|
|
718
|
+
if (isFetchError(err)) {
|
|
719
|
+
throw new clientFetch.FetchError(
|
|
720
|
+
err,
|
|
721
|
+
"Unable to call the API endpoint. Ensure that CORS is set up correctly and that you have provided a valid SDK URL to Ory Elements."
|
|
722
|
+
);
|
|
723
|
+
}
|
|
724
|
+
throw err;
|
|
725
|
+
}
|
|
726
|
+
const contentType = err.response.headers.get("content-type") || "";
|
|
727
|
+
if (contentType.includes("application/json")) {
|
|
728
|
+
const body = await toBody(err.response);
|
|
729
|
+
if (isSelfServiceFlowExpiredError(body)) {
|
|
730
|
+
opts.onRestartFlow(body.use_flow_id);
|
|
731
|
+
return;
|
|
732
|
+
} else if (isAddressNotVerified(body)) {
|
|
733
|
+
for (const continueWith of ((_a = body.error.details) == null ? void 0 : _a.continue_with) || []) {
|
|
734
|
+
if (continueWith.action === "show_verification_ui" && continueWith.flow.url) {
|
|
735
|
+
opts.onRedirect(continueWith.flow.url, true);
|
|
736
|
+
return;
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
opts.onRedirect(verificationUrl(opts.config), true);
|
|
740
|
+
return;
|
|
741
|
+
} else if (isBrowserLocationChangeRequired(body) && body.redirect_browser_to) {
|
|
742
|
+
opts.onRedirect(body.redirect_browser_to, true);
|
|
743
|
+
return;
|
|
744
|
+
} else if (isNeedsPrivilegedSessionError(body) && body.redirect_browser_to) {
|
|
745
|
+
opts.onRedirect(body.redirect_browser_to, true);
|
|
746
|
+
return;
|
|
747
|
+
} else if (isCsrfError(body)) {
|
|
748
|
+
opts.onRestartFlow();
|
|
749
|
+
return;
|
|
750
|
+
}
|
|
751
|
+
switch (err.response.status) {
|
|
752
|
+
case 404:
|
|
753
|
+
opts.onRestartFlow();
|
|
754
|
+
return;
|
|
755
|
+
case 410:
|
|
756
|
+
opts.onRestartFlow();
|
|
757
|
+
return;
|
|
758
|
+
case 400:
|
|
759
|
+
return opts.onValidationError(
|
|
760
|
+
await err.response.json()
|
|
761
|
+
);
|
|
762
|
+
case 403:
|
|
763
|
+
opts.onRestartFlow();
|
|
764
|
+
return;
|
|
765
|
+
case 422: {
|
|
766
|
+
throw new clientFetch.ResponseError(
|
|
767
|
+
err.response,
|
|
768
|
+
"The API returned an error code indicating a required redirect, but the SDK is outdated and does not know how to handle the action. Received response: " + await err.response.json()
|
|
769
|
+
);
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
throw new clientFetch.ResponseError(
|
|
773
|
+
err.response,
|
|
774
|
+
"The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information. Received response: " + await err.response.json()
|
|
775
|
+
);
|
|
776
|
+
} else if (
|
|
777
|
+
// Not a JSON response? If it's a text response we will return an error informing the user that the response is not JSON.
|
|
778
|
+
contentType.includes("text/") || contentType.includes("html") || contentType.includes("xml")
|
|
779
|
+
) {
|
|
780
|
+
await logResponseError(err.response, true);
|
|
781
|
+
throw new clientFetch.ResponseError(
|
|
782
|
+
err.response,
|
|
783
|
+
`The Ory API endpoint returned an unexpected HTML or text response. Check your console output for details.`
|
|
784
|
+
);
|
|
785
|
+
}
|
|
786
|
+
await logResponseError(err.response, false);
|
|
787
|
+
throw new clientFetch.ResponseError(
|
|
788
|
+
err.response,
|
|
789
|
+
"The Ory API endpoint returned unexpected content type `" + contentType + "`. Check your console output for details."
|
|
790
|
+
);
|
|
791
|
+
};
|
|
792
|
+
async function toBody(response) {
|
|
793
|
+
try {
|
|
794
|
+
return await response.clone().json();
|
|
795
|
+
} catch (e) {
|
|
796
|
+
await logResponseError(response, true, [e]);
|
|
797
|
+
throw new clientFetch.ResponseError(
|
|
798
|
+
response,
|
|
799
|
+
"Unable to decode API response using JSON."
|
|
800
|
+
);
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
async function logResponseError(response, printBody, wrap) {
|
|
804
|
+
console.error("Unable to decode API response", {
|
|
805
|
+
response: {
|
|
806
|
+
status: response.status,
|
|
807
|
+
headers: Object.fromEntries(response.headers.entries()),
|
|
808
|
+
body: printBody ? await response.clone().text() : void 0
|
|
809
|
+
},
|
|
810
|
+
errors: wrap
|
|
811
|
+
});
|
|
812
|
+
}
|
|
588
813
|
|
|
589
814
|
// src/util/onSubmitLogin.ts
|
|
590
|
-
async function onSubmitLogin({
|
|
815
|
+
async function onSubmitLogin({ flow }, config, {
|
|
591
816
|
setFlowContainer,
|
|
592
817
|
body,
|
|
593
818
|
onRedirect
|
|
@@ -606,7 +831,7 @@ async function onSubmitLogin({ config, flow }, {
|
|
|
606
831
|
window.location.href = // eslint-disable-next-line promise/always-return
|
|
607
832
|
(_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
|
|
608
833
|
}).catch(
|
|
609
|
-
|
|
834
|
+
handleFlowError({
|
|
610
835
|
onRestartFlow: (useFlowId) => {
|
|
611
836
|
if (useFlowId) {
|
|
612
837
|
replaceWindowFlowId(useFlowId);
|
|
@@ -616,27 +841,21 @@ async function onSubmitLogin({ config, flow }, {
|
|
|
616
841
|
},
|
|
617
842
|
onValidationError: (body2) => {
|
|
618
843
|
setFlowContainer({
|
|
619
|
-
config,
|
|
620
844
|
flow: body2,
|
|
621
845
|
flowType: clientFetch.FlowType.Login
|
|
622
846
|
});
|
|
623
847
|
},
|
|
624
|
-
onRedirect
|
|
848
|
+
onRedirect,
|
|
849
|
+
config
|
|
625
850
|
})
|
|
626
851
|
);
|
|
627
852
|
}
|
|
628
|
-
async function onSubmitRecovery({
|
|
853
|
+
async function onSubmitRecovery({ flow }, config, {
|
|
629
854
|
setFlowContainer,
|
|
630
855
|
body,
|
|
631
856
|
onRedirect
|
|
632
857
|
}) {
|
|
633
|
-
|
|
634
|
-
if (!config.sdk.url) {
|
|
635
|
-
throw new Error(
|
|
636
|
-
`Please supply your Ory Network SDK url to the Ory Elements configuration.`
|
|
637
|
-
);
|
|
638
|
-
}
|
|
639
|
-
await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
|
|
858
|
+
await config.sdk.frontend.updateRecoveryFlowRaw({
|
|
640
859
|
flow: flow.id,
|
|
641
860
|
updateRecoveryFlowBody: body
|
|
642
861
|
}).then(async (res) => {
|
|
@@ -649,11 +868,10 @@ async function onSubmitRecovery({ config, flow }, {
|
|
|
649
868
|
}
|
|
650
869
|
setFlowContainer({
|
|
651
870
|
flow: flow2,
|
|
652
|
-
flowType: clientFetch.FlowType.Recovery
|
|
653
|
-
config
|
|
871
|
+
flowType: clientFetch.FlowType.Recovery
|
|
654
872
|
});
|
|
655
873
|
}).catch(
|
|
656
|
-
|
|
874
|
+
handleFlowError({
|
|
657
875
|
onRestartFlow: (useFlowId) => {
|
|
658
876
|
if (useFlowId) {
|
|
659
877
|
replaceWindowFlowId(useFlowId);
|
|
@@ -668,12 +886,12 @@ async function onSubmitRecovery({ config, flow }, {
|
|
|
668
886
|
} else {
|
|
669
887
|
setFlowContainer({
|
|
670
888
|
flow: body2,
|
|
671
|
-
flowType: clientFetch.FlowType.Recovery
|
|
672
|
-
config
|
|
889
|
+
flowType: clientFetch.FlowType.Recovery
|
|
673
890
|
});
|
|
674
891
|
}
|
|
675
892
|
},
|
|
676
|
-
onRedirect
|
|
893
|
+
onRedirect,
|
|
894
|
+
config
|
|
677
895
|
})
|
|
678
896
|
);
|
|
679
897
|
}
|
|
@@ -690,19 +908,12 @@ function handleContinueWithRecoveryUIError(error, config, onRedirect) {
|
|
|
690
908
|
}
|
|
691
909
|
onRedirect(clientFetch.recoveryUrl(config), true);
|
|
692
910
|
}
|
|
693
|
-
async function onSubmitRegistration({
|
|
911
|
+
async function onSubmitRegistration({ flow }, config, {
|
|
694
912
|
setFlowContainer,
|
|
695
913
|
body,
|
|
696
914
|
onRedirect
|
|
697
915
|
}) {
|
|
698
|
-
|
|
699
|
-
if (!config.sdk.url) {
|
|
700
|
-
throw new Error(
|
|
701
|
-
`Please supply your Ory Network SDK url to the Ory Elements configuration.`
|
|
702
|
-
);
|
|
703
|
-
}
|
|
704
|
-
const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
|
|
705
|
-
await client.updateRegistrationFlowRaw({
|
|
916
|
+
await config.sdk.frontend.updateRegistrationFlowRaw({
|
|
706
917
|
flow: flow.id,
|
|
707
918
|
updateRegistrationFlowBody: body
|
|
708
919
|
}).then(async (res) => {
|
|
@@ -715,7 +926,7 @@ async function onSubmitRegistration({ config, flow }, {
|
|
|
715
926
|
}
|
|
716
927
|
onRedirect(clientFetch.registrationUrl(config), true);
|
|
717
928
|
}).catch(
|
|
718
|
-
|
|
929
|
+
handleFlowError({
|
|
719
930
|
onRestartFlow: (useFlowId) => {
|
|
720
931
|
if (useFlowId) {
|
|
721
932
|
replaceWindowFlowId(useFlowId);
|
|
@@ -726,27 +937,20 @@ async function onSubmitRegistration({ config, flow }, {
|
|
|
726
937
|
onValidationError: (body2) => {
|
|
727
938
|
setFlowContainer({
|
|
728
939
|
flow: body2,
|
|
729
|
-
flowType: clientFetch.FlowType.Registration
|
|
730
|
-
config
|
|
940
|
+
flowType: clientFetch.FlowType.Registration
|
|
731
941
|
});
|
|
732
942
|
},
|
|
733
|
-
onRedirect
|
|
943
|
+
onRedirect,
|
|
944
|
+
config
|
|
734
945
|
})
|
|
735
946
|
);
|
|
736
947
|
}
|
|
737
|
-
async function onSubmitSettings({
|
|
948
|
+
async function onSubmitSettings({ flow }, config, {
|
|
738
949
|
setFlowContainer,
|
|
739
950
|
body,
|
|
740
951
|
onRedirect
|
|
741
952
|
}) {
|
|
742
|
-
|
|
743
|
-
if (!config.sdk.url) {
|
|
744
|
-
throw new Error(
|
|
745
|
-
`Please supply your Ory Network SDK url to the Ory Elements configuration.`
|
|
746
|
-
);
|
|
747
|
-
}
|
|
748
|
-
const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
|
|
749
|
-
await client.updateSettingsFlowRaw({
|
|
953
|
+
await config.sdk.frontend.updateSettingsFlowRaw({
|
|
750
954
|
flow: flow.id,
|
|
751
955
|
updateSettingsFlowBody: body
|
|
752
956
|
}).then(async (res) => {
|
|
@@ -759,11 +963,10 @@ async function onSubmitSettings({ config, flow }, {
|
|
|
759
963
|
}
|
|
760
964
|
setFlowContainer({
|
|
761
965
|
flow: body2,
|
|
762
|
-
flowType: clientFetch.FlowType.Settings
|
|
763
|
-
config
|
|
966
|
+
flowType: clientFetch.FlowType.Settings
|
|
764
967
|
});
|
|
765
968
|
}).catch(
|
|
766
|
-
|
|
969
|
+
handleFlowError({
|
|
767
970
|
onRestartFlow: (useFlowId) => {
|
|
768
971
|
if (useFlowId) {
|
|
769
972
|
replaceWindowFlowId(useFlowId);
|
|
@@ -774,11 +977,11 @@ async function onSubmitSettings({ config, flow }, {
|
|
|
774
977
|
onValidationError: (body2) => {
|
|
775
978
|
setFlowContainer({
|
|
776
979
|
flow: body2,
|
|
777
|
-
flowType: clientFetch.FlowType.Settings
|
|
778
|
-
config
|
|
980
|
+
flowType: clientFetch.FlowType.Settings
|
|
779
981
|
});
|
|
780
982
|
},
|
|
781
|
-
onRedirect
|
|
983
|
+
onRedirect,
|
|
984
|
+
config
|
|
782
985
|
})
|
|
783
986
|
).catch((err) => {
|
|
784
987
|
if (clientFetch.isResponseError(err)) {
|
|
@@ -792,28 +995,21 @@ async function onSubmitSettings({ config, flow }, {
|
|
|
792
995
|
}
|
|
793
996
|
});
|
|
794
997
|
}
|
|
795
|
-
async function onSubmitVerification({
|
|
998
|
+
async function onSubmitVerification({ flow }, config, {
|
|
796
999
|
setFlowContainer,
|
|
797
1000
|
body,
|
|
798
1001
|
onRedirect
|
|
799
1002
|
}) {
|
|
800
|
-
|
|
801
|
-
if (!config.sdk.url) {
|
|
802
|
-
throw new Error(
|
|
803
|
-
`Please supply your Ory Network SDK URL to the Ory Elements configuration.`
|
|
804
|
-
);
|
|
805
|
-
}
|
|
806
|
-
await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
|
|
1003
|
+
await config.sdk.frontend.updateVerificationFlowRaw({
|
|
807
1004
|
flow: flow.id,
|
|
808
1005
|
updateVerificationFlowBody: body
|
|
809
1006
|
}).then(
|
|
810
1007
|
async (res) => setFlowContainer({
|
|
811
1008
|
flow: await res.value(),
|
|
812
|
-
flowType: clientFetch.FlowType.Verification
|
|
813
|
-
config
|
|
1009
|
+
flowType: clientFetch.FlowType.Verification
|
|
814
1010
|
})
|
|
815
1011
|
).catch(
|
|
816
|
-
|
|
1012
|
+
handleFlowError({
|
|
817
1013
|
onRestartFlow: (useFlowId) => {
|
|
818
1014
|
if (useFlowId) {
|
|
819
1015
|
replaceWindowFlowId(useFlowId);
|
|
@@ -824,11 +1020,11 @@ async function onSubmitVerification({ config, flow }, {
|
|
|
824
1020
|
onValidationError: (body2) => {
|
|
825
1021
|
setFlowContainer({
|
|
826
1022
|
flow: body2,
|
|
827
|
-
flowType: clientFetch.FlowType.Verification
|
|
828
|
-
config
|
|
1023
|
+
flowType: clientFetch.FlowType.Verification
|
|
829
1024
|
});
|
|
830
1025
|
},
|
|
831
|
-
onRedirect
|
|
1026
|
+
onRedirect,
|
|
1027
|
+
config
|
|
832
1028
|
})
|
|
833
1029
|
);
|
|
834
1030
|
}
|
|
@@ -838,6 +1034,7 @@ var supportsSelectAccountPrompt = ["google", "github"];
|
|
|
838
1034
|
function useOryFormSubmit(onAfterSubmit) {
|
|
839
1035
|
const flowContainer = useOryFlow();
|
|
840
1036
|
const methods = reactHookForm.useFormContext();
|
|
1037
|
+
const config = useOryConfiguration();
|
|
841
1038
|
const handleSuccess = (flow) => {
|
|
842
1039
|
flowContainer.setFlowContainer(flow);
|
|
843
1040
|
methods.reset(computeDefaultValues(flow.flow.ui.nodes));
|
|
@@ -854,7 +1051,7 @@ function useOryFormSubmit(onAfterSubmit) {
|
|
|
854
1051
|
if (submitData.method === "code" && data.code) {
|
|
855
1052
|
submitData.resend = "";
|
|
856
1053
|
}
|
|
857
|
-
await onSubmitLogin(flowContainer, {
|
|
1054
|
+
await onSubmitLogin(flowContainer, config, {
|
|
858
1055
|
onRedirect,
|
|
859
1056
|
setFlowContainer: handleSuccess,
|
|
860
1057
|
body: submitData
|
|
@@ -868,7 +1065,7 @@ function useOryFormSubmit(onAfterSubmit) {
|
|
|
868
1065
|
if (submitData.method === "code" && submitData.code) {
|
|
869
1066
|
submitData.resend = "";
|
|
870
1067
|
}
|
|
871
|
-
await onSubmitRegistration(flowContainer, {
|
|
1068
|
+
await onSubmitRegistration(flowContainer, config, {
|
|
872
1069
|
onRedirect,
|
|
873
1070
|
setFlowContainer: handleSuccess,
|
|
874
1071
|
body: submitData
|
|
@@ -876,7 +1073,7 @@ function useOryFormSubmit(onAfterSubmit) {
|
|
|
876
1073
|
break;
|
|
877
1074
|
}
|
|
878
1075
|
case clientFetch.FlowType.Verification:
|
|
879
|
-
await onSubmitVerification(flowContainer, {
|
|
1076
|
+
await onSubmitVerification(flowContainer, config, {
|
|
880
1077
|
onRedirect,
|
|
881
1078
|
setFlowContainer: handleSuccess,
|
|
882
1079
|
body: data
|
|
@@ -889,7 +1086,7 @@ function useOryFormSubmit(onAfterSubmit) {
|
|
|
889
1086
|
if (data.code) {
|
|
890
1087
|
submitData.email = "";
|
|
891
1088
|
}
|
|
892
|
-
await onSubmitRecovery(flowContainer, {
|
|
1089
|
+
await onSubmitRecovery(flowContainer, config, {
|
|
893
1090
|
onRedirect,
|
|
894
1091
|
setFlowContainer: handleSuccess,
|
|
895
1092
|
body: submitData
|
|
@@ -917,7 +1114,7 @@ function useOryFormSubmit(onAfterSubmit) {
|
|
|
917
1114
|
if ("passkey_remove" in submitData) {
|
|
918
1115
|
submitData.method = "passkey";
|
|
919
1116
|
}
|
|
920
|
-
await onSubmitSettings(flowContainer, {
|
|
1117
|
+
await onSubmitSettings(flowContainer, config, {
|
|
921
1118
|
onRedirect,
|
|
922
1119
|
setFlowContainer: handleSuccess,
|
|
923
1120
|
body: submitData
|
|
@@ -1084,7 +1281,20 @@ var NodeInput = ({
|
|
|
1084
1281
|
case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
|
|
1085
1282
|
case clientFetch.UiNodeInputAttributesTypeEnum.Button:
|
|
1086
1283
|
if (isSocial) {
|
|
1087
|
-
return
|
|
1284
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1285
|
+
Node2.OidcButton,
|
|
1286
|
+
{
|
|
1287
|
+
node,
|
|
1288
|
+
attributes: attrs,
|
|
1289
|
+
onClick: () => {
|
|
1290
|
+
setValue(
|
|
1291
|
+
"provider",
|
|
1292
|
+
node.attributes.value
|
|
1293
|
+
);
|
|
1294
|
+
setValue("method", node.group);
|
|
1295
|
+
}
|
|
1296
|
+
}
|
|
1297
|
+
);
|
|
1088
1298
|
}
|
|
1089
1299
|
if (isResendNode || isScreenSelectionNode) {
|
|
1090
1300
|
return null;
|
|
@@ -1174,6 +1384,37 @@ var Node = ({ node, onClick }) => {
|
|
|
1174
1384
|
}
|
|
1175
1385
|
return null;
|
|
1176
1386
|
};
|
|
1387
|
+
function OryTwoStepCardStateMethodActive({
|
|
1388
|
+
formState
|
|
1389
|
+
}) {
|
|
1390
|
+
const { Form } = useComponents();
|
|
1391
|
+
const { flow, flowType, dispatchFormState } = useOryFlow();
|
|
1392
|
+
const { ui } = flow;
|
|
1393
|
+
const nodeSorter = useNodeSorter();
|
|
1394
|
+
const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
|
|
1395
|
+
const groupsToShow = useNodeGroupsWithVisibleNodes(ui.nodes);
|
|
1396
|
+
const finalNodes = getFinalNodes(groupsToShow, formState.method);
|
|
1397
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
|
|
1398
|
+
/* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
|
|
1399
|
+
/* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
|
|
1400
|
+
/* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
|
|
1401
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1402
|
+
OryForm,
|
|
1403
|
+
{
|
|
1404
|
+
"data-testid": `ory/form/methods/local`,
|
|
1405
|
+
onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
|
|
1406
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
|
|
1407
|
+
ui.nodes.filter(
|
|
1408
|
+
(n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
|
|
1409
|
+
).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
|
|
1410
|
+
finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
|
|
1411
|
+
] })
|
|
1412
|
+
}
|
|
1413
|
+
)
|
|
1414
|
+
] }),
|
|
1415
|
+
/* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
|
|
1416
|
+
] });
|
|
1417
|
+
}
|
|
1177
1418
|
function OryFormOidcButtons() {
|
|
1178
1419
|
const {
|
|
1179
1420
|
flow: { ui }
|
|
@@ -1204,8 +1445,10 @@ function OryFormOidcButtons() {
|
|
|
1204
1445
|
}
|
|
1205
1446
|
function OryFormSocialButtonsForm() {
|
|
1206
1447
|
const {
|
|
1207
|
-
flow: { ui }
|
|
1448
|
+
flow: { ui },
|
|
1449
|
+
formState
|
|
1208
1450
|
} = useOryFlow();
|
|
1451
|
+
console.log(formState);
|
|
1209
1452
|
const filteredNodes = ui.nodes.filter(
|
|
1210
1453
|
(node) => node.group === clientFetch.UiNodeGroupEnum.Saml || node.group === clientFetch.UiNodeGroupEnum.Oidc
|
|
1211
1454
|
);
|
|
@@ -1214,39 +1457,6 @@ function OryFormSocialButtonsForm() {
|
|
|
1214
1457
|
}
|
|
1215
1458
|
return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { "data-testid": `ory/form/methods/oidc-saml`, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
|
|
1216
1459
|
}
|
|
1217
|
-
function OryTwoStepCardStateMethodActive({
|
|
1218
|
-
formState
|
|
1219
|
-
}) {
|
|
1220
|
-
const { Form } = useComponents();
|
|
1221
|
-
const { flow, flowType, dispatchFormState } = useOryFlow();
|
|
1222
|
-
const { ui } = flow;
|
|
1223
|
-
const nodeSorter = useNodeSorter();
|
|
1224
|
-
const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
|
|
1225
|
-
const groupsToShow = useNodeGroupsWithVisibleNodes(ui.nodes);
|
|
1226
|
-
const finalNodes = getFinalNodes(groupsToShow, formState.method);
|
|
1227
|
-
const selectedMethodIsSocial = formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml;
|
|
1228
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
|
|
1229
|
-
/* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
|
|
1230
|
-
/* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
|
|
1231
|
-
/* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
|
|
1232
|
-
selectedMethodIsSocial && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
|
|
1233
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1234
|
-
OryForm,
|
|
1235
|
-
{
|
|
1236
|
-
"data-testid": `ory/form/methods/local`,
|
|
1237
|
-
onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
|
|
1238
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
|
|
1239
|
-
ui.nodes.filter(
|
|
1240
|
-
(n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
|
|
1241
|
-
).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
|
|
1242
|
-
finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
|
|
1243
|
-
] })
|
|
1244
|
-
}
|
|
1245
|
-
)
|
|
1246
|
-
] }),
|
|
1247
|
-
/* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
|
|
1248
|
-
] });
|
|
1249
|
-
}
|
|
1250
1460
|
function OryTwoStepCardStateProvideIdentifier() {
|
|
1251
1461
|
const { Form, Card } = useComponents();
|
|
1252
1462
|
const { flowType, flow, dispatchFormState } = useOryFlow();
|
|
@@ -4312,6 +4522,7 @@ exports.OryCardContent = OryCardContent;
|
|
|
4312
4522
|
exports.OryCardFooter = OryCardFooter;
|
|
4313
4523
|
exports.OryCardHeader = OryCardHeader;
|
|
4314
4524
|
exports.OryCardValidationMessages = OryCardValidationMessages;
|
|
4525
|
+
exports.OryConfigurationProvider = OryConfigurationProvider;
|
|
4315
4526
|
exports.OryConsentCard = OryConsentCard;
|
|
4316
4527
|
exports.OryForm = OryForm;
|
|
4317
4528
|
exports.OryFormGroupDivider = OryFormGroupDivider;
|
|
@@ -4327,6 +4538,7 @@ exports.messageTestId = messageTestId;
|
|
|
4327
4538
|
exports.uiTextToFormattedMessage = uiTextToFormattedMessage;
|
|
4328
4539
|
exports.useComponents = useComponents;
|
|
4329
4540
|
exports.useNodeSorter = useNodeSorter;
|
|
4541
|
+
exports.useOryConfiguration = useOryConfiguration;
|
|
4330
4542
|
exports.useOryFlow = useOryFlow;
|
|
4331
4543
|
//# sourceMappingURL=index.js.map
|
|
4332
4544
|
//# sourceMappingURL=index.js.map
|