Firebase authでエラーになる

Question

"next": "12.2.4",
"firebase": "^9.13.0",

を使用しています。

https://zenn.dev/hisho/books/617d8f9d6bd78b/viewer/chapter5

こちらの記事通り行いましたが、 getAuth()でエラーになります。

signup.tsx?0eaa:30 FirebaseError: Firebase: Error (auth/argument-error).
    at createErrorInternal (index-0bb4da3b.js?f571:476:1)
    at _assert (index-0bb4da3b.js?f571:480:1)
    at eval (index-0bb4da3b.js?f571:9409:1)
    at Component.eval [as instanceFactory] (index-0bb4da3b.js?f571:9424:10)
    at Provider.getOrInitializeService (index.esm2017.js?87c4:290:1)
    at Provider.initialize (index.esm2017.js?87c4:234:1)
    at initializeAuth (index-0bb4da3b.js?f571:594:1)
    at getAuth (index-0bb4da3b.js?f571:9502:1)
    at _callee$ (signup.tsx?0eaa:19:27)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (_async_to_generator.mjs?f84d:3:1)
    at _next (_async_to_generator.mjs?f84d:25:1)
    at eval (_async_to_generator.mjs?f84d:32:1)
    at new Promise (<anonymous>)
    at eval (_async_to_generator.mjs?f84d:21:1)
    at onSubmit (signup.tsx?0eaa:17:36)
    at eval (index.esm.mjs?250c:2004:1)

こちらがonSubmitした関数の中身です。
ご教授お願いします。

const onSubmit = async (data: any) => {
    try {
      const auth = getAuth()
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        emailRef.current,
        passwordRef.current
      )
      await sendEmailVerification(userCredential.user)
      reset()
    } catch (e) {
      if (e instanceof FirebaseError) {
        openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" })
        console.log(e)
      }
    }
  }

こちらがサインアップページです

import { useRef } from "react";
import { useForm } from "react-hook-form";
import { ErrorMessage } from "../../components/ErrorMessage";
import {
  createUserWithEmailAndPassword,
  getAuth,
  sendEmailVerification,
} from 'firebase/auth'
import { FirebaseError } from '@firebase/util'
import { openNotificationWithIcon } from "../../components/OpenNotificationWithIcon";

export const SignUp = () => {
  const { register, handleSubmit, reset, formState: { errors } } = useForm<any>();
  const emailRef = useRef<string>('')
  const passwordRef = useRef<string>('')
  const onSubmit = async (data: any) => {
    try {
      const auth = getAuth()
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        emailRef.current,
        passwordRef.current
      )
      await sendEmailVerification(userCredential.user)
      reset()
    } catch (e) {
      if (e instanceof FirebaseError) {
        openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" })
        console.log(e)
      }
    }
  }
  return (
    <div className="animate-pulse min-h-screen bg-slate-200 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
      <span className="border text-4xl text-yellow-800 px-6 pt-10 pb-8 bg-white w-1/2 max-w-md mx-auto rounded-t-md sm:px-10">サインアップ</span>
      <div className="border relative px-4 pt-7 pb-8 bg-white shadow-xl w-1/2 max-w-md mx-auto sm:px-10 rounded-b-md">
        <form action="" onSubmit={handleSubmit(onSubmit)}>
          <label htmlFor="" className="block">Username or Email</label>
          <input
            {...register('email', {
              required: true,
            })}
            type="Email"
            id="email"
            name="email"
            className="border w-full h-10 px-3 mb-5 rounded-md"
            placeholder="Username or Email"
            onChange={(e) => emailRef.current = e.target.value}
          />
          <ErrorMessage children={errors.email?.type === "required" && "メールアドレスを入力してください"} />
          <label htmlFor="" className="block">Password</label>
          <input {...register('password', {
            required: true,
          })}
            type="password"
            id="password"
            name="password"
            className="border w-full h-10 px-3 mb-5 rounded-md"
            placeholder="password"
            onChange={(e) => passwordRef.current = e.target.value}
          />
          <ErrorMessage children={errors.password?.type === "required" && "パスワードを入力してください"} />
          <div className="flex items-start">
            <div className="flex items-start">
              <div className="flex items-center">
                <input required id="remember" aria-describedby="remember" type="checkbox" className="bg-gray-50 border border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" />
              </div>
              <div className="text-sm ml-3">
                <label htmlFor="remember" className="font-medium text-gray-900">Remember me</label>
              </div>
            </div>
            <a href="#" className="text-sm text-blue-700 hover:underline ml-auto dark:text-blue-500">Lost
              Password?</a>
          </div>
          <button className="mt-5 bg-green-500 hover:bg-blue-700 shadow-xl text-white uppercase text-sm font-semibold px-14 py-3 rounded">サインアップ</button>
        </form>
      </div>
    </div>
  )
}

export default SignUp

Answer 1

参考になるか分かりませんが、、、
https://stackblitz.com/edit/signup-with-firebase-try2-internshalasimilar