From 21306905cc43ca2fb0d382cf2cbe6cc720b8eeb2 Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Fri, 6 Oct 2023 17:39:50 +0200
Subject: [PATCH] feat: continue with the verification flow after registration

---
 examples/react-spa/src/Registration.tsx | 19 ++++++++++++++++++-
 examples/react-spa/src/Verification.tsx | 16 ++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/examples/react-spa/src/Registration.tsx b/examples/react-spa/src/Registration.tsx
index 05659d8cc..131cffb3b 100644
--- a/examples/react-spa/src/Registration.tsx
+++ b/examples/react-spa/src/Registration.tsx
@@ -73,7 +73,24 @@ export const Registration = () => {
         flow: flow.id,
         updateRegistrationFlowBody: body,
       })
-      .then(() => {
+      .then(({ data }) => {
+        if ("continue_with" in data) {
+          for (const cw of data.continue_with ?? []) {
+            if (cw.action === "show_verification_ui") {
+              const search = new URLSearchParams()
+              search.set("flow", cw.flow.id)
+              navigate(
+                {
+                  pathname: "/verification",
+                  search: search.toString(),
+                },
+                { replace: true },
+              )
+              return
+            }
+          }
+        }
+
         // we successfully submitted the login flow, so lets redirect to the dashboard
         navigate("/", { replace: true })
       })
diff --git a/examples/react-spa/src/Verification.tsx b/examples/react-spa/src/Verification.tsx
index f6a915a8d..33f9a3de8 100644
--- a/examples/react-spa/src/Verification.tsx
+++ b/examples/react-spa/src/Verification.tsx
@@ -8,6 +8,17 @@ export const Verification = (): JSX.Element => {
   const [flow, setFlow] = useState<VerificationFlow | null>(null)
   const [searchParams, setSearchParams] = useSearchParams()
 
+  // The return_to is a query parameter is set by you when you would like to redirect
+  // the user back to a specific URL after registration is successful
+  // In most cases it is not necessary to set a return_to if the UI business logic is
+  // handled by the SPA.
+  // In OAuth flows this value might be ignored in favor of keeping the OAuth flow
+  // intact between multiple flows (e.g. Login -> Recovery -> Settings -> OAuth2 Consent)
+  // https://www.ory.sh/docs/oauth2-oidc/identity-provider-integration-settings
+  const returnTo = searchParams.get("return_to")
+
+  const flowId = searchParams.get("flow")
+
   const navigate = useNavigate()
 
   // Get the flow based on the flowId in the URL (.e.g redirect to this page after flow initialized)
@@ -27,7 +38,9 @@ export const Verification = (): JSX.Element => {
   // create a new verification flow
   const createFlow = () => {
     sdk
-      .createBrowserVerificationFlow()
+      .createBrowserVerificationFlow({
+        ...(returnTo && { returnTo: returnTo }),
+      })
       // flow contains the form fields, error messages and csrf token
       .then(({ data: flow }) => {
         // Update URI query params to include flow id
@@ -57,7 +70,6 @@ export const Verification = (): JSX.Element => {
 
   useEffect(() => {
     // it could happen that we are redirected here with an existing flow
-    const flowId = searchParams.get("flow")
     if (flowId) {
       // if the flow failed to get since it could be expired or invalid, we create a new one
       getFlow(flowId).catch(createFlow)