React Nativeのログインについて

1. ログインのすべて
React Native + Expo + Firebaseで猛スピード実装

2. 自己紹介
佐藤 大生（サトウ ダイキ）
Twitter：@daiyanyanyan
経歴
・フリーランスのスマホアプリエンジニア
・エンジニア歴８年
・React Native 現場で３年
・今まで６本React Nativeのアプリリリース済
・マリクルエンジニア
・React Native Tech Blogの運営中

3. ログイン
①バックエンド言語 + フレームワーク（Ruby on Rails, Laravel）（マリクルこれ）
②Firebase （今日話すのこっち）
実装方法
ログインがないアプリはない！ （セキュリティ ？パスワード再設定？）
→ 実装が大変、いきなり挫折

4. Firebase
・Cloud Firestore
・Cloud Storage for Firebase
・Firebase Authentication
・Firebase Cloud Messaging
・Google Cloud Functions for Firebase
・Firebase Hosting
匿名
Email/Password
電話番号
Google
Play Games
Game Center
Facebook
Twitter
GitHub
Yahoo
Microsoft
Apple
Google が提供しているモバイルおよび
Web アプリケーションのバックエンドサービスです。
Auth一覧

5. プロジェクトの作成とFirebaseの呼び出し
詳細はここで https://tech.maricuru.com/entry/2020/02/09/212256
手順
----ブラウザ作業---
①Firebaseプロジェクトを作成
②Authenticationを設定→Keyが払い出させる
----ターミナル作業---
③firebaseをインストール
----コーディング---
④configファイルの作成
import firebase from 'firebase';
export const firebaseConfig = {
apiKey: '----',
authDomain: ----',
databaseURL: ----',
projectId: ----',
storageBucket: ----',
messagingSenderId: ----',
appId: ----',
measurementId: ----',
};
export default firebase;
src/configs/firebase.js
yarn add firebase

6. UIの実装
<View>
<TextInput
style={styles.textInput}
value={email}
onChangeText={(text: string): void => setEmail(text)}
placeholder="Email"
/>
<TextInput
style={styles.textInput}
value={password}
onChangeText={(text: string): void => setPassword(text)}
placeholder="Password"
secureTextEntry
/>
<Button title="登録" onPress={(): void => emailSignUp(email, password)} />
</View>

7. メールアドレスログイン 難易度★
import firebase from '../configs/firebase';
// メールアドレスでユーザ登録
export const emailSignUp = (email: string, password: string): void => {
Firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(user => {
if (user) { console.log('Success to Signup');}
})
.catch(error => {
console.log(error);
});
};
export default firebase;

8. 匿名ログイン 難易度★
// 匿名ログインユーザ登録
export const anonymousSignUp = (): void => {
Firebase
.auth()
.signInAnonymously()
.then(user => {
if (user) { console.log('Success to Signup');}
})
.catch(error => {
console.log(error);
});
};

9. 電話番号ログイン 難易度★★★★★
・今まで通りはいかない！（関数呼び出せばいいだけじゃない）
・reCAPTYAで実装する
・Hostingする必要がある
（FIreabaseにHosting機能がある）
手順
①Firebase Hostingのインストール
②captcha.htmlの作成
③deploy
④実装

10. Facebookログイン 難易度★★
手順
①Facebook for Developersの登録
②パッケージのインストール
③実装
yarn add expo-facebook
export const facebookSignUp = async () => {
await Facebook.initializeAsync(facebookConfig.ApplicationKey, '-----');
const { type, token } = await Facebook.logInWithReadPermissionsAsync(
facebookConfig.ApplicationKey,
{
permissions: ['public_profile'],
}
).catch(e => {
console.log(e);
throw e;
});
if (type === 'success') {
try {
const credential = FacebookAuthProvider.credential(token);
const user = await firebase.auth().signInWithCredential(credential);
return user;
} catch (error) {
console.log(error);
}
}
}

12. Googleログイン 難易度★★★
手順
①Google Developに登録
②パッケージのインストール
③実装
yarn add expo-google-app-auth
export const goolgeSignUp = async () => {
try {
const result = await Google.logInAsync({
behavior: 'web',
androidClientId:
'--------',
iosClientId:
'--------',
scopes: ['profile', 'email'],
});
if (result.type === 'success') {
onSignInGoolge(result);
return result.accessToken;
}
return { cancelled: true };
} catch (e) {
return { error: true };
}
};

13. まとめ
・ログイン実装はFirebaseの利用がオススメ
・何でログインするかは超考えるべき。少ない方がいい
・匿名、メールアドレス/パスワードのみなら本当に楽
・TwitterはExpoがサポートしていない → 実装少し大変
・Facebook、Googleはサポートしている → ExpoVersion変わるごとに要試験
・電話番号はreCAPTYAすることでできる
・ググル時は、Expo使っている？Version何を意識！

14. React Nativeエンジニア募集中
株式会社マリクル
副業歓迎！(週1〜)
リモート可
お互いの都合合えば正社員雇用あり！
マリクル代表の高木までDMください (@nr_tkg)