Expo React Native TypeScript Firebase v9でユーザー認証

Firebaseのログアウトメソッド
参考情報

Firebaseのログアウトメソッド

今回はサインアウト（ログアウト）をHomeスクリーンに追加します.　ユーザーをサインアウトするには、signOutメソッドを呼び出し、引数にfirebase.tsのauthを渡します.　コードは下記の通りsignOut(auth)とするだけなので非常にシンプルです.

Home.tsx

import { auth } from '../firebase';
import { signOut } from 'firebase/auth';

const Home = (): JSX.Element => {

  const navigation = useNavigation<StackNavigationProp<ParamListBase>>();

  const handleSignOut = () => {
    try {
      // ユーザーをサインアウト
      signOut(auth)
        .then(() => {
          // サインアウト後ログイン画面に遷移
          navigation.replace('Login')
        })
    } catch (error) {
      if (error instanceof Error) {
        console.log(error.message);
      }
    };
  }

  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <Text>Wellcome {auth.currentUser?.email}!</Text>
      <TouchableOpacity
        onPress={handleSignOut}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>Sign out</Text>
      </TouchableOpacity>
    </View>
  )
}

26行目の、<Text>Wellcome {auth.currentUser?.email}!</Text>ですが、Homeスクリーンでユーザーのemailを表示させています.　currentUser?とすることで、currentUserオブジェクトのプロパティが存在しない場合でも、エラーを起こさずにプロパティを参照できるようにしています（詳細）.　