Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

 We Are JavaScripters AC 初カキコ...ども...
 本記事は We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018 (https://adventar.org/calendars/2972) の 12/5 担当分の記事です。
 前回は brn さんでした。

 We Are JavaScripters 関連は前から気になっていので書きました。
 ツッコミどころあればコメントください〜。

本記事の目的

  • AWS AmplifyのAuth周りを使ってつまずきそうなポイントをメモ
    • 今後使う予定のある方のつまずきダメージを減らす効果をねらいつつ〜

本記事の前に読んでおくと良いポイント

つまずきポイント

  • そもそもAmplify-jsをどう使っていいか分からない問題
  • 認証フローに自分の作ったcomponentを追加してみる
  • 自分で作ったcomponentをimportしてみたが、自分のcomponentに遷移しない問題
  • component間遷移時のデータをどう渡せば良いか分からない問題
  • Amplify-jsのデフォルトcomponentにオリジナルのデザインをつける

そもそもAWS Amplify-jsそのものがよく分からない問題

  • Authで触ってるとUIを一撃で作ってくれる便利ライブラリと認識しがち
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.
  • promiseについてはなんとなく知っておくと元ソースで仕組みを把握しやすい
    • 結果としてuserPoolのAPIの話なんだなとか追いかけ先が分かる
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);
    }
  });
});

自分の component を追加するけど、別のcomponentに遷移しない問題

  • 例えばオリジナルのサインアップViewを作ったとして
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>
    );
  }
}

  • this.props.authState('移動先'); で移動する
  • 逆向きで自分の component からAuthenticator管理外のとこから帰ってくるときもpropsから引っ張って使うと良い
  • 実はdocsに書いてあります (ただし一番下)

認証フローに自分の作ったcomponentを追加してみる

  • authStateを被らせないように注意
// この程度なら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>
    );
  }
}

component 間遷移時のデータの引っ越し

  • 前述のauthDataをauthStateの後ろにくっつけて渡せる
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>
    );
  }
}

  • 受け取るときは authData というプロパティの子として渡されるので、へたなことすると authData.authData.xmas とかになっちゃうので注意
    • this.props.onStateChange('signIn', this.props.authData); とかしたとき

Amplify-jsのデフォルトcomponentにオリジナルのデザインをつける

  • UIThemeを上書きしようね的なことが書いてある
import { AmplifyTheme } from 'aws-amplify';

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

<Authenticator theme={MyTheme} />
  • https://aws-amplify.github.io/docs/js/authentication#customize-ui-theme

  • とはいえ自分のcomponentもあるし

    • 例えばログイン後ページは自作して、ログイン後からのページ遷移はreact-routerしちゃったり
    • router管理の component はデザインさんと分業してたりするパターン
  • 一番手っ取り早いのはstyle.cssにまとめた方が良いです

    • className はどうせ文字列なのでどうとでもなる
    • alt-css通すならなおのこと
  • 逆にthemeとcssで散らせると管理が厄介になります

    • ましてcomponent内にjson定義してstyle={myStyle}とかで渡すとつらい
    • theme, style.css, component内 styleの3つ建てとかになっちゃう

さいごに

以上、Amplify-jsのつまずきポイントをメモりました。
次回は kei4eva4 さんです。では〜。

plum_shiga
俺がぷらむさんや!! 京都でサラリーマンやっとります。フロントエンドが好きらしいよ。そのくせフロントエンドの記事全然ないやんけ!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした