AWS Amplify - How to render components after sign in

Question

I have an AWS Amplify app using React. I want to be able to only load (or reload) a TaskList component only when the user has successfully signed in. However, the component gets rendered from the very beginning when page loads and when user fills up form and gets signed up it won't reload. I have been trying multiple workarounds but I can't see how to make my component depend on a successful login. I rely on the default Amplify authenticator functions to sign the user in against Cognito.

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
      <TaskList />
    </div>
  </AmplifyAuthenticator>
);

Also see https://github.com/aws-amplify/amplify-js/issues/5825. That might help — joseprupi, May 21 '20 at 13:14

jbernal · Accepted Answer · 2020-04-26T17:24:20.217

I managed to solve it using hints given in this answer AWS Amplify: onStatusChange then render main page.

Basically, I changed my App component to return only sign in form or the whole up based on auth state change.

const App = () => {
    const [authState, setAuthState] = useState('');

    function handleAuthStateChange(state) {
        if (state === 'signedin' || state === 'signedout') {
            setAuthState(state);
        }
    }

    return (
      <div>
        { authState !== 'signedin' ?
        <AmplifyAuthenticator>
            <AmplifySignIn handleAuthStateChange={handleAuthStateChange} slot="sign-in"></AmplifySignIn>       
        </AmplifyAuthenticator> 
        :
        <div>
           My App
           <AmplifySignOut handleAuthStateChange={handleAuthStateChange} slot="sign-out"/>
           <TaskList />
        </div>
        } 
      </div>  
    );
}

score 4 · Answer 2 · answered May 23 '20 at 12:16

This is how I solved a similar issue to manage the states. I was having some problems as it didn't seem to dispatch the events afterwards.

From https://github.com/aws-amplify/amplify-js/issues/5825

import React from 'react';

import {  AmplifyAuthenticator, AmplifySignOut, AmplifySignUp, AmplifySignIn} from '@aws-amplify/ui-react';
import { onAuthUIStateChange } from '@aws-amplify/ui-components'


const Panel = () => {

    const [setAuthState] = React.useState();

    React.useEffect(() => {
        return onAuthUIStateChange(newAuthState => {
            if(newAuthState === 'signedin'){
                // Do your stuff
            }
            setAuthState(newAuthState)
        });
    }, []);


    return(
            <AmplifyAuthenticator>
                <AmplifySignIn headerText="Sign In" slot="sign-in"/>
                <AmplifySignUp slot="sign-up" formFields={[
                    {type: 'username'},
                    {type: 'email'},
                    {type: 'password'}
                ]}></AmplifySignUp>

                <AmplifySignOut></AmplifySignOut>
            </AmplifyAuthenticator>
    )

}

export default Panel;

AWS Amplify - How to render components after sign in

2 Answers2