Because I am no longer using a Hosted Login Page, I switched over from loginWithCredentials() function to asynchronous login() method in auth0 JS client to receive id/access tokens.
Since login(), does not use the /authorize flow anymore, also the renewToken function stopped working.
Any “recommended” way to get token refreshed while using the login() function?
Should I not have used the login() even though I no longer use a Hosted Login Page?
By default, the recommendation is to make use of the hosted login page which provided a centralized login experience, however, if you already went through analyzing your situation and concluded that having an embedded authentication experience (end-user provides credentials directly to your client application) is what you require and you’re okay with its characteristics/limitations then the most suitable approach in a SPA would be for you to make use of cross-origin authentication.
As additional information, the login method in Auth0.js makes use of the /oauth/token endpoint to perform a resource owner password credentials grant which is a simple and stateless exchange of a password for tokens. Given it’s stateless, obtaining new tokens on a SPA would imply repeating the exact same process which would be a very bad experience for users; the grant in question support refresh tokens, but SPA’s do not provide suitable storage for these type of token so they are not applicable for this exact situation.
By leveraging the cross-origin authentication process the overall flow would be improved because completing the initial authentication would also maintain state about that authentication session and you could then make use of that session to obtain refreshed tokens without forcing the user to input credentials again.