All Login Buttons are Frozen on Canceling Social Login

[pmoghaddam]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

iOS Safari - however I suspect this happens in all browsers, it's only that iOS Safari doesn't cause a browser refresh which resets the state and avoids this problem.

Please describe your bug.

When using social logins, if the user cancels or goes back, all login buttons (including native login) do not do anything.

The user has to either refresh, or switch tabs, for them to become active again.

What's the expected behaviour?

The buttons should work as usual.

Help us reproduce the bug!

I do not have anything special. If you setup social buttons, click on Sing in with Google/Apple, but cancel and go back, you'll be stuck.

#1660 helped improve the situation since before it'd simply be blank altogether, but now the Authenticator is present, but not functional.

[calebpollman]

@pmoghaddam Was not able to immediately replicate the behavior in an example app with @aws-amplify/ui-react@latest. Can you please verify which version of @aws-amplify/ui-react you are using in your project?

[pmoghaddam]

Version is 6.1.2.

@calebpollman attached is my video in action. I'll update the issue to specify that this is iOS safari.

Basically though I think on going back, browser's bfcache loads the previous state, and this state has the Authenticator in a "waiting to socially login", so it doesn't expect these buttons to be clicked. Basically, it does not assume that the user may cancel logging in. My workaround right now is to have the browser listen on pageshow event and reload everything. However this doesn't work properly in all scenarios. Ideally the authenticator simply doesn't block the buttons.

Simulator.Screen.Recording.-.iPhone.15.-.2024-01-24.at.08.40.38.mp4

[calebpollman]

Thanks for the additional details. Will continue looking in to reproduction, in the meantime can you confirm whether using signInWithRedirect without the Authenticator works as expected in your project? Here's some boilerplate React code that can be copied/pasted (you may need to modify the import path of the configuration file):

import React from 'react';
import { Amplify } from 'aws-amplify';
import { getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';

import config from './amplifyconfiguration.json';
Amplify.configure(config);

export default function MyApp() {
  const [isSignedIn, setIsSignedIn] = React.useState(false);
  React.useEffect(() => {
    getCurrentUser()
      .then(() => {
        setIsSignedIn(true);
      })
      .catch(() => {
        setIsSignedIn(false);
      });
  }, []);

  return isSignedIn ? (
    <button
      onClick={() => {
        signOut();
      }}
    >
      Sign Out
    </button>
  ) : (
    <button
      onClick={() => {
        // 'Google` can be replace with other configured providers
        signInWithRedirect({ provider: 'Google' });
      }}
    >
      Sign In
    </button>
  );
}

[calebpollman]

@pmoghaddam Couple follow up questions:

• Are you seeing the issue in local development or just prod?
• What version of aws-amplify is used by the project?

[pmoghaddam]

• was-amplify is 6.0.13
• I see this in "production" (i.e. our staging), and it's not really easy to do with local development

I'd have to tweak my environment to make that possible, so it may take me a while, but will aim to do so. Thank you for looking into this!

[johndebord]

Glad someone brought up this issue.

I've been experiencing this same issue for months.

[calebpollman]

@pmoghaddam Tried to repro the issue by in two apps, one using the code snippet here as well as one with the Authenticator and am not seeing the issue.

Going to transfer this over to the Amplify JS team, hoping they can get you unblocked!

[pmoghaddam]

@calebpollman a few points to not forget regarding reproduction:

1. I am using Authenticator component
2. It must be on iOS (i.e. desktop browsers operate differently)
3. It needs to be a compiled version, not development (e.g. with Vite locally, I can't do it, but its production release version, I can)

Perhaps if you create it, using Authenticator, deploy to an S3/Cloudfront end-point, then on iOS you may be able to see it.

[israx]

hello @pmoghaddam . Are you able to see any keys stored in localStorage after you cancel the OAuth flow ? And can you also refresh the page and see if the issue still persists ?

[pmoghaddam]

@israx Yes.

Basically, from what I can see:

1. localStorage gets set
2. I get redirected
3. I press back, but because of browser's "bfcache" capability, it doesn't re-render the page, it literally shows me what was seeing before redirect, so the local storage is still set.

So I suspect the buttons are deactivated if localStorage is setup, and they are not considering that "bfcache" is not causing a rerender. You can probably listen to "pageshow" event to detect when page is viewing again, rather than a re-render.

[israx]

got it, yeah so I believe that is the issue. Amplify JS might not be able to detect the cancelation of the follow due to this "bfcache" capability. I'll get in touch with the team and have any follow ups.

In the mean time, could please share what localStorage keys are you getting after cancelling the OAuth flow?

[israx]

@pmoghaddam if it is possible, could you attach a video showing the OAuth localStorage keys after cancelling your OAuth flow ?

[cwomack]

After further testing, we think we've isolated the root cause and will be working on a fix. Sending this back over to amplify-ui repo to track progress from here.

Thank you again @pmoghaddam for creating this and getting us rapid feedback/replies!

[calebpollman]

@pmoghaddam Was able to recreate the issue using Firefox and have opened a fix here

[alex-breen]

Has this bug regressed?

I encounter the bug on Chrome and Safari with Authenticator on latest:
"aws-amplify": "^6.0.26",
"@aws-amplify/ui-react": "^6.1.6",

[calebpollman]

@alex-breen Can you please install aws-amplify@latest (currently 6.0.28) and verify if you are seeing the issue still?

[alex-breen]

@calebpollman Yes, I confirmed the issue remains on 6.0.28 [email protected].
Environment:

• Chrome (latest
• Authenticator (@aws-amplify/[email protected])
• Cognito with Identity providers: Cognito user pool directory, Google, SignInWithApple
• Cognito is configured to use a custom domain for auth

[calebpollman]

Thanks for confirming @alex-breen. Have been unable to repro, could you please open a new issue with a small reproduction?

[alex-breen]

@calebpollman - thanks all do that. I notice that it doesn't happen if I host using vite dev. But if I build for production and host using vite preview the buttons freeze. Please LMK if you think I'm missing something obvious.

[alex-breen]

@calebpollman - I created new issue: aws-amplify/amplify-js#13274