Me and my team have already integrated auth0 passwordless universal login in our React app, and decided that we need more customized login UI. I have read some posts that we either need to use the auth.js or the authentication API, but we don’t want to change the whole logic of the app just to customize the login and use the auth0-react SDK, but it came out to be impossible. So we decided to use the custom login form template and to customize it using the auth0.js and again make it passwordless. While trying to send the email we got the following error:
{"error":"bad.connection","error_description":"Connection does not exist"}
We got the following configuration:
<script src="https://cdn.auth0.com/js/auth0/9.19.0/auth0.min.js"></script>
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
);
var params = Object.assign({
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: token id_token'
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
function login(e) {
e.preventDefault();
clearErrors();
var button = this;
var email = document.getElementById('loginemail').value;
button.disabled = true;
webAuth.passwordlessStart({
connection: 'email',
send: 'code'
email: email,
}, function(err) {
if (err) displayError(err);
button.disabled = false;
});
}
So, my question is if what we are trying to do is even possible, considering that we are using the custom login template. If not can you suggest us other alternatives for implementing custom UI with auth0-react SDK?