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.

javascriptajaxangularjslocal-storagejwt

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

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

javascripthtml

AngularJS Side-by-Side Summation

I was attempting to create a table displaying the sum of values at the bottom. Here is my HTML code: <table> <tr ng-repeat="a in all |filter:'Gönderildi'" ng-init="$parent.yekun=yekun+a.total"> <td>{{a.total}}< ...

angularjssum

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Moving an item to the top of an array in JavaScript/Vue.js: A simple guide

const a = [{ "iso2": "KH", "countryName": "Cambodia", "nationality": "Cambodian" }, { "iso2": "KI", "countryName": "Kiribati", "nationality": "I-Kiribati" }, { "iso2": "KM", "countryName": "Comoros", "nationality": "Como ...

javascriptvue.js

Having trouble seeing the Facebook registration page on Firefox?

Encountering some issues with Facebook and Firefox. Specifically, the registration popup on Facebook always appears empty when using Firefox. I have tried different approaches to the popup code but so far, nothing seems to be resolving the issue. Is there ...

javascriptfacebookfirefoxfacebook-javascript-sdkregistration

Testing a service resolution in a controller through unit testing

As I attempt to create a test for my home module, I keep encountering an error that reads "unknown provider: service." Interestingly, when I modify resolveSomething in my home module to output a string, the app functions as expected, indicating that the re ...

javascriptangularjsunit-testing

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Things go smoothly as long as I remove $locationprovider.html5mode(true). However, enabling html5mode seems to be causing some troubles. The main issue is that the css styles stop working after page refreshes. Any ideas on what could be causing this and ...

javascriptcssangularjsangular-ui-router

Manipulating variables across various methods in TypeScript

I have a simple code snippet where two variables are defined in the Main method and I need to access them from another method. However, I am encountering an issue with 'variables are not defined', even though I specified them in the declerations ...

javascripttypescript

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

javascripthtmlcssnightmare

How to Use JQuery to Display Elements with a Vague Name?

Several PHP-generated divs are structured as follows: <div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top ...

javascriptjquery

Is it possible to retrieve a physical address using PHP or Javascript?

Is it possible to retrieve the physical address (Mac Address) using php or javascript? I need to be able to distinguish each system on my website as either being on the same network or different. Thank you ...

javascriptphpjquery

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

javascriptjqueryhtml

Steps to design a code editor with autocomplete dropdown using Material UI technology

I am currently working on a unique use case for my app that involves implementing an editor-like textarea with Material UI Chip components (similar to tags in an autocomplete textbox) that generate expressions. The goal is to have an autocomplete dropdown ...

javascriptreactjsmaterial-ui

Retrieve the currently displayed page on a bootstrap table

I'm currently utilizing the bootstrap table to showcase my data. One of the features I have added is a column with an edit button for each row. Upon clicking on the edit button, I open a bootstrap modal that displays the data from the corresponding ro ...

javascriptjquerytwitter-bootstrap-3

What is the best way to insert a Button within a Tab while ensuring that the indicator remains in the appropriate tab?

Is it possible to include a button inside a Tab? When I click on "Homepage", the tab switches correctly with the indicator showing on the right tab. However, when I click on "Profile", the indicator moves to the logout button instead. How can I fix this ...

javascriptreactjsmaterial-uitabs

tips for transitioning between various json entities

Recently, I created a login page code using JavaScript that runs on a Node Express.js server. Users can input their username/email and password, and all the data gets stored in a JSON file structured like this: {"username":"admin"," ...

javascriptnode.jsexpress

A comprehensive guide on implementing filtering in AngularJS arrays

I am working with the array provided below: [ { Id: 1, Name: "AI", Capacity: 2, From: "2021-10-27T08:00:00", To: "2021-10-27T08:50:00", }, { Id: 2, Name: "TEST", Capacity: 2, ...

javascriptangularjs

Encountering a Meteor issue during the installation of npm packages

When attempting to install cheerio through npm, I encountered a specific error message. Error: Can't set DOCTYPE here. (Meteor sets <!DOCTYPE html> for you) - line 1, file Similarly, when trying to use jsdom, I faced a parse error. Currently ...

javascriptmeteornpm

Populate an HTML layout with MySQL information and dynamically add the content to the page using JavaScript

I'm facing a challenge with creating an about us page for a website. I am using a template to structure the page and I want to populate it with MySQL data. I have enclosed the entire <div> of the personcard within a <script> tag, but the p ...

javascripthtmlmysqlexpress

Accessing nested arrays and objects within JSON using Node.js

I'm in the process of developing an application that retrieves a JSON response from an API call using SONARQUBE. With node js, how can I extract the value of duplicated_lines from the following JSON object? I attempted the code below but it always r ...

javascriptarraysjsonnode.jsexpress