CODEWITHSUNDEEP
reactjsaws-amplify
Shorn Jacob
Shorn Jacob

Reputation: 1251

AWS Amplify - React Authenticator Components not visible

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

enter image description here

But not in DOM view of Browser enter image description here

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

Upvotes: 2

Views: 1994

Answers (2)

iomario
iomario

Reputation: 666

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
});

Upvotes: 1

Richard Zhang
Richard Zhang

Reputation: 350

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

Upvotes: 2

Related Questions