React Native+Expo+AmplifyでCognito認証を行う

React Native + Expo でも Amplify はサポートされています。

下記記事は、Expo で Amplify を使用する公式の解説になっています。

blog.expo.io

この記事では、React Native + Expo + Amplify で Cognito 認証を行う方法をご紹介します。なお、言語は TypeScript になっています。

まず、Expo をインストールします。

$ npm install expo-cli --global

Expo のプロジェクトを作成します。

$ expo init expo-amplify
$ cd expo-amplify

expo init時、TypeScript の指定をします。詳しくは下記記事を参考にしてください。

www.aruse.net

Amplify のパッケージをインストールします。

$ yarn add aws-amplify aws-amplify-react-native

AWS の設定ができていない場合は下記コマンドを実行しますが、今回はスキップします。

$ amplify configure

Amplify の初期化を行います。アプリケーションのタイプでjavascriptを選択することに注意してください。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project expo-amplify
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react-native
? Source Directory Path:  /
? Distribution Directory Path: /
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

Cognito を Amplify に追加し、AWS に設定を反映させます。

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.

$ amplify push

App.tsxを以下のように記述します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { withAuthenticator } from 'aws-amplify-react-native';

import Amplify from '@aws-amplify/core';
// import config from './aws-exports';
// Amplify.configure(config);
Amplify.configure({
  Auth: {
    // REQUIRED - Amazon Cognito Identity Pool ID
    identityPoolId: '.....', 
    // REQUIRED - Amazon Cognito Region
    region: '.....', 
    // OPTIONAL - Amazon Cognito User Pool ID
    userPoolId: '.....',
    // OPTIONAL - Amazon Cognito Web Client ID
    userPoolWebClientId: '.....', 
    oauth: {},
  },
  Analytics:{
    disabled:true
  },
});

function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

export default withAuthenticator(App, { includeGreetings: true });


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

以下の２行をコメントアウトして、設定をaws-exports.jsから展開しています。

// import config from './aws-exports';
// Amplify.configure(config);

これは、このままだと下記記事の警告が出るのでその対処です。

www.aruse.net

ここで、yarn startをすると警告が出るので、expo optimizeを実行します。

$ yarn start

Warning: This project contains unoptimized assets. Please run `expo optimize` in your project directory.

 $ expo optimize

再度、実行します。

$ yarn start

iOS のシミュレーターの実行結果ですが、問題なくサインイン画面とサインアップ画面が表示されていますね。

サインアップ画面では電話番号が必須項目になっていますが、これを外す方法は下記記事を参考にしてください。React の記事ですが、Expo でも同じ設定で動作しました。

www.aruse.net

サインアップ画面からユーザー登録してサインインすると、下記のように無事にサインインできました。

これで、Expo でも Amplify が実行できることが分かりましたね。