Expose the Auth state to outside world

Is your feature request related to a problem? Please describe.

WRITE:

When using UI components (in React), I need to customize some aspect of the UI further than basic changes. For example I use the secondary-footer-content web component slot of Sign-In component to create a custom Forgot password link. But to override it with a link I build myself I need to have a way to change the authState without having access to this of the UI component:

<AmplifySignIn slot="sign-in">
                <span slot="secondary-footer-content">
                  <amplify-button
                    variant="anchor"
                    onClick={() => this.updateAuthState(AuthState.ForgotPassword)}
                  >
                    {"Forgot your password?"}
                  </amplify-button>
                </span>
</AmplifySignIn>

note: this here is my app this not the AmplifySignIn this, therefore I cannot write the same code than in https://github.com/aws-amplify/amplify-js/blob/main/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx and especially I cannot do this.handleAuthStateChange(AuthState.ForgotPassword)

READ:

Today to read the current AuthState I have to listen onAuthUIStateChange and persist the information of the authState myself (in my app state for example). It would have been easier to have access to the authstate directly.

Describe the solution you’d like

I like to have a simple way to invoke a AuthState change from outside. I found a workaround (see alternative) but this is not ideal. Ideally I like to have dispatchAuthStateChangeEvent exported and usable from outside, as well as constants (in particular UI_AUTH_CHANNEL and AUTH_STATE_CHANGE_EVENT)

For the read, not sure what can be done? A static variable exposed? I tried using React Ref to access the information but it does not work.

Describe alternatives you’ve considered I use the following workaround (which is inelegant and not safe):

import { Hub } from '@aws-amplify/core';

class App extends React.Component {

updateAuthState(nextAuthState){
    Hub.dispatch('UI Auth', {
      event: 'AuthStateChange',   <--- here is the trick I hardcoded the CHANNEL values
      message: nextAuthState
    });
  }

render() {
    return (
       <AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }} initialAuthState={AuthState.SignIn}>
           <AmplifySignIn usernameAlias="email" slot="sign-in">
              <span slot="secondary-footer-content">
                  <amplify-button
                    variant="anchor"
                    onClick={() => this.updateAuthState(AuthState.ForgotPassword)}
                  >
                    {"Forgot your password?"}
                  </amplify-button>
                </span>
              </AmplifySignIn>

Hardcoding constants is risky and inelegant.

[wlee221]

Hello @xavierraffin, thank you for your detailed feature request! Looking over this now. This is something we want to support in our @next release as well!

Totally agreed on difficulty with reading and writing authState. Adding this to our new Authenticator GA milestone to track this.

On the new Authenticator, we’ll provide mechanisms that provide you access to readonly authState and helpers that’ll enable you to transition between different authStates. For React, it’ll likely be a hook:

const { authState, toForgotPassword } = useAuthenticator(); 

which is a one-liner instead of onAuthUIStateChange callback that we used to have!

Edit: didn’t read your thread well! Apologies.

[xavierraffin]

An additional feature will be to have access to current Auth.state. This way it is simpler for the developer to hide/display custom components based on that.