# How to refresh tokens in JS web app, when not using Hosted Login Page?

**URL:** <https://community.auth0.com/t/how-to-refresh-tokens-in-js-web-app-when-not-using-hosted-login-page/8504>\
**Category:** Get Help\
**Tags:** tokens, refresh-tokens\
**Created:** [October 17, 2017, 7:21pm UTC](https://community.auth0.com/t/how-to-refresh-tokens-in-js-web-app-when-not-using-hosted-login-page/8504 "2017-10-17T19:21:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacek.marek](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/jacek.marek/32/7368_2.png) [@jacek.marek](https://community.auth0.com/u/jacek.marek)\
**Post date:** [October 17, 2017, 7:21pm UTC](https://community.auth0.com/t/how-to-refresh-tokens-in-js-web-app-when-not-using-hosted-login-page/8504/1 "2017-10-17T19:21:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jmangelo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/jmangelo/32/7923_2.png) [@jmangelo](https://community.auth0.com/u/jmangelo)\
**Post date:** [October 18, 2017, 4:23pm UTC](https://community.auth0.com/t/how-to-refresh-tokens-in-js-web-app-when-not-using-hosted-login-page/8504/2 "2017-10-18T16:23:22Z")

</div>

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](https://auth0.com/docs/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.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [March 2, 2018, 5:57am UTC](https://community.auth0.com/t/how-to-refresh-tokens-in-js-web-app-when-not-using-hosted-login-page/8504/3 "2018-03-02T05:57:01Z")

</div>