aws-amplify-reactでログインページ周りをカスタマイズする事前準備
公式ドキュメントが「こっちでコンポーネント用意してるから、それ使ってな」感満載なので、脇道にそれた使い方するとコアコード読まないといけないのつらいっす。 ということでコード読み次第覚書を随時追加していきます。 基本的な使 […]
目次
公式ドキュメントが「こっちでコンポーネント用意してるから、それ使ってな」感満載なので、脇道にそれた使い方するとコアコード読まないといけないのつらいっす。
ということでコード読み次第覚書を随時追加していきます。
基本的な使い方
「HOC用意してあるから、それ使うとかんたんにやれるぜ」という作りになっています。
import { withAuthenticator } from 'aws-amplify-react';
const App = () => (
<div>Welcome to jungle</div>
);
export default withAuthenticator(App);
これだけで、ログイン画面などがあなたのアプリへ導入できます。やったね。
ログインページをカスタマイズしたい
とはいえ自社サービスでは各ページをカスタマイズしたくなります。そんなときはwithAuthenticator
の実装を持つコンポーネントを作ります。
import { Authenticator, SignIn } from 'aws-amplify-react';
const Content = () => (
<div>Welcome to jungle </div>
);
const MySignIn = ({authState, authData}) => (
<div>login page</div>
)
class App extends Component {
constructor(props) {
super(props)
this.state = {
authState: props.authState || null,
authData: props.authData || null
}
}
change = (state, data) => this.setState({ authState: state, authData: data })
render() {
if (this.state.authState === 'signedIn') {
return <Content />
}
return (
<Authenticator hide={[SignIn]} onStateChange={this.change}>
<MySignIn {...this.state} />
</Authenticator>
)
}
}
export default withAuthenticator(App);
Authenticator
にhide
というプロパティがあるので、そこに使わないコンポーネントを入れておきます。
全部使わない場合はhideDefault={true}
という引数をいれておけばよいでしょう。
authStateとauthData
authStateには文字列が入ります。ログイン済みの場合はsignedIn
、ログインが必要な場合はsignIn
、MFAなどで確認が必要な場合はconfirmSignIn
が入ります。実装を見る限り、authStateを子コンポーネントに渡してログイン状態を判別しろということの様子です。こんな感じですね。
authDataはログインしていない状態の場合はundefinedになります。ログイン済みの場合にCognitoUserオブジェクトが入って来ます。JWT tokenなどの値が入っているので、CognitoのAPIに直接アクセスしたい時に使えそうです。(多分)
ちなみにこの2つの値は、Authenticator
の子コンポーネントにはデフォルトで渡されるようになっています。こんな感じです。React.cloneElement
なんてものあるんですね。