Creating a custom login page under Universal Login

Help
,
1

Hi,
I am trying to create a custom login page in React, under Universal Login.
So I created a react login page using “auth0-js” lib and added the built artifact as inlined script tags in the custom page.
The react page loads for me.

How ever initializaing & calling webAuth.login goes to “/co/authenticate” endpoint(which is meant for call outside UL login page). I was expecting it to goto “/usernamepassword/login” endpoint.(which is the call to UL login from inside).
And after successful login (can see the logs), it redirects back to the same login page.
Where am I going wrong?

const params = Object.assign({
   domain: process.env['NX_REACT_APP_AUTH0_DOMAIN'],
   clientID: process.env['NX_REACT_APP_AUTH0_CLIENT_ID'],
   responseType: 'code'
});
const urlParams = new URLSearchParams(window.location.search);
const stateParam = urlParams.get('state') || '';
const webAuth = new auth0.WebAuth(params);
 webAuth
    .login(
         {
              realm: process.env['NX_REACT_APP_AUTH0_DATABASE'],
              username: data.username,
              password: data.password,
              responseType: 'code',
              redirectUri: process.env['NX_REACT_APP_AUTH0_REDIRECT_URI'],
              state: stateParam
         }, 
         function(err) {
              console.error(err);
         }
    );
2

Maybe it’s not an issue for you anymore, but I realised the hard way that you need to remove the https:// from your NX_REACT_APP_AUTH0_DOMAIN So if your auth0 app domain is https://something.auth0.com then NX_REACT_APP_AUTH0_DOMAIN=something.auth0.com