bug: auth by Hosted UI does not persist in localstorage

[jadbox]

Bug Report

Problem: after successful login, reloading the page without the code token does not persist authenticated state. It seems to be a localstorage issue where Amplify is clearing the CognitoIdentityServiceProvider keys out.

I cannot get Amplify to persisted an authenticated state after logging in via the Hosting UI [oauth]. I tried both Implicit Token and Code Grant, with cookies and with localstorage. The initial login works when the code/token is in the url, but once the page is refreshed and the uri token is removed, Amplify no longer says the user is authenticated.

On initial authentication (when ?code=xx on the url) I do see that localstorage correct get populated with CognitoIdentityServiceProvider keys , but once I remove the code/token from the url and reload, the keys in storage seem to disappear. I've tried creating a test localstorage token and it stays persisted upon reload, but the CognitoIdentityServiceProvider keys do not.

It might be related to:
amazon-archives/amazon-cognito-identity-js#287
(cc @crowdwave)

[powerful23]

@jadbox I tried in my localhost without any issue. The items with key CognitoIdentityServiceProvider persisted after reloading the page. Can you check if you accidentally clean the localStorage? Or you can provide more details about your app so we can reproduce it.

[jadbox]

@powerful23 Well I definitely know localstorage is not being cleared out, as the other cognito keys (can't remember them exactly) and even some test keys I add are persisted when the page reloads. It seems like specifically all keys CognitoIdentityServiceProvider* are cleared on refresh. I've tested this on two different computers using the latest version of Chrome, with addons disabled. For the app itself, it's pretty vanilla as I've just been following the instructions.

Here's a snippet of the code I was using:
https://gist.github.com/jadbox/b46f23664a2340953129a523ee7734c5

[powerful23]

@jadbox I looked through your code snippet. There are some places you might need to change.

1. The user will be signed out when the page is unloaded, which will therefore clean the cached item. As I know beforeunload will also be triggered when the page is refreshed.
2. You need to listen on the configured event when reloading the page. like this: https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/Greetings.jsx#L123 I noticed the doc didn't mention it. Will try to update it later on.

Thanks.

[jadbox]

@powerful23 wow, that did it! I should have noticed point #1 though. THANK YOU. I've been banging my head on this for nearly 3 weeks. Please do document as much as possible :)

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.