feat: continue with the verification flow after registration (#156)

ory · Dec 19, 2023 · 2bee4eb · 2bee4eb
1 parent c159a41
commit 2bee4eb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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
@@ -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
@@ -56,7 +69,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)