chore: synchronize workspaces

ory · Dec 20, 2024 · 7fa78d2 · 7fa78d2
1 parent 39af27a
commit 7fa78d2
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
@@ -5,14 +5,11 @@ import { FlowType, UiNode } from "@ory/client-fetch"
 import { useOryFlow } from "@ory/elements-react"
 import IconArrowLeft from "../../assets/icons/arrow-left.svg"
 import { omit } from "../../utils/attributes"
+import { restartFlowUrl } from "../../utils/url"
 
 export function DefaultCurrentIdentifierButton() {
-  const {
-    flow: { ui },
-    flowType,
-    config,
-    formState,
-  } = useOryFlow()
+  const { flow, flowType, config, formState } = useOryFlow()
+  const ui = flow.ui
 
   if (formState.current === "provide_identifier") {
     return null
@@ -26,7 +23,12 @@ export function DefaultCurrentIdentifierButton() {
   ) {
     return null
   }
-  const initFlowUrl = `${config.sdk.url}/self-service/${flowType}/browser`
+
+  const initFlowUrl = restartFlowUrl(
+    flow,
+    `${config.sdk.url}/self-service/${flowType}/browser`,
+  )
+
   const attributes = omit(nodeBackButton.attributes, [
     "autocomplete",
     "node_type",
@@ -38,6 +40,7 @@ export function DefaultCurrentIdentifierButton() {
       {...attributes}
       href={initFlowUrl}
       title={`Adjust ${nodeBackButton?.attributes.value}`}
+      data-testid={"ory/ui/login/link/restart"}
     >
       <IconArrowLeft
         size={16}

diff --git a/packages/elements-react/src/theme/default/components/card/footer.tsx b/packages/elements-react/src/theme/default/components/card/footer.tsx
@@ -5,6 +5,7 @@ import { FlowType, UiNode, UiNodeInputAttributes } from "@ory/client-fetch"
 import { useOryFlow } from "@ory/elements-react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { initFlowUrl, restartFlowUrl } from "../../utils/url"
 
 export function DefaultCardFooter() {
   const { flowType } = useOryFlow()
@@ -22,9 +23,7 @@ export function DefaultCardFooter() {
   }
 }
 
-export function getReturnToQueryParam(flow: {
-  return_to?: string
-}) {
+export function getReturnToQueryParam(flow: { return_to?: string }) {
   if (flow.return_to) {
     return flow.return_to
   }
@@ -35,7 +34,7 @@ export function getReturnToQueryParam(flow: {
 }
 
 function LoginCardFooter() {
-  const { config, formState, flow} = useOryFlow()
+  const { config, formState, flow } = useOryFlow()
   const intl = useIntl()
 
   if (
@@ -47,12 +46,6 @@ function LoginCardFooter() {
     return null
   }
 
-  let registrationLink = `${config.sdk.url}/self-service/registration/browser`
-  const returnTo = getReturnToQueryParam(flow)
-  if (returnTo) {
-    registrationLink += `?return_to=${returnTo}`
-  }
-
   return (
     <span className="text-sm font-normal leading-normal antialiased">
       {intl.formatMessage({
@@ -61,7 +54,7 @@ function LoginCardFooter() {
       })}{" "}
       <a
         className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
-        href={registrationLink}
+        href={initFlowUrl(config.sdk.url, "registration", flow)}
         data-testid={"ory/ui/login/link/registration"}
       >
         {intl.formatMessage({
@@ -101,12 +94,6 @@ function RegistrationCardFooter() {
     }
   }
 
-  let loginLink = `${config.sdk.url}/self-service/login/browser`
-  const returnTo = getReturnToQueryParam(flow)
-  if (returnTo) {
-    loginLink += `?return_to=${returnTo}`
-  }
-
   return (
     <span className="text-sm font-normal leading-normal antialiased">
       {formState.current === "method_active" ? (
@@ -132,7 +119,7 @@ function RegistrationCardFooter() {
           })}{" "}
           <a
             className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
-            href={loginLink}
+            href={initFlowUrl(config.sdk.url, "login", flow)}
             data-testid={"ory/ui/login/link/login"}
           >
             {intl.formatMessage({

diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx
@@ -17,6 +17,7 @@ import {
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { getReturnToQueryParam } from "../card/footer"
+import { initFlowUrl } from "../../utils/url"
 
 function findResendNode(nodes: UiNode[]) {
   return nodes.find(
@@ -51,14 +52,6 @@ export function DefaultLabel({
 
   const fieldError = formState.errors[attributes.name]
 
-  const recoveryUrl = config.project.recovery_ui_url
-
-  let recoveryLink = `${config.sdk.url}/self-service/registration/browser`
-  const returnTo = getReturnToQueryParam(flow)
-  if (returnTo) {
-    recoveryLink += `?return_to=${returnTo}`
-  }
-
   return (
     <div className="flex flex-col gap-1 antialiased">
       {label && (
@@ -77,7 +70,7 @@ export function DefaultLabel({
             flowType === FlowType.Login && (
               // TODO: make it possible to override with a custom component
               <a
-                href={recoveryLink}
+                href={initFlowUrl(config.sdk.url, "recovery", flow)}
                 className="text-sm font-medium text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
               >
                 {intl.formatMessage({

diff --git a/packages/elements-react/src/theme/default/utils/url.ts b/packages/elements-react/src/theme/default/utils/url.ts
@@ -0,0 +1,42 @@
+export function restartFlowUrl(
+  flow: { request_url?: string; return_to?: string },
+  fallback: string,
+) {
+  return flow.request_url || appendReturnTo(fallback, flow.return_to)
+}
+
+export function initFlowUrl(
+  sdkUrl: string,
+  flowType: string,
+  flow: {
+    return_to?: string
+  },
+) {
+  const result = `${sdkUrl}/self-service/${flowType}/browser`
+  const qs = new URLSearchParams()
+
+  if (flow.return_to) {
+    qs.set("return_to", flow.return_to)
+  } else if (typeof window !== "undefined") {
+    const searchParams = new URLSearchParams(window.location.search)
+    if (searchParams.has("return_to")) {
+      qs.set("return_to", searchParams.get("return_to") || "")
+    }
+  }
+
+  if (qs.toString().length === 0) {
+    return result
+  }
+
+  return result + "?" + qs.toString()
+}
+
+function appendReturnTo(url: string, returnTo?: string) {
+  if (!returnTo) {
+    return url
+  }
+
+  const urlObj = new URL(url)
+  urlObj.searchParams.set("return_to", returnTo)
+  return urlObj.toString()
+}
diff --git a/packages/elements-react/src/util/onSubmitLogin.ts b/packages/elements-react/src/util/onSubmitLogin.ts
@@ -41,7 +41,8 @@ export async function onSubmitLogin(
       updateLoginFlowBody: body,
     })
     .then(() => {
-      // Workaround
+      // TODO Remove this workaround. If the return_to value is missing we redirect to the browser endpoint which will redirect us
+      // TODO to the default_redirect_url. Ideally, this value comes from the project config.
       window.location.href =
         // eslint-disable-next-line promise/always-return
         flow.return_to ?? config.sdk.url + "/self-service/login/browser"