aws-amplify-react . Authenticator Component - Signout Button

Question

Following

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

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


Amplify.configure(aws_exports);


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

export default AppWithAuth

I am trying to use the Authenicator component directly. How do I display a signout button once I am logged in.

Tried following https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-02#sign-out-button

import { Authenticator , SignOut} from 'aws-amplify-react'

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

But Signout button is still not visible

Answer 1

It could be because SignOut button is outside App . It probably is rendered but just not visible because of CSS layout.

Note in the tutorial the SignOut button is on Navigator which is inside App .

BTW you don't necessarily need to wrap SignOut button inside Authenticator . Put it on anywhere, then show / hide base on Auth.currentAuthenticatedUser() result.

Answer 2

This will not use the SignOut Component, but is an alternative way of loggin out.You will need to create your own signOut Button.

This is taken from https://aws-amplify.github.io/docs/js/authentication So in Navbar or where ever you want to create your signOut button, you can add:

  signOut = () => {
    Auth.signOut()
    .then(data => console.log(data))
    .catch(err => console.log(err));
  }

  // Then in your render method.
  <button onClick={this.signOut} className="signOutButton">SignOut</button>

It requires that you wrapp your App export using "withAuthenticator"

so fx In your App.js

import React, { Component } from "react";
import { withAuthenticator } from "aws-amplify-react";
class App extends Component {
     ...
}
export default withAuthenticator(App, false);

false here means no sigOut button. If you try it using true you get the Default signOut button.

After this, you can style the button anyway you like. Hope this helps!