react-native-firebase/auth@18.5.0で匿名認証を追加する〜expo-router〜

2023.10.10

React Native Firebaseの初期セットアップを行う
Firebaseコンソールで匿名ログインプロバイダを有効にする
パッケージをインストールする
auth()設定を行う

React Native Firebaseの初期セットアップを行う

Firebaseコンソールで匿名ログインプロバイダを有効にする

パッケージをインストールする

try🐶everything myproject$ yarn add @react-native-firebase/auth
try🐶everything myproject$ npx pod-install

auth()設定を行う

expo-router環境です。(詳細)

// app/_layout.tsx

...
import auth, {FirebaseAuthTypes} from '@react-native-firebase/auth';
...

export default function RootLayout() {
  const [loading, setLoading] = useState<boolean>(true);
  const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);
...

  useEffect(() => {
    auth()
      .signInAnonymously()
      .then(() => {
        console.log('User signed in anonymously');
      })
      .catch(err => {
        if (err.code === 'auth/operation-not-allowed') {
          console.log('Enable anonymous in your firebase console.');
        }

        console.error(err);
      });
  }, []);

  useEffect(() => {
    auth().onAuthStateChanged(userState => {
      setUser(userState);

      if (loading) {
        setLoading(false);
      }
    });
  }, [loading]);
...

アプリを再起動し、console.log('!@# user:', user); メッセージを確認すると⬇︎のように表示されれば問題ありません！

const user = {
  displayName: null,
  email: null,
  emailVerified: false,
  isAnonymous: true,
  metadata: {creationTime: 1696893967939, lastSignInTime: 1696893967939},
  multiFactor: {enrolledFactors: [Array]},
  phoneNumber: null,
  photoURL: null,
  providerData: [],
  providerId: 'firebase',
  refreshToken:
    'AMf-vBxBEOjmL8eO26vlJsBkTouzXIpjh5X2YB0AWxI15mHsMg3viVGLzmTK0s_QKZdRtiKkz3TbZ0u7wLfrOgDC5MNNwQBOoxie9lMC0Rqu-SSxVUOi-dmNSfaC8-1NvZuFnWRzlDEAT26iZ2CZFD_o7nRrGYeMyL9Vu88YmQ9rx-YqtUOVqGI',
  tenantId: null,
  uid: 'nd7r7aaZiEbrMorlOXUxYsOPkyR2',
};

Firebaseコンソールでも確認します。