Clarification needed on how to prevent Authenticator from pre-rendering component about docs HOT 10 CLOSED

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;
}

from docs.

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.

from docs.

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

from docs.

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

from docs.

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.

from docs.

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

from docs.

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

from docs.

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

from docs.

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

from docs.

@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.

from docs.