Flexible Connection Switching with ACUL

This article provides an example of how to implement the Flexible Connection Switching with Advanced Customization for Universal Login (ACUL).

• ACUL
• Flexible Connection Switching

The ACUL SDK does not support Flexible Connection Switching out of the box, however it can still be achieved with by creating a custom button to switch connections.

Flexible Connection Switching with ACUL is achieved by adding a custom button to the login-password screen and making a POST to the server with the appropriate data.

1. Review the Connection Switching documentation.

2. Add a custom button directly to the custom code for the login-password screen.

3. Add a function to handle the button click. This function makes a POST request to the server with the necessary connection data.

The following example code can be used for this implementation.

This function is called on click by a button in the form:

// OTP submit handler
  const handleSendOtp = () => {
    setIsSubmitting(true);
    submitForm({
      state: loginPasswordInstance.transaction?.state ?? "",
      connection: "email",
    });
    setIsSubmitting(false);
  };

The submitForm function looks like this:

export default function submitForm(formValues: object) {
  // Create a hidden form
  const form = document.createElement("form");
  form.method = "POST";
  form.style.display = "none";

  for (const [key, value] of Object.entries({ ...formValues })) {
    const input = document.createElement("input");
    input.value = value as string;
    input.name = key;
    form.appendChild(input);
  }

  // Append and submit form
  document.body.appendChild(form);
  form.submit();
}

The custom button:

   <TabsContent value="otp" className="space-y-4 mt-0">
          <div className="space-y-4">
            <p className="text-foreground text-center my-12">
              Prefer to receive a code via email instead?
              <span className="block text-sm text-muted-foreground text-center mt-1">
                Your code will be sent to {data?.username}.
              </span>
            </p>
            <Button
              onClick={handleSendOtp}
              disabled={isSubmitting}
              className="w-full h-12 bg-primary hover:bg-primary-dark text-primary-foreground font-medium"
            >
              {isSubmitting ? (
                "Sending code..."
              ) : (
                <>
                  Send verification code
                  <ArrowRight className="ml-2 h-4 w-4" />
                </>
              )}
            </Button>
          </div>
        </TabsContent>