質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

受付中

Firebase authでエラーになる

busiRyu110
busiRyu110

総合スコア2

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

1回答

0グッド

0クリップ

503閲覧

投稿2022/10/30 11:40

編集2022/10/30 12:51
"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した関数の中身です。
ご教授お願いします。

tsx

1const onSubmit = async (data: any) => { 2 try { 3 const auth = getAuth() 4 const userCredential = await createUserWithEmailAndPassword( 5 auth, 6 emailRef.current, 7 passwordRef.current 8 ) 9 await sendEmailVerification(userCredential.user) 10 reset() 11 } catch (e) { 12 if (e instanceof FirebaseError) { 13 openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" }) 14 console.log(e) 15 } 16 } 17 }

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

tsx

1import { useRef } from "react"; 2import { useForm } from "react-hook-form"; 3import { ErrorMessage } from "../../components/ErrorMessage"; 4import { 5 createUserWithEmailAndPassword, 6 getAuth, 7 sendEmailVerification, 8} from 'firebase/auth' 9import { FirebaseError } from '@firebase/util' 10import { openNotificationWithIcon } from "../../components/OpenNotificationWithIcon"; 11 12export const SignUp = () => { 13 const { register, handleSubmit, reset, formState: { errors } } = useForm<any>(); 14 const emailRef = useRef<string>('') 15 const passwordRef = useRef<string>('') 16 const onSubmit = async (data: any) => { 17 try { 18 const auth = getAuth() 19 const userCredential = await createUserWithEmailAndPassword( 20 auth, 21 emailRef.current, 22 passwordRef.current 23 ) 24 await sendEmailVerification(userCredential.user) 25 reset() 26 } catch (e) { 27 if (e instanceof FirebaseError) { 28 openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" }) 29 console.log(e) 30 } 31 } 32 } 33 return ( 34 <div className="animate-pulse min-h-screen bg-slate-200 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12"> 35 <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> 36 <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"> 37 <form action="" onSubmit={handleSubmit(onSubmit)}> 38 <label htmlFor="" className="block">Username or Email</label> 39 <input 40 {...register('email', { 41 required: true, 42 })} 43 type="Email" 44 id="email" 45 name="email" 46 className="border w-full h-10 px-3 mb-5 rounded-md" 47 placeholder="Username or Email" 48 onChange={(e) => emailRef.current = e.target.value} 49 /> 50 <ErrorMessage children={errors.email?.type === "required" && "メールアドレスを入力してください"} /> 51 <label htmlFor="" className="block">Password</label> 52 <input {...register('password', { 53 required: true, 54 })} 55 type="password" 56 id="password" 57 name="password" 58 className="border w-full h-10 px-3 mb-5 rounded-md" 59 placeholder="password" 60 onChange={(e) => passwordRef.current = e.target.value} 61 /> 62 <ErrorMessage children={errors.password?.type === "required" && "パスワードを入力してください"} /> 63 <div className="flex items-start"> 64 <div className="flex items-start"> 65 <div className="flex items-center"> 66 <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" /> 67 </div> 68 <div className="text-sm ml-3"> 69 <label htmlFor="remember" className="font-medium text-gray-900">Remember me</label> 70 </div> 71 </div> 72 <a href="#" className="text-sm text-blue-700 hover:underline ml-auto dark:text-blue-500">Lost 73 Password?</a> 74 </div> 75 <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> 76 </form> 77 </div> 78 </div> 79 ) 80} 81 82export default SignUp

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

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

投稿2022/11/15 12:46

sinto

総合スコア6

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。