Render base on authentication state, aws-amplify.

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Amplify, { Auth } from 'aws-amplify';
import aws_exports from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.Logger.LOG_LEVEL = 'DEBUG';
Amplify.configure(aws_exports);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { authenticated: false }
  }

  componentDidMount() {
    Auth.currentAuthenticatedUser()
      .then(user => this.setState({ authenticated: true }))
      .catch(err => this.setState({ authenticated: false }));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div>
          { this.state.authenticated? 'In' : 'Out' }
        </div>
      </div>
    );
  }
}

// Auth.signOut();
//export default withAuthenticator(App);
export default App;