Custom UI for AWS Amplify with Authenticator wont start my app after login

Question

I have created my own Custom UI for AWS Amplify. I am following the amplify guide on how I should do this, namely by using Authenticator, overriding the showComponent() methods of 'SignIn' and 'RequireNewPassword'. This all works well. I can log in and change my password. My issue is I cannot for the life of me get my app default route to work after logging in.

I use the AppWithAuth common setup:

export default class AppWithAuth extends React.Component<{}, { authState: string }> {
  classes: any;
  constructor(props) {
    super(props);
    this.state = { authState: '' };
    this.handleAuthStateChange = this.handleAuthStateChange.bind(this);
  }

  handleAuthStateChange(state) {
    this.setState({ authState: state });
  }

  render() {
    return (
        <div>
          {this.state.authState === 'signedIn' ? (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <App />
            </Authenticator>
          ) : (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <ChangePassword {...this.props} />
              <Login override={SignIn} {...this.props} />
            </Authenticator>
          )}
        </div>
    );
  }
}

Login extends SignIn and only shows when this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];

ChangePassword extends RequireNewPassword and only shows when this._validAuthStates = ['requireNewPassword'];

Both of those paths behave as expected. It's the next step that has me stumped.

This is my App Class:

import React from 'react';
import { AuthPiece } from 'aws-amplify-react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
...

interface AppProps {
  authState?: any;
}
export default class App extends AuthPiece<AppProps, {}> {

  constructor(props) {
    super(props);
    this._validAuthStates = ['signedIn'];
  }

  showComponent() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route component={LoggedIn} />

            ...bunch of routes

          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

My understanding is by setting this._validAuthStates = ['signedIn']; , it should render my App (according to https://aws-amplify.github.io/docs/js/authentication#show-your-app-after-sign-in )

Does anyone know what I am doing wrong? It seems to completely ignore the App component. Should I be extending AuthPiece?

Cheers

Update Updated the AppWithAuth.tsx I seem to have tracked it down to the router and how it behaves. If I simply render a simple react page, it's fine, otherwise it seems to redirect, but not load the page I want.

Answer 1

@here so it appears I was doing it right, the issue was in the way I had set up my react components and stateless components and how I was talking to them with React Router. If it helps, the above is working code for custom UI in amplify authenticator.