Firebase Authentication v9 メソッドの書き方

Firebase バージョン9以降では、必要なメソッドだけimportすることになり、Authenticationに関わる記述方法も変わったようです。
v9を使っていて、v8以前の記述をするとエラーが出てしまいます。

設定ファイル　firebase.js

設定ファイルの記述方法は以下のように変わっています。

firebase.auth();
↓
getAuth();

従来

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_SENDER_ID,
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();

v9

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_SENDER_ID,
};

initializeApp(firebaseConfig);
export const auth = getAuth();

ユーザー登録（サインアップ）

以下のように記述方法が変わっています。エラーの受け取りは従来通り。
auth.createUserWithEmailAndPassword(email, password)
↓
createUserWithEmailAndPassword(auth, email, password)

従来

auth.createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

v9

import { createUserWithEmailAndPassword } from "firebase/auth";
// 略
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

ログイン（サインイン）

auth.signInWithEmailAndPassword(email, password)
↓
signInWithEmailAndPassword(auth, email, password)

従来

auth.signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

v9

import { signInWithEmailAndPassword } from 'firebase/auth'
// 略
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

ログアウト（サインアウト）

従来

auth.signOut();

v9

import { signOut } from 'firebase/auth'
// 略
signOut(auth);

参考

公式ドキュメント