"Invalid connection" error while implementing connection switching on universal login

[zschaffter]

Hey all, I’m hitting a snag trying to follow these docs to implement a button allowing users to switch the connection they’re attempting to login with:
https://auth0.com/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts/connection-switching#configure-login-prompts

My current setup seems to clear the prerequisites:

• universal login (this does use a custom liquid template, but it it univeral login)
• custom domain
• database connection, as well as passwordless (both sms and email)

I’ve attempted to add the provided form markup (below) both via the partials API as stated in the docs, as well as directly within the customized univeral login liquid template:

<form method="post" data-form-secondary="true"><input type="hidden" name="state" value="{{state}}"> <input type="hidden" name="connection" value="email"> <button type="submit" id="switchConnectionButton" style="background: #635dff; width: 100%; padding: 12px 16px; border: none; color: white;" data-action-button-secondary="true"> <span>Send a secure code by email</span> </button></form>

But with both implementations, submission of the secondary form return the same “Invalid connection” error:

Is there anything else I’d need to do to make this sort of connection switch work? Or is there anything about my setup that would be preventing it from working? Thanks in advance!

[teodor.andrei]

Hi @zschaffter and welcome to the Auth0 Community!

While I’m not sure what’s causing your error, I can give you a list of things to check:

1. Check Connection Configuration:

• Ensure that the connection you are trying to switch to (e.g., email) is properly configured in your Auth0 tenant.

2. Form Markup:

• Verify that the form markup you are using is correct. The form should include the necessary hidden inputs for state and connection.

<form method="post" data-form-secondary="true">
    <input type="hidden" name="state" value="{{state}}">
    <input type="hidden" name="connection" value="email">
    <button type="submit" id="switchConnectionButton" style="background: #635dff; width: 100%; padding: 12px 16px; border: none; color: white;" data-action-button-secondary="true">
        <span>Send a secure code by email</span>
    </button>
</form>

3. Universal Login Settings:

• Confirm that you are using the New Universal Login and that it supports the connection types you are trying to implement.

4. Authentication Profile:

• Check the Authentication Profile settings in your dashboard. If it is set to “Identifier + Password,” ensure that the connection is enabled for the client application.

5. Connection Display:

• Make sure that the connection is set to display as a button in the login experience configuration. This is necessary for the connection to be recognized during the login process.

6. Testing:

• Test the implementation using the Auth0 dashboard’s “Try” button to ensure that the connection works as expected outside of your custom implementation.

If you have followed these steps and are still encountering issues, review the logs for any additional error messages that may provide further insight into the problem.

We also have this Knowledge Article that might provide u with some more information.

Let me know if none of this helped and I will try to find more information for you to fix this issue.

Have a great day!
Teodor.

[zschaffter]

Thanks for the reply teodor.andrei! I think I’ve cleared most of your points, but wanted to get some clarity on 5/6.

1. Check Connection Configuration - Confirmed

2. Form Markup - Confirmed - are there any requirements for where the snippet is added within the page? (i.e. is there an auth0 script expecting it within a certain parent node?)

3. Universal Login Settings - confirmed this is enabled

4. Authentication Profile - confirmed this is enabled

5. Connection Display - Can you speak more to this point? If my understanding is correct, rendering of the “connection switch” button is accomplished with either the partials API and/or using a custom liquid template for the universal login page. Or are you saying there’s some options within the auth0 admin dashboard that touch on connection button display?

6. Testing - The connections themselves definitely work when accessed independently, it’s the secondary form submission that is hitting an issue.

Unfortunately that knowledge article really only links out to the docs page referenced in my initial post.

[teodor.andrei]

Hi again @zschaffter!

For 5. your understanding is correct, there is no separate switch or setting in the Auth0 Dashboard specific to enabling the rendering of this secondary connection button.

It is accomplished through one of the following methods, as you mentioned:

• Custom Liquid Template: Adding the <form method="post" data-form-secondary="true"> markup directly into the code.
• Partials API: Injecting the form markup via the API for different login flows.

To be honest, I have no idea what else can be wrong about your setup if you followed the docs. I will ask a colleague and get back to you.

Kind regards,
Teodor.