AWS Amplify - React Authenticator 组件不可见

Question

Building an Authentication UI with https://aws-amplify.github.io/media/ui_library

import { Authenticator } from 'aws-amplify-react'
import Amplify from 'aws-amplify';

Amplify.configure(aws_exports);

const AppWithAuth = () => (
 <Authenticator />
)

https://aws-amplify.github.io/docs/js/authentication#using-the-authenticator-component-directly

Using React Developer Tools to inspect, Components are visible in React View

But not in DOM view of Browser

so, the various components of Authenticator like Greetings and SignIn are not showing up in DOM. How do you make them visible in Browser

[Auth and AuthData state after logging in] 4

[Console.logs] 5

Answer 1

The components render UI or nothing base on authState property. In your case authState is signedIn . So only Greetings would render some UI.

Answer 2

the various components of Authenticator like Greetings and SignIn are not showing up in DOM.

Seeing that your authState is currently at signedIn , you are literally already signed in. That's why the <SignIn> component is not visible/rendered. If you want to see the <SignIn> component working, your authState should be in "signIn" value, and you can try to hard-code it as an initial state for seeing it in action.

import React from "react";
import { Authenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const AppWithAuth = () => (
  <Authenticator
    // Optionally hard-code an initial state
    authState="signIn"
  />
);

As for the <Greetings> it should show up if your state is signedIn . You can alternatively try using the withAuthenticator Higher Order Component.

import React from "react";
import { withAuthenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const App = () => {
  return (
    <div>
      <h1>Hello world!</h1>
      <p>This is your own App Component</p>
    </div>
  );
};

export default withAuthenticator(App, {
  // Render a sign out button once logged in
  includeGreetings: true
});