AWS amplyfy-jsで Authenticator を利用するときの勘所

import { withAuthenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native';
...
export default withAuthenticator(App);

With React

To create React applications with AWS SDK, you can use AWS Amplify Library which provides React components and CLI support to work with AWS services.
With Angular

Due to the SDK's reliance on node.js typings, you may encounter compilation issues when using the typings provided by the SDK in an Angular project created using the Angular CLI.

To resolve these issues, either add "types": ["node"] to the project's tsconfig.app.json file, or remove the "types" field entirely.

AWS Amplify Library provides Angular components and CLI support to work with AWS services.

return new Promise((resolve, reject) => {
  this.userPool.signUp(username, password, attributes, validationData, function(err, data) {
    if (err) {
      dispatchAuthEvent('signUp_failure', err);
      reject(err);
    } else {
      dispatchAuthEvent('signUp', data);
      resolve(data);
    }
  });
});

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

<Authenticator hideDefault={true}>
  <SignIn />
  <MyCustomSignUp override={SignUp}/> {/* to tell the Authenticator the SignUp component is not hidden but overrided */}
</Authenticator>


// この程度ならfunctionalで良い気がするけど
class MyCustomSignUp extends SignUp {
  constructor() {
    super();
  }

  gotoSignIn = () => {
    // これで飛ぶ
    this.props.onStateChange('signIn'); 
  }

  render() {
    return (
      <div>
        {/* signUp状態だとrender */}
        { this.props.authState === 'signUp' && 
        <div>
          My Custom SignUp Component
          <button onClick={this.gotoSignIn}>Goto SignIn</button>
        </div>
        }
      </div>
    );
  }
}

// この程度ならfunctionalで良い気がするけど
class MyAuthFlowView extends SignUp {
  constructor() {
    super();
    // これで 'myAuthFlowView' を定義できた (かぶらないように注意！)
    this._validAuthStates = ['myAuthFlowView'];
  }
  render () {
    // 例えば個人情報同意viewとか
  }
}
:

function otherView {
  render() {
    return (
      <div>
        <div>
          My Custom SignUp Component
          <button onClick={()=>this.props.onStateChange('myAuthFlowView')}>Goto SignIn</button>
        </div>
        }
      </div>
    );
  }
}

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

<Authenticator hideDefault={true}>
  <SignIn />
  <MyCustomSignUp override={SignUp}/> {/* to tell the Authenticator the SignUp component is not hidden but overrided */}
</Authenticator>


// この程度ならfunctionalで良い気がするけど
class MyCustomSignUp extends SignUp {
  constructor() {
    super();
  }

  gotoSignIn = () => {
    const xmas = {
      kanojo: false,
      schedule: false,
      twitter: true,
      colaLitre: 10,
      chicken: '2kg',
      takeuchiMariya: 'every year'
    };
    // これで渡せる
    this.props.onStateChange('signIn', xmas);
  }

  render() {
    return (
      <div>
        {/* signUp状態だとrender */}
        { this.props.authState === 'signUp' && 
        <div>
          My Custom SignUp Component
          <button onClick={this.gotoSignIn}>Goto SignIn</button>
        </div>
        }
      </div>
    );
  }
}

import { AmplifyTheme } from 'aws-amplify';

const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });

<Authenticator theme={MyTheme} />