Security in using local storage for HTML Angular 2 Project

Question

I am concerned that if I use local storage to store user information, a hacker may go into developer's console/application/local storage to change data (such as company name) and start getting data from my database from other company. Here is a bit more detail

I am working on a business app where upon registration, I receive the basic user information such as company, email, name...etc.

A simplified version of ny databse (firebase) data structure looks something like

-company1
    -filed1
        -data1
    -filed2
        -data1
-company2
    -field1
        data1

Here is how I do it currently without local storage (And the problem with it is mentioned)

1. User opens up the site to login, the app goes to firebase to log user in and retreive user detail to store it in a variable
2. Everytime the user wants to make a query, I use that variable and find information such as company name (for this example). Then I tell firebase to search for the path based on that company name (company1).

This all works fine. However, the problem is that upon launch, there is no user, hence all my AuthGuard will fail resulting the user to be re-direct back to login page. Imagine if the user is logged in, and then the refresh button is pressed, this will result in a re-direction back to login page because there is no user until firebase returns some data.

// Auth guard
canActivate() {
    if (!this.userService.getCurrentUser()) {
        return false
    }
    return true
}

getCurrentUser(): User {
    return this.currentUser
}

const APP_ROUTE: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'somePath', component: SomeComponent, canActivate: [AuthGuard] },
    { path: 'somePath2', component: SomeOtherComponent, canActivate: [AuthGuard] },
    { path: '**', redirectTo: '/login' },
]

The easiest fix that I could think of is to create a local storage to store the used information and check it in there when required. However, I am concerned that with this approach, a user can potentially go into the local storage and for example, change company to 2 which will allow access to other company's data

Is there a way to securely store data in local storage without having my concern?

Answer 1

The use of TypeScript, which is basically JavaScript, is problematic in the ways of security, since JavaScript is an interpreted language and the user has access to the entirety of your client-side code.

For this reason, solutions like client-side encryption won't work since you'll need the data at some point, which means your client will have code to decipher the files, which makes this code available to a malicious user.

Read this article, it goes further into this issue and suggests several options that might help you.