Popular posts

Hey Victoria, Thanks a ton for the article. I followed it to the 'T' and it almost got me there. I had to do minor tweaks to get this to work for the latest version aws amplify.

I am listing the tweaks I had to do to get this working in my case. Hopefully, it helps someone who is looking for leads like me:

1) I had to wrap Amplify inside {} to get it to work. Else I got an import error on app startup

import { Amplify } from 'aws-amplify';

2) I had to import the css explicitly since it is no longer part of the amplify dist I suppose:

import '@aws-amplify/ui-react/styles.css';

3) AmplifySignOut is no longer supported. I had to use Authenticator and wrap the code within { signOut, user }. For example:

return (
    <Authenticator>
      {({ signOut, user }) => (
        <div className="App">
          <Alert variant="success">
            <Alert.Heading>Hey, {user.username}</Alert.Heading>
            <p>
              Thanks for using abcdef &#10084;
            </p>
            <hr />
            <p className="mb-0">
              Would you like to sign out from this device?
            </p>
          </Alert>
          <button className="btn btn-info mr-2" onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  );

Other than these, the tutorial worked like a charm. Keep rocking :)