Auth0 Home Blog Docs

Which Auth0.js method to call in a custom hosted login page with API Authorization flow?

auth0js
custom-login
api-authorization

#1

I’m currently using the API Authorization flow with a custom hosted login page which uses the lock widget to perform authentication. Everything works fine.

Now I wanted to completely customize the login page, so I started with the default template named “Custom Login Form”. The method used in this template is webAuth.redirect.loginWithCredentials, which is deprecated and doesn’t implement the API Authorization Flow. So, what would be the correct method to call to perform authentication in this scenario?

I tried webAuth.client.login, but in this case the client needs to have the password-realm grant and I’m not sure it’s the correct way to do it.


#2

Within the context of the hosted login page (HLP) you can use the webAuth.redirect.loginWithCredentials as it’s done in the template example you mentioned and you will still get access tokens suitable to call your own APIs (assuming you include the audience parameter when you redirect to the HLP); the important part is that within the HLP Auth0.js is initialized with internal options that allow the use of that method for this purpose.

The general documentation and the deprecation warning, to my knowledge, mostly applies to the use of the library in the context of client applications. This does not mean that the method itself will always be available for HLP use, but if/when it’s removed in a future version then a compatible alternative would be available for use within the HLP so that it would only be a matter of direct replacement.


#3

@jmangelo I have experienced the same issue with the HLP and trying to update the outdated webAuth.redirect.loginWithCredentails function to webAuth.client.login and have experienced a basic authentication popup appearing when submitting the login form. There’s no documentation anywhere that I can find to solve this issue. It would be extremely helpful to have documentation somewhere that says if you are using the hosted login page, it is okay to use the webAuth.redirect.loginWithCredentails and that using the webAuth.client.login function on the HLP isn’t supported yet.


#4

@jmangelo I have experienced the same issue with the HLP and trying to update the outdated webAuth.redirect.loginWithCredentails function to webAuth.client.login and have experienced a basic authentication popup appearing when submitting the login form. There’s no documentation anywhere that I can find to solve this issue. It would be extremely helpful to have documentation somewhere that says if you are using the hosted login page, it is okay to use the webAuth.redirect.loginWithCredentails and that using the webAuth.client.login function on the HLP isn’t supported yet.


#5

Thanks for the feedback, I will communicate this internally.


#6