Expo * FirebaseのAuth認証のDocsでエラーが出たので修正案

Expo上のReactNativeで、FirebaseのAuth認証を使ったアプリ開発をしようとしていたのですが、
公式Docsが少なく、いろいろ手こずったので、初動だけ備忘メモしておきます。

ExpoとReactのバージョン

"react": "16.13.1",
"expo" : "4.3.2"

Firebase上であらかじめユーザーを一つ作っておく

GUIでポチポチ作れます。

Firebaseを参照する

Signinメソッドだけ（Signupメソッドも同様のため）
問題点はimport箇所。公式Docsに書いてあるimportが使えなかったため、色々試した結果、これで通りました。

firabase.tsx

import firebase from "firebase/app";
import "firebase/auth";
import Constants from "expo-constants";

firebase.initializeApp(Constants.manifest.extra.firebase);

export const signin = async (email: string, password: string) => {
    try {
        const userCredential = await firebase
            .auth()
            .signInWithEmailAndPassword(email, password);
        console.log(userCredential);
    } catch (err) {
        console.log(err);
    }
};

Loginする

最初にレンダリングしたときに、ログインしてみる。

AuthScreen.tsx

import React, { useEffect } from "react";
import { StyleSheet, SafeAreaView, Text } from "react-native";
import { signin } from "../lib/firebase";

export const AuthScreen: React.FC = () => {
    useEffect(() => {
        signin("XXXXX", "YYYYYY");
    }, []);

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>ログイン中...</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        marginTop: 16,
        fontSize: 12,
        color: "#888",
    },
});

UserCredentialが返ってきて、問題なくログイン成功

Object {
〜〜〜
    "isNewUser": false,
    "providerId": "password",
〜〜〜
  "operationType": "signIn",
  "user": Object {
〜〜〜
    "email": "XXXXX",
    "isAnonymous": false,
〜〜〜
    "providerData": Array [
      Object {
        "displayName": null,
        "email": "XXXXX",
〜〜〜
      },
    ],
〜〜〜
}

公式Docs

1　Expo公式ドキュメント　Firebase認証

2 Firebase公式ドキュメント　Webアプリにおける認証

終了