fix: use formState dispatcher in registration footer

GitOrigin-RevId: 593b088e0815b6a3fefc50c446c812d7f9de7eb1

Author: hperl

packages/elements-react/src/components/form/social.tsx

@@ -66,9 +66,7 @@ export function OryFormOidcButtons() {
 export function OryFormSocialButtonsForm() {
   const {
     flow: { ui },
-    formState,
   } = useOryFlow()
-  console.log(formState)
 
   // Only get the oidc nodes.
   const filteredNodes = ui.nodes.filter(

packages/elements-react/src/context/config.tsx

@@ -97,7 +97,6 @@ export function OryConfigurationProvider({
 
 function computeSdkConfig(config?: OryClientConfiguration["sdk"]): SDKConfig {
   if (config?.url && typeof config.url === "string") {
-    console.debug("Using sdk url from config")
     return {
       url: config.url.replace(/\/$/, ""),
       options: config.options || {},

packages/elements-react/src/theme/default/components/card/footer.tsx

@@ -190,7 +190,7 @@ function LogoutButton({ returnTo }: LogoutButtonProps) {
 
 function RegistrationCardFooter() {
   const intl = useIntl()
-  const { flow, formState } = useOryFlow()
+  const { flow, formState, dispatchFormState } = useOryFlow()
   const config = useOryConfiguration()
   const visibleGroups = useNodeGroupsWithVisibleNodes(flow.ui.nodes)
   const authMethodBlocks = toAuthMethodPickerOptions(visibleGroups)
@@ -203,19 +203,22 @@ function RegistrationCardFooter() {
       }
 
       return (
-        <span className="font-normal leading-normal antialiased">
-          <a
-            className="font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover"
-            // This works, because it essentially reloads the page.
-            // TODO: this should not do a full reload, but rather just update the state.....
-            href=""
+        <span className="font-normal leading-normal antialiased text-interface-foreground-default-primary">
+          <button
+            className="text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline"
+            onClick={() => {
+              dispatchFormState({
+                type: "action_clear_active_method",
+              })
+            }}
             data-testid={"ory/screen/registration/action/selectMethod"}
+            type="button"
           >
             {intl.formatMessage({
               id: "card.footer.select-another-method",
               defaultMessage: "Select another method",
             })}
-          </a>
+          </button>
         </span>
       )
     case "select_method":

packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx

@@ -80,8 +80,6 @@ function UnlinkRow({ button }: UnlinkRowProps) {
     }
   }, [isSubmitting, setClicked])
 
-  console.log(button.meta.label?.context)
-
   return (
     <div key={attrs.value} className="flex justify-between">
       <div className="flex items-center gap-6">

packages/elements-react/src/util/sdk-helpers/continueWith.ts

@@ -47,7 +47,6 @@ export function handleContinueWith(
   if (isSetOrySessionToken(action)) {
     throw new Error("Ory Elements does not support API flows yet.")
   } else if (isRedirectBrowserTo(action) && action.redirect_browser_to) {
-    // console.log("Redirecting to", action.redirect_browser_to)
     onRedirect(action.redirect_browser_to, true)
     return true
   } else if (isShowVerificationUi(action)) {