Clarification needed on how to prevent Authenticator from pre-rendering component

[flyingace]

The documentation isn't clear on how to configure an Authenticator component so that the content it wraps is only rendered after a successful login.

The documentation can be found here: https://aws-amplify.github.io/docs/js/authentication#show-your-app-after-sign-in

Specifically, the part of this that isn't clear is

Using the options above, to control the condition for Authenticator to render App component, simply set _validAuthStates property:

this._validAuthStates = ['signedIn'];

Then, in the component’s constructor, implement showComponent(theme) {} in lieu of the typical render() {} method.

Where is this._validAuthStates=['signedIn'] supposed to be written/set? Additionally, where can any further documentation on swapping showComponent(theme) {} instead of render() be found?

Any help would be appreciated. In fact, if someone can provide clarification I will submit a PR that updates the documentation.

[amirmishani]

Yeah it's not clear. If you're just looking to render your own component (let's say <App/>) after a successful login then it's simple and you can do something like this:

import React, { Component } from 'react';
import { Authenticator } from 'aws-amplify-react';
import awsConfig from './aws-exports';
import App from './App';

class AppWithAuth extends Component {
  state = {
    authState: ''
  };

  render() {
    return (
      <div>
        <Authenticator
          amplifyConfig={awsConfig}
          onStateChange={authState => this.setState({ authState })}
        >
          {this.state.authState === 'signedIn' && <App />}
        </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

Remember that authData will be passed to your <App/> with all of your Cognito user object and you can use it inside your App component for example props.authData.attributes will contain all of your user info.

One more thing, you don't need amplifyConfig prop if you've already setup Amplify.configure(awsConfig) per Amplify docs.

[alenpesikan]

This works only with default Authenticator. If hideDefault is set to true, it throws error in the Authenticator component : Cannot read property 'override' of undefined

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[villarama37]

I think I figured it out. It assumes that your App inherits from AuthPiece (https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/AuthPiece.jsx).

import { Authenticator, AuthPiece } from 'aws-amplify-react';

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

  showComponent(theme) {
    return (
      <div className="App">
      </div>
    );
  }
}

class AppWithAuthenticator extends React.Component {
  render() {
    return (
      <Authenticator >
        <App />
      </Authenticator>
    );
  }
}

export default AppWithAuthenticator;
}

[azatoth]

This is still an issue; Do I have to create a new ticket for this, as it's been marked stale?

[EliotSlevin]

Still finding this very confusing. I'm also confused why withAuthenticator can't pass down the full list of props to the Authenticator component it creates itself. All I need to do is hide signup, and setting up a full Authenticator implementation just to do that feels like a lot of work - when there's already hideGreetings

[tonydatw]

Does anyone know how to do it with functional component? It's been 2 years now but documentation is still confusing.

[dnishiyama]

@tonydatw did you ever find an answer on this? I'm trying with a functional component and also struggling

[tonydatw]

@tonydatw did you ever find an answer on this? I'm trying with a functional component and also struggling

Solved it by creating a login/signup screen flow, then wrapping it in the <Authenticator> </Authenticator> component and finally wrapping everything in a <NavigationContainer> </NavigationContainer> :

return (
     <NavigationContainer >
      <Authenticator  authState="signIn">
        <StatusBar/>
        <AuthScreens/>
      </Authenticator>
     </NavigationContainer>
  )

You can assign props "signedIn" to the screen that you want rendered after successfull login/signup, in AuthScreens.