2023-01-13 - Frontend Authentication Ideas

Frontend Authentication

Storing tokens in Frontend

There are conflicting opinions where authentication tokens should be stored in frontend applications, some push for session and some in local storage.

Old method

• Tried to avoid storing anywhere in browser managed locations (local/session storage) by storing in each application instance's logic, ie React objects
• When a new tab opened it would use local storage to request tokens from any other tabs that had them, the response would copy into local storage then immediately remove them, so the calling tab would receive the message with the tokens but the tokens would not remain

Problems

• When all tabs for the app are closed, the tokens are lost
• Will not retain login when browser or all tabs for the app are closed
• The app would appear to retain login if reopened with Cognito's cookie timeout (1 hour) because browser remembers Cognito's cookie so when redirected to Cognito, Cognito would return as if the user had signed in again

Solution

• If we want the browser to remember a user's sign in after closing the browser, we must store the tokens somewhere persistent
• Local storage and Cookies persist, cookies are insecure so Local Storage should be used
• Sacrifice the possible protection of not storing tokens in local storage all the time, but the old method still used local storage to pass tokens between tabs so it was risk reduction rather than eliminating the risk