Quick Question: Is there a way to manually change Authenticator Sign In/Sign Up state

[xitanggg]

Which Category is your question related to? Auth

What AWS Services are you utilizing? Authenticator Component

Provide additional details e.g. code snippets I am using the Authenticator Component <Authenticator /> for Sign In and Sign Up. I also created a navigation bar on top of the page with "Sign In" and "Sign Up" tabs. Is there a way to change the state to the Authenticator Component in code when the tab is clicked?

A prompt response would be much appreciate. If it doesn't have such method, I can just rewrite my own Authenticator state management logic. If it does however, I would appreciate knowing soon before I make the change.

[xitanggg]

Here is a quick workaround I thought about if you use <Authenticator /> with your custom SignIn, SignUp components and use ReactRouter for page navigation.

In the navigation bar, when the Sign In tab is click, redirect user to '/signin'. And when the Sign Up tab is click, redirect user to '/signup'

At your route module, redirect /signin to /login (or how your path is set up for Authenticator component). The key is to pass the loginState.

<Route exact path='/signin'>
    <Redirect
        to={{
            pathname: '/login',
            state: { loginState: 'signIn' }
        }}
    />
</Route>
<Route exact path='/signup'>
    <Redirect
        to={{
            pathname: '/login',
            state: { loginState: 'signUp' }
        }}
    />
</Route>

In your custom SignIn, SignUp compoent, the first lien of showComponent is to check if there is loginState, if so, trigger super.changeState.

showComponent(theme) {
    if (history.location.state.loginState) {
        super.changeState(history.location.state.loginState);
        history.replace('/login', { loginState: null });
    }
}

[jordanranz]

Hey @xitanggg, this is challenging to do with the aws-amplify-react package. We have just released a new Authenticator UI component that might make this a bit easier as it uses Hub to listen for Authenticator UI events. This part of it however is not yet documented.

Can you provide a snippet of the code with Authenticator usage in it? I can follow up using an example with the newly released UI component.

[xitanggg]

Ok. No worries. My workaround works fine so I will use it for now then.

This usage is rather typical app usage, check out Robinhood, LinkedIn and many other popular apps. Basically, you first land on a home page called LandingPage. Then you will have a navigation menu NavMenu on top that lets users choose to either Sign Up or Log In. With currently how the Authenticator is set up, which combines all the Sign Up, Log In components, etc. When a user clicks Sign Up or Log In, they will be redirect to the same page, in my case /login. But there needs to be a way for me to change the state of Authenticator. Currently, Authenticator supports setting initial state but that can only be called once. My NavMenu is not bounded by any element so it won't work if being clicks the second time. My workaround works well in my case by leveraging the history object as a global Hub to transmit information.

<Router history={history}>
    <NavMenu />
        <Switch>
            <Route exact path='/'>
                <LandingPage/>
            </Route>
            <Route exact path='/login'>
                <Authenticator/>
            </Route>
        </Switch>
</Router>

[mauerbac]

Thanks for the feedback @xitanggg . I will share this with the team. Closing this question out.

[github-actions[bot]]

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.