> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.
> Learn how you can implement flexible connection switching with Universal Login
# Configure Flexible Connection Switching
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****MASKED*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
Flexible connection switching is an optional feature that allows users to choose their method of authentication when logging in to an application. When implemented, your application's login screen presents users with the option to authenticate with either traditional database credentials or a passwordless connection. Users who select a [passwordless connection](/docs/authenticate/passwordless) receive a one-time password (OTP) through email or SMS that they can use to log in to your application.
Flexible connection switching uses [custom Universal Login prompts](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) to provide users with a more autonomous authentication experience.
## Before you begin
Before you can implement flexible connection switching, ensure the following requirements are met:
* Use [Universal Login](/docs/authenticate/login/auth0-universal-login).
* This feature is not available for custom login pages.
* Configure a [custom domain](/docs/customize/custom-domains).
* Enable the following for your application:
* [Identifier First authentication](/docs/authenticate/login/auth0-universal-login/identifier-first)
* [Database connection](/docs/authenticate/database-connections)
* [Email or SMS passwordless authentication](/docs/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms)
## Implement flexible connection switching
To implement this feature, use the [Auth0 Management API](https://auth0.com/docs/api/management/v2) to configure custom signup and login prompt partials. Partials refer to custom code inserted into an entry point within a prompt screen, such as the login screen. To learn more, review [Customize Signup and Login Prompts](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts).
To implement flexible connection switching, you will configure custom prompt partials with the following parameters:
| Parameter | Description | Example |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- |
| `state` | Renders the current page's state value, which is opaque and used for security purposes.
To learn more about current screen information, review [Customize Univeral Login Page Templates](/docs/customize/login-pages/universal-login/customize-templates#current-screen-information). | `` |
| `connection` | Name and type of the connection.
For passwordless connections, value is either `email` or `sms`. | `` |
In the code samples below, ensure you replace the placeholders with the appropriate values:
* Replace `{yourDomain}` with `yourdomain.auth0.com`.
* Replace `{mgmtApiToken}` with your access token.
### Configure signup prompt
You can configure the `signup-password` prompt using the [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) endpoint:
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/signup-password/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"signup-password":{"form-footer-start":""}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/signup-password/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"signup-password":{"form-footer-start":""}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/signup-password/partials"
payload := strings.NewReader("{"signup-password":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/signup-password/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"signup-password":{"form-footer-start":""}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/signup-password/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'signup-password': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/signup-password/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"signup-password":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"signup-password":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/signup-password/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/signup-password/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"signup-password":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```
As a result, a **Send a secure code by email button** is added to the `signup-password` screen. When a user selects this button, it submits a form body containing the login state parameter and the name of the desired connection.
### Configure login prompts
For best results, configuring the login prompt for both password and passwordless connections is recommended.
You can configure the `login-password` prompt using the [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) endpoint:
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/login-password/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"login-password":{"form-footer-start":""}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/login-password/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"login-password":{"form-footer-start":""}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/login-password/partials"
payload := strings.NewReader("{"login-password":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}n(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/login-password/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"login-password":{"form-footer-start":""}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/login-password/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'login-password': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/login-password/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"login-password":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"login-password":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/login-password/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/login-password/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"login-password":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```
As a result, a **Send a secure code by email button** is added to the `login-password` screen. When a user selects this button, it submits a form body containing the login state parameter and the name of the desired connection.
Similarly, you can configure the `login-passwordless` prompt using the [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) endpoint:
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/login-passwordless/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/login-passwordless/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/login-passwordless/partials"
payload := strings.NewReader("{"login-passwordless-email-code":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/login-passwordless/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/login-passwordless/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'login-passwordless-email-code': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/login-passwordless/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"login-passwordless-email-code":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"login-passwordless-email-code":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/login-passwordless/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/login-passwordless/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"login-passwordless-email-code":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```