I’ve managed to implement Auth0 on an Angular 8 app, however, every time I reload the browser login is lost and the user has to authenticate again (I read somewhere that this is expected behavior because all login info is stored as variables instead than on local storage, is it true?) and if so, how can I change this behavior to persist login data somehow?
1 Like
Hey there @miguelopezv, welcome to Auth0’s Community!
Out of curiosity, where are you currently storing your tokens? This is often a problem with how you’re handling the session as seen here. However If nether of these docs end up helping you I would be happy to take a look. Please record a har file of the login, be sure to select “Preserve log” to catch redirects and scrub the file of user passwords before passing it over in a direct message with the tenant name, thanks!
1 Like
For SPAs such as with Angular, you should make use of checkSession() or getTokenSilently (depending whether you’re using the old JS SDK or the new Auth0 SPA JS) and the silent authentication approach, because it’s not safe to store access token in the browser.
Also relevant, as Jim pointed out above:
Well first of all thanks for your reply. Second, I’ll start by saying I’m shocked by the news that is not safe to store tokens on localStorage since for me is one of the most common approach that I have seen for a long time.
So, for what I have seen in that article it says I should use this.auth.renewTokens() on app init to refresh the token and store it in memory , right?
1 Like
Yes, that is correct. renewTokens() then invokes checkSession(), which is what I referred to above (silent authentication), like in this example.
I think I’m using the new SPA JS because there’s no renewTokens() or checkSession() methods, so I’ve tried to use getTokenSilently(). I don’t know if I’m doing it right but I’m trying to use it on the app.component OnInit, after:
this.auth0Client = await this.authService.getAuth0Client(); but all I get is
{"error": "login_required", "error_description":"Login required", "state":"TXNNcTU0Z3diVkN2cGMtWGtkX0lLTWkxOXlVeHQ2dzQyUX5JU2hBfkt3LQ=="}
am I doing it wrong?
You can tell if you use the new Auth0 SPA JS by looking at your package.json. If it has a dependency on
@auth0/auth0-spa-js then it’s the new SDK. If it just says auth0-js then it’s the old one.
Did you look at the Angular Quickstart example (you can download a ready to go project as .zip and just run it via npm install and npm start. This is behaving exactly as you want and you can use it as reference.
I just double checked: in the new SDK you actually don’t need to invoke getTokenSilently() manually because it’s done automatically when the auth0Client is created (which is an improvement over the old SDK where you had to invoke checkSession manually yourself.
Meanwhile, could you provide the whole authService.js of yours (and check your package.json whether it’s using the new or old SDK, as described above, because the latter is really important to give you a proper answer).
In case of using the new SDK, this blog post might also be an additional helpful explanation:
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.