Authenticator.Provider useAuthenticator hook does not display Sign In UI after signOut is performed

[scorobogaci]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

eu-central-1

Please describe your bug.

When using <Authenticator.Provider> useAuthenticator hook does not render the Sign In UI after signOut is invoked(even though it does sign out the user)
Reference : https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced

What's the expected behaviour?

When signOut method from useAuthenticator user should be logged out and Sign In UI should be presented

Help us reproduce the bug!

Try to use the samples as described here : https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced

Code Snippet

import {useEffect, useState} from "react";
import type {Schema} from "../amplify/data/resource";
import {generateClient} from "aws-amplify/data";
import {Authenticator, useAuthenticator} from "@aws-amplify/ui-react";
import '@aws-amplify/ui-react/styles.css'

const client = generateClient<Schema>();

function App() {

    const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

    useEffect(() => {
        client.models.Todo.observeQuery().subscribe({
            next: (data) => setTodos([...data.items]),
        });
    }, []);

    function createTodo() {
        client.models.Todo.create({content: window.prompt("Todo content")});
    }

    return (
        <Authenticator.Provider>
            <main>
                <h1>My todos</h1>
                <button onClick={createTodo}>+ new</button>
                <ul>
                    {todos.map((todo) => (
                        <li key={todo.id}>{todo.content}</li>
                    ))}
                </ul>
                <SampleComponent></SampleComponent>
                <div>
                    🥳 App successfully hosted. Try creating a new todo.
                    <br/>
                    <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
                        Review next step of this tutorial.
                    </a>
                </div>
            </main>
        </Authenticator.Provider>
    );
}

const SampleComponent = () => {
    const {user, signOut} = useAuthenticator((context) => [context.user]);
    return (
        <>
            <div>Hello {user?.signInDetails?.loginId}</div>
            <button onClick={signOut}></button>
        </>
    )
}

export default App;

Console log output

No response

Additional information and screenshots

package.json

{
  "name": "amplify-vite-react-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.2.0",
    "aws-amplify": "^6.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.1.1",
    "@aws-amplify/backend-cli": "^1.2.4",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "aws-cdk": "^2.138.0",
    "aws-cdk-lib": "^2.138.0",
    "constructs": "^10.3.0",
    "esbuild": "^0.20.2",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "tsx": "^4.7.2",
    "typescript": "^5.4.5",
    "vite": "^5.2.0"
  }
}

[scorobogaci]

Shall the signOut automatically redirect the user to SignIn?

The Authenticator component should handle the sign-in and sign-out flow automatically. When you call signOut(), it logs the user out, and the Authenticator component should re-render the page and present the login screen (this is not presented)

[scorobogaci]

So sorry, I missed this part

Authenticator has to be rendered so wrapping everything in Authenticator solved the problem

import {useEffect, useState} from "react";
import type {Schema} from "../amplify/data/resource";
import {generateClient} from "aws-amplify/data";
import {Authenticator, useAuthenticator} from "@aws-amplify/ui-react";
import '@aws-amplify/ui-react/styles.css'

const client = generateClient<Schema>();

function App() {

    const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

    useEffect(() => {
        client.models.Todo.observeQuery().subscribe({
            next: (data) => setTodos([...data.items]),
        });
    }, []);

    function createTodo() {
        client.models.Todo.create({content: window.prompt("Todo content")});
    }

    return (
        <Authenticator.Provider>
            <Authenticator>
                <main>
                    <h1>My todos</h1>
                    <button onClick={createTodo}>+ new</button>
                    <ul>
                        {todos.map((todo) => (
                            <li key={todo.id}>{todo.content}</li>
                        ))}
                    </ul>
                    <SampleComponent></SampleComponent>
                    <div>
                        🥳 App successfully hosted. Try creating a new todo.
                        <br/>
                        <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
                            Review next step of this tutorial.
                        </a>
                    </div>
                </main>
            </Authenticator>
        </Authenticator.Provider>
    );
}

const SampleComponent = () => {
    const {user, signOut} = useAuthenticator((context) => [context.user]);
    const logoutUser = async () => {
        await signOut();
    }
    return (
        <>
            <div>Hello {user?.signInDetails?.loginId}</div>
            <button onClick={logoutUser}></button>
        </>
    )
}

export default App;