プログラミングに役立つ情報をメモしています

AWS CognitoとReact Nativeによるユーザ認証機能のフル実装

AWS Cognitoによるユーザ認証を行うサンプルアプリをReact Nativeで作成しました。

AWS Cognitoでのユーザ認証に最低限必要な機能をすべて実装しています。

  • サインイン
  • サインアップ
  • 認証コード入力
  • 認証コード再送
  • サインアウト
  • パスワード変更

ソースコード

スクリーンショット

  • サインイン画面

sc

  • サインアップ画面

sc

  • 認証コード入力画面

sc

  • サインイン後のホーム画面

sc

  • サインアウトとパスワード変更

sc

react-navigation-fluid-transitionsによるUIアニメーション

こちらのGithubページを見ると一目瞭然なのですが、UIコンポーネントを画面間で擬似的に共有することにより、非常に滑らか(fluid)な画面遷移アニメーションを実装できます。このアニメーションを導入すると、UXがかなり高くなるので、非常におすすめです。

このような動きをします。

Image from Gyazo

アプリを動かす方法

アプリを動かすには、任意のAWS環境を使って数ステップの設定作業が必要です。

まずリポジトリをcloneしてyarn installします。

次に、AWS ConsoleのMobile Hubの管理ページで、アプリを作成します。

Image from Gyazo

アプリを作成したら、Backend FeaturesのUser Sign-Inを追加します。

Image from Gyazo

AWS Mobile Hubの管理ページでアプリのapp-config.zipをダウンロードします。

Image from Gyazo

app-config.zipに含まれるaws-exports.jsをmobile-auth/src/ディレクトリにコピーし、アプリをシミュレータで実行します。

まとめ

AWS CognitoとReact Nativeを使ってユーザ認証機能をすべてゼロから実装するのは割と手間です。

ログインやユーザ登録など、どのアプリでも必要な機能なので、いずれはnode moduleにして共通化したいところですね。