Storing user information in Angular after login and implementing JWT authentication

Is it advisable to save any user information other than JWT in local storage or cookies after a successful login? (The user profile object is already saved and encrypted in the JWT payload sub-part.) I need the user profile object ready before initializing anything else in Angular, such as fetching the user role and login status.

If I only save the JWT on the client side, I will need an extra AJAX request before the app loads to retrieve the user info from decoding the JWT on the server side, since the token secret is stored on the server (only after a full page refresh). Handling errors in this scenario is simpler due to the token being either valid or invalid.

If I save both the JWT and the user profile object as a string in the client-side storage, this can be redundant and users may manually manipulate the object, causing the app to fail.

I personally prefer saving only the JWT in the client-side storage after a successful login. However, I would appreciate some advice on how to organize code in this case and how to fetch the user profile object after a full page refresh.

Please assist me with this dilemma.

Answer №1

To enhance security, it is recommended to store the JWT in an HTTPS-Only cookie and then request the user object from the server when needed.

For a more streamlined approach without extra server calls, one method is to store only the claims body of the JWT on the client side, excluding the signature. By removing the signature, the "token" loses its JWT status and cannot be used for authentication, reducing the risk of the access token being compromised from local storage.

However, this approach relies on two assumptions regarding the claims body:

1) The information within the claims body should be opaque and not contain personally identifiable information (PII) that could be vulnerable to XSS attacks with local storage.

2) It's crucial that sensitive information is not leaked to the user if the object in local storage is manipulated, emphasizing the need to secure any sensitive data in your Angular application through proper API protection.

3) Like with all cookie-based authentication methods, this strategy helps defend against CSRF Attacks.

For further insights on this topic, check out my blog post at Stormpath: Token Based Authentication for Single Page Apps.

I trust this information proves valuable to you!

Answer №2

To keep things simple, I recommend storing only the JWT and adding an additional ajax request to retrieve the user profile.

If you are determined to eliminate this extra call, one option is to use asymmetrically signed JWT instead of encrypted JWT. From there, you can extract the data on the client side as long as you have control over the creation of the JWT.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the loading bar component in Material UI to allow for customizable color changes

I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...

javascript css reactjs redux material-ui

Executing a jQuery AJAX request to a Slim Framework PHP function with a null parameter

While working with the slim framework, I encountered an issue where a POST request to insert a record was not functioning at all. I suspect that I might be passing a parameter identified as null, which could potentially result in inserting a null record in ...

php jquery ajax frameworks slim

What would be the ideal alternative if the Google Ajax API is unavailable, given that Google does not allow for local installation?

On my website, I include the following script: ... <script type="text/javascript" src="https://www.google.com/jsapi"></script> ... This particular script is from Google and is used to dynamically load other resources, such as the Google Chart ...

javascript ajax

The React router Link does not update the route after an if statement is executed

I'm in need of some assistance regarding React.js. Despite my efforts to find a solution, nothing has worked for me so far. Here are some examples of what I've searched for: How to use Redirect in the new react-router-dom of Reactjs Redirectin ...

javascript reactjs react-router p5.js

VueJs Axios - Managing Request Headers

Edit: Is it possible that this is a CORS issue, considering I am on localhost... When using Javascript, I have the ability to define request headers and handle responses like this: $(function() { var params = { // Request parameters } ...

javascript vue.js axios

What are the steps to increase or decrease the quantity of a product?

Is there a way to adjust the quantity of products in the shopping cart? I would like to be able to increase and decrease the quantity, while also displaying the current value in a span tag. <a href="javascript:" id="minus2" onclick="decrementValue()" ...

javascript php ajax

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascript jquery html

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

javascript typescript gulp angular

How to display a conditional component in a single line with Material UI

I'm facing an issue with a component that is being reused multiple times. Here's the current output: |MyComponent1| |MyComponent2| Specifically, my condition is: if (a == 'One' || b == 'Two'){ <MyComponent data={data}/> ...

javascript reactjs material-ui components styling

Encode data in JSON format using Javascript and then decode it using PHP

In my coding journey, I decided to create an object using Javascript to pass it as an argument to a PHP script. var pattern = new Object(); pattern['@id'] = ''; pattern['@num'] = ''; pattern.cprop = new Object(); // ...

javascript php ajax json

How can I interpret a string with a specific format using JavaScript?

Input String: var json_data = "{0:'apple', 1:'bannana', 2:'guava'}"; Desired Output after parsing with JavaScript: var json_data = { columns: [{0:'apple'}, {1:'bannana'} ,{2:'guava'}] ...

javascript json

issue with react prop causing my function to function in one scenario but fail in another

I'm a bit confused with these two functions. Although they seem identical to me, only the first one is able to generate images from this.state.images. Any guidance on this seemingly small mistake would be much appreciated. The following code snippet ...

javascript reactjs components state prop

How can you make a button in Vue only visible after all API calls have successfully retrieved the data?

Is there a way to make the report button visible only after all the data has been loaded from the latest click of the budget button? Currently, when the budget button is clicked, it retrieves budgets and displays them in a Vue grid using Kendo Grid. To spe ...

javascript vue.js vuejs2

Unable to locate module: Issue: Unable to locate 'exports'

Looking to make the switch from RequireJS 2.2 to Webpack 3 for my Angular 1.5 app, I aim to establish a Webpack environment that can accommodate existing RequireJS code while transitioning gradually to Webpack and ES6. The plan is to write tests, refactor ...

angularjs webpack

Have developers created an event trigger for when google maps controls finish loading?

While I am aware of the tilesloaded event, it appears that the controls load after this event. My goal is to use jQuery to retrieve the controls, but I am struggling to identify the appropriate event to listen for. ...

javascript google-maps google-maps-api-3

Comparison of performance between serializing an object to indexedDB and using JSON.stringify

I am curious about the efficiency differences in terms of browser/CPU/memory between using JSON.stringify for serialization versus writing an object to an object store in indexedDB. The context for this question is optimizing the process of writing an obj ...

javascript json indexeddb

When encountering an issue while invoking a function in Vue.js, an internal error may occur, as evidenced by the message: "new Http

Currently, I am in the process of developing an application and encountering an issue where I am unable to comprehend a cryptic error message that keeps popping up. If you'd like to see the error itself, you can check it out here. Below is my form.vu ...

javascript firebase vue.js google-cloud-functions

Tips for organizing Protractor promises

I am currently experimenting with determining if an element is positioned at the bottom of a page in Protractor/Webdriver using promises. However, I feel like my current approach is quite messy and there must be a cleaner way to achieve this. describe(&ap ...

javascript selenium-webdriver promise protractor

The Heroku Node.js application encountered an issue when trying to apply the style due to an incompatible MIME

As a complete beginner in Node.js and Express, I am encountering some errors from the console. When trying to load my CSS file from '', I receive the following error: "Refused to apply style because its MIME type ('text/html') i ...

javascript node.js express heroku

Unlock the Secrets of JavaScript Key Codes

I am currently dealing with a JavaScript routine that I did not create. This routine is triggered by the onkeydown attribute of a text box in order to restrict certain keystrokes. The first argument does not seem to have any significance. The second argum ...

javascript keycode fromcharcode

JavaScripter Q&A