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

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 f.x. 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!