Firebase Authで匿名ログインを実装して作成したuserデータを取得する
Userドキュメント用のTypeを用意する
import firebase from "firebase" export type User = { id?: string name: string createdAt: firebase.firestore.Timestamp updatedAt: firebase.firestore.Timestamp } export const initialUser: User = { name: "", createdAt: firebase.firestore.Timestamp.now(), updatedAt: firebase.firestore.Timestamp.now(), }
匿名認証の機能を実装する
import 'firebase/auth' export const signin = async () => { const userCredential = await firebase.auth().signInAnonymously() const { uid } = userCredential.user const userDoc = await firebase.firestore().collection("users").doc(uid).get() //ユーザー情報が作られていない場合は初期化 if (!userDoc.exists) { await firebase.firestore().collection("users").doc(uid).set(initialUser) return { ...initialUser, id: uid } as User } else { return { //firestoreのドキュメントのdataはIDを返さないので展開して返している id: uid, ...userDoc.data() } as User } }
認証画面を作成する
メインのナビゲーターの前にログインしていなかったら、 弾くための認証画面を作る。
screens/AuthScreen.tsx
import React, { useEffect } from "react" import { StyleSheet, ActivityIndicator, Text, View } from 'react-native' import { signin } from "../utils/Fire" export const AuthScreen = () => { useEffect(() => { const fetchUser = async () => { const user = await signin() } fetchUser() }, []) return ( <View style={styles.container}> <ActivityIndicator size="large" /> <Text style={styles.text}>ログイン中...</Text> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, text: { marginTop: 16, fontSize: 12, color: "#888", }, })
今日の学び
- App.tsxでログイン状態をみて制御を行う
- 匿名認証はセッション毎にIDが発行されてusersコレクションに作成される。途中からメール認証に統合も可能、ログインしないでいいねとか出来る
- Firebaseのドキュメント毎にtypeを定義しておくがお作法