So I have written a dummy application, a login form written in angular2, this posts the username and password to a rest API, if the credentials are correct, the API returns a JWT (encoded in the JWT are various permissions).The JWT is saved in the local browser storage.
This works absolutely fine, the JWT stored in local storage (as per the guides I have read online) and can be accessed to anyone with a bit of browser knowledge (inspect element, view resources etc), and once you access the JWT token, it can easily be decrypted without the use of a key.
In my angular2 application, it decodes the key, if they key contains "value1 = True" it allows the user to a certain part of the website, if the key value is false, it returns the user to the home page with a access denied message. Again works fine in my test setup.
As the key is only stored locally, I can create a JWT anywhere, paste it into my browsers local storage with the correct credentials, and then I can access the restricted areas of the website.
Have a I missed anything, as this really doesn't seem secure? Lets say my app was online at mynewapp.com and the area mynewapp.com/private was protected with this JWT authentication, the application checked for a valid JWT, if a valid JWT token is found, it inspects the token, to see if it contains the relevent permissions to access this area, if it doesn't, whats to stop the person behind the browser modifying the contents of the browsers local storage, to manipulate the data to access this forbidden area.
The only way I can think of is to:
If JWT exists, perform API call to REST server, if the user with the JWT has permission to access the requested area, return true and allow the request to continue inside Angular
Else, REST Api returns false and user is not allowed any further.