useAuthenticator does not respond to Authentication events

[kyokosdream]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] 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?

Create React App 5 / Webpack 5

Please describe your bug.

I'm not sure why issues continue to be closed or left unaddressed that are related to the following issues.

https://github.com/aws-amplify/amplify-js/issues/2562#issuecomment-1136277215 https://github.com/aws-amplify/amplify-ui/issues/1497

My Use Case

Custom login form to authenticate with AWS Amplify. This is really not an advanced use case.

Attempt 1

When App.js mounts, check to see if there is an existing persisted authenticated user with Auth.currentAuthenticatedUser(). If there is, show the protected section of the application.

If there is not an existing persisted authenticated user, display my custom authentication form.

Listen for Auth Hub events to respond to authentication events.

Failure

There is no way to log the user in after they confirm their email address. The username and password must be re-submitted, requiring that they must be insecurely stored in the client browser.

Attempt 2

The pre-made Amplify UI Authenticator component does not suffer from the drawback associated with Attempt 1. When you confirm your email address while using the pre-built Authenticator component, the user is automatically logged in.

Thus, I believed that I could take advantage of this fact and the official documentation provided in Authenticator headless usage.

So I wrapped my App in an Authenticator.Provider as instructed and attempted to use the useAuthenticator hook.

Failure

The application does not respond to any authentication events (confirming email with code, signing-in, etc).

What's the expected behaviour?

The Authentication.Provider authStatus should change to authenticated when a user calls Auth.signIn().

Help us reproduce the bug!

1. Create React App
2. Wrap <App> inside an <Authenticator.Provider> in index.js (I am not using <Authenticator>)
3. Call Auth.signIn() from custom form
4. App fails to update authStatus from useAuthenticator hook

Code Snippet

App.js

function App() {
  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
  return (
    <>
      {authStatus !== "authenticated" ? (
          <LoginRegister />
      ) : (
        <MainApplication />
      )}
    </>
  );
}

index.js

ReactDOM.render(
  <Authenticator.Provider>
      <App />
  </Authenticator.Provider>,
  document.getElementById("root")
);

Additional information and screenshots

[ErikCH]

Hi @kyokosdream !

You are correct, right now we only listen to a few hub events internally in our xState machine, including signOut, token refresh and token refresh failure.

Our future roadmap includes more customization of the Authenticator. Including allowing you to override every component, and then use the useAuthenticator hook to tie back into our xState machine. You can do some of that now, as you see in our headless section, but it's limited. We'll also add all the hub events in. That way you can still use the Authenticator but make a completely customizable login experience for your customers.

I'll add this to our roadmap of feature requests.

[BBopanna]

@ErikCH - Please take note of one more around the @aws-amplify/ui-react - Newer @aws-amplify/ui-react component does not have option to pass fully customized SignIn, SignUp and other auth components

Any comments on why this feature of providing fully customized SignIn, SignUp etc which existed with aws-amplify-react is removed in @aws-amplify/ui-react and how does AWS intends that existing customers migrate to this new package with loss of this feature ?

[martinrojas]

@ErikCH On a related note to this issue. As far as I can tell, the 'unauthenticated' Auth state is never fired. Following the documentation in the Authentication check.

As a clarification, the authStatus will turn to configuring and will remain in that state if the user is not logged in.

If I had a wrapper element, I would expect the auth status to say unauthenticated if the user isn't logged in. However, it just stays in configuring state, and nothing happens. An application gets stuck in a loading state if the user is not authenticated.

import { Navigate, useLocation } from 'react-router-dom';

import Loading from './Loading';
import React from 'react';
import { useAuthenticator } from '@aws-amplify/ui-react';

function RequireAuth({ children }) {
	const location = useLocation();
	const { authStatus } = useAuthenticator((context) => [context.authStatus]);

	// Log route and user to console
	console.log('authStatus:', authStatus);

	if (authStatus === 'unauthenticated') {
		return <Navigate to="/" state={{ from: location }} replace />;
	}

	if (authStatus === 'configuring') {
		return <Loading sx={{ height: '100vh' }} />;
	}

	return children;
}

export default RequireAuth;

[ErikCH]

Hi @martinrojas !

Did you surround your app with the Authenticator.Provider?

And are you signing in with Auth.signIn or are you using the Authenticator to sign in that way? If you are using the Authenticator to sign in, then the authStatus should work.

[martinrojas]

@ErikCH The app is surrounded by the Authenticator.Provider.

For the actual sign in button.

<Button
	variant="contained"
	startIcon={<GoogleIcon />}
	onClick={() =>
		Auth.federatedSignIn({
			provider: CognitoHostedUIIdentityProvider.Google,
		})
	}
>
	Sign in with Google
</Button>

As mentioned, everything works as expected if the user is signed in. It is when the user is not logged in that there will be a an update to configuring and just remain there.

[ErikCH]

Hi @martinrojas !

We've identified a bug where if you use Auth.* outside of the Authenticator, the authStatus and route may not be in sync.

As a workaround until we get this fixed, have you tried using the built in social providers? Instead of creating your own button?

https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#social-providers

[hanna-becker]

Adding on to this, we use the Angular authenticator and observe the authStatus in the authenticator not being synced when using Auth.signOut() in another component. Would be nice if this could be fixed for both React and Angular.

[reesscot]

hi @hanna-becker, the logic is shared between platforms, so authStatus should be updated when Auth.signOut() is called in another component. What version of the @aws-amplify/ui-angular are you currently using?

Would you mind opening a new ticket for Angular, as this one is tracking more of a headless use case without the Authenticator UI components.

[hanna-becker]

Hi @reesscot, we were on @aws-amplify/ui-angular 3.2.6. I just upgraded to latest (3.2.9) and my issue is fixed there. Thanks!

[anoopjkottoor]

We are too stuck because of this issue. I humbly request to fix this as soon as possible.

@calebpollman How long will it take to fix this?. We are currently nearing UAT and blocked because of this.

[tmokmss]

At least "@aws-amplify/ui-react": "^2.19.0" does not have this problem... Hopefully it will be fixed also in the latest version soon.

[calebpollman]

@anoopjkottoor We merged a commit (https://github.com/aws-amplify/amplify-ui/pull/3806) that updates useAuthenticator.authStatus on sign in events performed directly via Auth.signIn. You can try it out by installing @aws-amplify/ui-react using the next tag:

npm install @aws-amplify/ui-react@next