'AmplifySignOut' is not exported from '@aws-amplify/ui-react'

Question

I've run into this issue today, and it's only started today. Ran the usual sequence of installs and pushes to build the app...

npx create-react-app exampleapp
npm start
amplify init
amplify add api
Amplify push
npm install aws-amplify @aws-amplify/ui-react
amplify add auth
amplify push

Make my changes to the index.js and ap.js as usual..

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports'

Amplify.configure(aws_exports);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js:

import React from 'react';
import './App.css';
import { withAuthenticator, AmplifySignOut, Authenticator } from '@aws-amplify/ui-react';
import { Amplify, Auth } from 'aws-amplify';
import awsExports from './aws-exports';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

function App() {
   return (
    <div>
      <h1>Help!</h1>
      <AmplifySignOut />
    </div>
   );
}

export default withAuthenticator(App);

If I add AmplifySignOut it throws the error: 'AmplifySignOut' is not exported from '@aws-amplify/ui-react'

If I remove AmplifySignOut, then the login appears but it has no formatting as per the Amazon Authentication style (orange button etc.).

I can add import '@aws-amplify/ui-react/styles.css'; and I get some styling back, but I really need things back to how the were working. Any help would be appreciated!

Answer 1

I am following along with the Amplify tutorial and hit this roadblock as well. It looks like they just upgraded the react components from 1.2.5 to 2.0.0 https://github.com/aws-amplify/docs/pull/3793

Downgrading ui-react to 1.2.5 brings back the AmplifySignOut and other components used in the tutorials.

in package.json:

"dependencies": {
    "@aws-amplify/ui-react": "^1.2.5",
   ...
}

Alternatively, you'll need to look into the version 2 docs to find suitable replacements: https://ui.docs.amplify.aws/components/authenticator

Answer 2

Here's an example incorporating a recent version of ui-react (v2.1.2) and the updated docs from ui.docs.amplify:

import React from 'react';
import './App.css';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div className="App">
          <p>
            Hey {user.username}, welcome to my channel, with auth!
          </p>
          <button onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  );
}

export default App;

Answer 3

If you are following this hands-on https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/?e=gs2020&p=build-a-react-app-three and are stuck in module 4 after updating the front end code, then do this:

To make the code compatible with the latest version of ui-react v2.1.3, replace the code in the module with this one:

import React, { useState, useEffect } from 'react'; 
import './App.css'; import { API } from 'aws-amplify'; 
import { withAuthenticator } from '@aws-amplify/ui-react'; 
import { listNotes } from './graphql/queries'; 
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';

const initialFormState = { name: '', description: '' }

function App() {   const [notes, setNotes] = useState([]);   const [formData, setFormData] = useState(initialFormState);

  useEffect(() => {
    fetchNotes();   }, []);

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    setNotes(apiData.data.listNotes.items);   }

  async function createNote() {
    if (!formData.name || !formData.description) return;
    await API.graphql({ query: createNoteMutation, variables: { input: formData } });
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState);   }

  async function deleteNote({ id }) {
    const newNotesArray = notes.filter(note => note.id !== id);
    setNotes(newNotesArray);
    await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});   }

  return (
    <div className="App">
      <h1>My Notes App</h1>
      <input
        onChange={e => setFormData({ ...formData, 'name': e.target.value})}
        placeholder="Note name"
        value={formData.name}
      />
      <input
        onChange={e => setFormData({ ...formData, 'description': e.target.value})}
        placeholder="Note description"
        value={formData.description}
      />
      <button onClick={createNote}>Create Note</button>
      <div style={{marginBottom: 30}}>
        {
          notes.map(note => (
            <div key={note.id || note.name}>
              <h2>{note.name}</h2>
              <p>{note.description}</p>
              <button onClick={() => deleteNote(note)}>Delete note</button>
            </div>
          ))
        }
      </div>
      <withAuthenticator />
    </div>   ); }

export default withAuthenticator(App);

Answer 4

I also have same issue but below command worked perfectly for me.

sudo npm install aws-amplify @aws-amplify/ui-react@v1

Answer 5

I could not resolve the AmplifySignOut but , here's what i found looking at a previuos module's code. In App.js change

function App() {...}

signature to

function App({ signOut }) {...}

and use html below to add a signout button.

<button onClick={signOut}>Sign out</button>

this way you don't need to use any previous version library .