{"id":21157896,"url":"https://github.com/yhotta240/firebase-auth-template","last_synced_at":"2026-04-10T12:33:31.270Z","repository":{"id":231066262,"uuid":"780695152","full_name":"yhotta240/firebase-auth-template","owner":"yhotta240","description":"ReactにFirebaseを統合して認証機能を実装しました。","archived":false,"fork":false,"pushed_at":"2024-04-02T08:10:53.000Z","size":400,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T15:27:09.041Z","etag":null,"topics":["bootstrap","bootstrap5","firebase","firebase-auth","javascript","modal","nodejs","react","react-bootstrap","template"],"latest_commit_sha":null,"homepage":"https://firebase-auth-template.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhotta240.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-02T01:36:16.000Z","updated_at":"2024-04-02T07:22:01.000Z","dependencies_parsed_at":"2024-04-02T09:31:36.181Z","dependency_job_id":"86de6d4c-a62f-43dc-8a97-d019fb8114e6","html_url":"https://github.com/yhotta240/firebase-auth-template","commit_stats":null,"previous_names":["yhotta240/firebase-auth-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yhotta240/firebase-auth-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Ffirebase-auth-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Ffirebase-auth-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Ffirebase-auth-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Ffirebase-auth-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhotta240","download_url":"https://codeload.github.com/yhotta240/firebase-auth-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Ffirebase-auth-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31642952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","firebase","firebase-auth","javascript","modal","nodejs","react","react-bootstrap","template"],"created_at":"2024-11-20T12:12:00.221Z","updated_at":"2026-04-10T12:33:31.241Z","avatar_url":"https://github.com/yhotta240.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## はじめに\nReactにFirebaseを統合して認証機能を実装しました。そして今回は認証機能だけでなく、React Bootstrapのモーダルウィンドウを活用して、ログインとユーザー登録をスムーズに行えるようにしてみました。\n\n## 完成イメージ\n\n![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/e5d808dc-bf0d-e619-0662-23cfa1a01677.gif)\n\n\nユーザー登録からログインへ移動することもできます(逆も同じ）\n![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/727e9260-dd31-ae15-d755-e89810dd73ec.gif)\n\n## デモページ\n\nhttps://firebase-auth-template.vercel.app/\n\nにて公開しています。\n\n\n## クラス図\n![bPBDQiCm48JlVeebfvJWF80F9I64KaZ144BFihMnHMMjq4zoA7ttoggn0dPeSZBipgo_6RInZXddEvdLabaBMwtXEmF8GL8Zr0Tn9WkeY2Go5UTMDEga9uiLj4nnYOVUjfEY_bg-570XmM-Mn-Yzjzr9iXWFst7xa_L4UVuAXv5d71qJIZRm9zKG0pic0gXrHgWcJdJGNSdmc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/56ee67b9-663f-bd35-c0ab-75e79a0115cf.png)\nchatGPTに書かせたので間違ってるかもしれません。\n\nhttps://www.plantuml.com/plantuml/umla/bP3DQiCm48JlVWgHKqfm7i27aX12AQHW2A5dsThOeckjq4zoA7ttoggn0dPeSXBipgo-cOrrt3ZVOLOZjvPjjMRV6MCvGsga-Y31iM0L4G9NSMvbeqvwibYnbYk1SEXjEvJrr_AbO1UIucPvZDvxsnsIXNZOZjkVh2VAyrTs67d6qJ6XP0D_KWqneECoW5fdf6hYH0VTbOou6QvYgdTrbQvz8seGvk1zrKctX0ieLx1z_oJAz6yaMvobWOfRM7FlslNVzSzmVT_ZR9Ke1uZ5mywIjDSJUQXYY9xQU2vxphm5etW7JnSI95xVAIJHpEQg3N079mjcjfN_x5wBO2yDdIN2H1rRsO0IliDV\n\n\n## Reactプロジェクトの作成\n\nvscのコマンドラインでReactアプリケーションの新しいプロジェクトを作成します。例えば、Create React Appを使用して次のようにします。\n\n```bash\nnpx create-react-app firebase-auth-app\ncd firebase-auth-app\ncode . //フォルダを開く\n```\n\n\n## React Bootstrapのセットアップ\n\nReact BootstrapとBootstrapをインストールします。\n\n```bash\nnpm install react-bootstrap bootstrap\n```\n\n\n## Firebaseプロジェクトのセットアップ\nFirebaseコンソールにログインし、[新しいプロジェクト](https://console.firebase.google.com/u/0/)を作成します。\u003cbr\u003e\n![プロジェクトの作成 - Firebase コンソール - console.firebase.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/4977138e-1f25-5b68-f4b4-ec8797ae0517.png)\n\nプロジェクトを作成したら、Firebase Authenticationを有効にします（必要に応じてCloud Firestoreなどの他のFirebaseサービスも追加で有効にしておくと便利です）。\n今回はメール/パスワードとGoogle認証を有効にしておきます。\n![FireShot Capture 011 - firebase-auth-app - Authentication - ログイン方法 - Firebase コンソール_ - console.firebase.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/5c95d603-ec7b-f247-5820-4128c40958f2.png)\n\nFirebaseプロジェクトにアプリを登録し、自身のウェブアプリにFirebaseを追加します。\n![FireShot Capture 012 - firebase-auth-app - アプリの追加 - Firebase コンソール - console.firebase.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/090f960d-1d5f-e58c-8e4f-6eb7e93f2f3b.png)\n\n\nFirebase SDKの構成オブジェクトをReactに追加します。\n\n```bash\nnpm install firebase\n```\n\nFirebaseコンソールから取得した設定を使用して、srcディレクトリ内にfirebase.jsファイルを作成します。\n\n\n![スクリーンショット 2024-03-31 203003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/f0731f72-999f-1d95-3cb6-79f7abb2c1bb.png)\n\nfirebase.jsファイルに以下の内容を追加します。\n```react:firebase.jsx\n// firebase.js\n\nimport { initializeApp } from \"firebase/app\";\nimport { GoogleAuthProvider, getAuth } from \"firebase/auth\";\n\nconst firebaseConfig = {\n  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,\n  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,\n  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,\n  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,\n  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,\n  appId: process.env.REACT_APP_FIREBASE_APP_ID,\n};\n\nconst app = initializeApp(firebaseConfig);\nconst auth = getAuth(app);\nconst provider = new GoogleAuthProvider();\nexport { auth, provider};\n```\nFirebaseのAPIキーやその他の機密情報を.env.localファイルに保存します。このファイルはGitなどのバージョン管理システムから除外されるため、機密情報が外部に公開される心配はありません。.env.localファイルは以下のようになります。\n\n```makefile:.env.local\nREACT_APP_FIREBASE_API_KEY=your-api-key\nREACT_APP_FIREBASE_AUTH_DOMAIN=your-auth-domain\nREACT_APP_FIREBASE_PROJECT_ID=your-project-id\nREACT_APP_FIREBASE_STORAGE_BUCKET=your-storage-bucket\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id\nREACT_APP_FIREBASE_APP_ID=your-app-id\n```\n\nhttps://firebase.google.com/docs/auth/web/google-signin?hl=ja\n\nhttps://firebase.google.com/docs/auth/web/start?hl=ja\n\n\n\n## ファイル構成\n![PP1DJi0W48Ntd8AmwSuprBskr0FKCcqm50X34nFJXR3G2tW0eojhz0BUPYuYmP-cbDsyzpruJ8kXys6UD6iufPNI5wL7IWyKNoYzK_miunipLW8Nw7l1xnZFf-5vE89q_q7fYU8pnLTAQq47fNFsrBcJ7b5KqirE6PI7wmwXafMHS5lIjLY1265sbu01Y_7RjBUJimPCm6FXd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/d449ceec-4a6b-3b84-cb07-3ef51061df84.png)\n\nhttps://www.plantuml.com/plantuml/umla/SoWkIImgAStDuL9NUDoy-d7pdiVD7O-RsnytBNxSlEPnqtemTnLNNdvAge9ISL6oaa8rbm8Gg2i0EPWA7pUkUzmyzN7JmiTDIu3cWPMcPUO0zJeM5EWb5nSheGbbeOYaPHQb9YKMfw89P-Qbf5O0TMCAeYaiJYqfBGX9BIuf1aj0NPgSdrkGdvUQLrACwM28vloSbDGY1IM4GfWt4KRxvATdvldcfoJcmEr4I0PdfkU55g3ArdBLSZcavgM00XS0\n\n\n## ログイン用モーダルウィンドウの作成\n\n![FireShot Capture 013 - React App - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/a00cea7b-15ff-bef3-b43a-e415fae137cd.png)\n\n最初にGoogleのアイコンを使用するのでreact-iconsをインストールしておきます。\n```bash\nnpm instal react-icons\n```\n\n\nsrcディレクトリ内にcomponentsフォルダを作成し、その中にLoginModal.jsを作成します。\n\n\n以下は、ログイン用のモーダルウィンドウを作成するコードです。\n\n\n\n\n```react:LoginModal.jsx\n// LoginModal.jsx\nimport React, { useState } from 'react';\nimport { IoLogoGoogle } from \"react-icons/io\";\nimport { provider, auth } from '../firebase'; // Firebaseの認証関連の設定をインポート\nimport { signInWithPopup, signInWithEmailAndPassword } from 'firebase/auth'; // Firebaseの認証関連のメソッドをインポート\nimport { Button, Modal, Container, Form } from 'react-bootstrap'; // Bootstrapのコンポーネントをインポート\n\nconst LoginModal = ({ show, handleClose, showSignUpModal }) =\u003e {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  // Googleアカウントを使用してログイン\n  const signInwithGoogle = async () =\u003e {\n    try {\n      await signInWithPopup(auth, provider);// FirebaseのsignInWithPopupメソッドを使用してGoogleアカウントでのサインインを試行\n      handleClose(); // モーダルを閉じる\n    } catch (error) {\n      console.error('Googleサインインエラー:', error.message); // エラーメッセージを表示\n      console.error(error); // エラーをコンソールに出力\n    }\n  };\n\n  // メールアドレスとパスワードでのログイン処理\n  const handleSubmit = async (event) =\u003e {\n    event.preventDefault();\n\n    try {\n      await signInWithEmailAndPassword(auth, email, password);\n      handleClose(); // モーダルを閉じる\n    } catch (error) {\n      alert('ログインエラー:', error.message);\n      console.error(error);\n    }\n  };\n\n\n  return (\n    \u003c\u003e\n      \u003cModal show={show} fullscreen='sm-down' centered onHide={handleClose}\u003e\n        \u003cModal.Header closeButton\u003e\n        \u003c/Modal.Header\u003e\n        \u003cModal.Body className='m-4'\u003e\n          \u003cContainer className='' \u003e\n            \u003ch3 className=\"text-center p-0\" \u003eログイン\u003c/h3\u003e\n            \u003chr className=\"m-4\" /\u003e\n            \u003cdiv className=\"text-center\" \u003e\n              \u003cp className=\"mb-4\"\u003eサインインするには:\u003c/p\u003e\n              \u003cdiv className='text-center' \u003e\n                \u003cIoLogoGoogle\n                  style={{ color: '#1266f1', cursor: 'pointer' }}\n                  className=\"mb-4\"\n                  onClick={signInwithGoogle}\n                  size={26}\n                /\u003e\n              \u003c/div\u003e\n              \u003cp className=\"mb-4\"\u003eまたは:\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cForm onSubmit={handleSubmit}\u003e\n              \u003cForm.Group className=\"mb-4\" controlId=\"loginForm.email\"\u003e\n                \u003cForm.Label\u003eメールアドレス\u003c/Form.Label\u003e\n                \u003cForm.Control\n                  type=\"email\"\n                  placeholder=\"name@example.com\"\n                  autoFocus\n                  onChange={(e) =\u003e setEmail(e.target.value)}\n                /\u003e\n              \u003c/Form.Group\u003e\n              \u003cForm.Group className=\"mb-4\" controlId=\"loginForm.password\"\u003e\n                \u003cForm.Label\u003eパスワード\u003c/Form.Label\u003e\n                \u003cForm.Control\n                  type=\"password\"\n                  autoFocus\n                  onChange={(e) =\u003e setPassword(e.target.value)}\n                /\u003e\n              \u003c/Form.Group\u003e\n              \u003cdiv className=\"d-flex justify-content-end mb-5 \"\u003e\n                \u003ca href=\"/password/reset\" className='' \u003eパスワードを忘れてしまった場合\u003c/a\u003e\n              \u003c/div\u003e\n              \u003cbutton type=\"submit\" className=\"btn btn-primary mb-5 w-100\"\u003eサインイン\u003c/button\u003e\n            \u003c/Form\u003e\n            \u003cdiv className=\"text-center\"\u003e\n              \u003cp\u003eアカウントをお持ちではない方\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n                \u003cButton variant=\"link\" onClick={showSignUpModal}\u003e登録する\u003c/Button\u003e\n              \u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/Container\u003e\n        \u003c/Modal.Body\u003e\n        \u003cModal.Footer\u003e\n          \u003cButton variant=\"secondary\" onClick={handleClose}\u003e\n            閉じる\n          \u003c/Button\u003e\n        \u003c/Modal.Footer\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default LoginModal;\n```\n\n## ユーザ登録用モーダルウィンドウの作成\nユーザ登録用のモーダルウィンドウも同様に作成します。\n![FireShot Capture 014 - React App - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/5ffe661e-f27a-5360-e76e-650b27c40659.png)\n以下は、ユーザ登録用のモーダルウィンドウを作成するコードです。\n```react:SignUpModal.jsx\n// SignUpModal.jsx\n\nimport React, { useState } from 'react';\nimport { IoLogoGoogle } from \"react-icons/io\";\nimport { provider, auth } from '../firebase'; // Firebaseの認証関連の設定をインポート\nimport { signInWithPopup, createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'; // Firebaseの認証関連のメソッドをインポート\nimport { Button, Modal, Container, Form } from 'react-bootstrap'; // Bootstrapのコンポーネントをインポート\n\nconst SignUpModal = ({ show, handleClose, showLoginModal }) =\u003e {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [username, setUsername] = useState('');\n\n  // Googleアカウントでのサインイン処理\n  const signInwithGoogle = async () =\u003e {\n    try {\n      await signInWithPopup(auth, provider); // FirebaseのsignInWithPopupメソッドを使用してGoogleアカウントでのサインインを試行\n      handleClose(); // モーダルを閉じる\n    } catch (error) {\n      alert('Googleサインアップエラー:', error.message); // エラーメッセージを表示\n      console.error(error); // エラーをコンソールに出力\n    }\n  };\n\n  // メールアドレスとパスワードでのサインアップ処理\n  const handleSignup = async (event) =\u003e {\n    event.preventDefault();\n\n    try {\n      const userCredential = await createUserWithEmailAndPassword(auth, email, password); // FirebaseのcreateUserWithEmailAndPasswordメソッドを使用してサインアップを試行\n      const user = userCredential.user;\n      handleClose(); // モーダルを閉じる\n      // ユーザー名の設定\n      await updateProfile(user, {\n        displayName: username\n      });\n    } catch (error) {\n      alert('サインアップエラー:', error.message); // エラーメッセージを表示\n      console.error(error); // エラーをコンソールに出力\n    }\n  }\n\n  return (\n    \u003c\u003e\n      \u003cModal show={show} fullscreen='sm-down' centered onHide={handleClose}\u003e\n        \u003cModal.Header closeButton\u003e\n        \u003c/Modal.Header\u003e\n        \u003cModal.Body className='m-4'\u003e\n          \u003cContainer\u003e\n            \u003ch3 className=\"text-center p-0\" \u003eユーザー登録\u003c/h3\u003e\n            \u003chr className=\"m-4\" /\u003e\n            \u003cdiv className=\"text-center\" \u003e\n              \u003cp className=\"mb-4\"\u003eサインアップするには:\u003c/p\u003e\n              \u003cdiv className='text-center' \u003e\n                \u003cIoLogoGoogle\n                  style={{ color: '#1266f1', fontSize: '25px', cursor: 'pointer' }}\n                  className=\"mb-4\"\n                  onClick={signInwithGoogle}\n                /\u003e\n              \u003c/div\u003e\n              \u003cp className=\"mb-4\"\u003eまたは:\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cForm onSubmit={handleSignup} \u003e\n              \u003cForm.Group className=\"mb-3\" controlId=\"signupForm.username\"\u003e\n                \u003cForm.Label\u003eユーザー名\u003c/Form.Label\u003e\n                \u003cForm.Control\n                  type=\"text\"\n                  autoFocus\n                  onChange={(e) =\u003e setUsername(e.target.value)}\n                /\u003e\n              \u003c/Form.Group\u003e\n              \u003cForm.Group className=\"mb-3\" controlId=\"signupForm.email\"\u003e\n                \u003cForm.Label\u003eメールアドレス\u003c/Form.Label\u003e\n                \u003cForm.Control\n                  type=\"email\"\n                  placeholder=\"name@example.com\"\n                  autoFocus\n                  onChange={(e) =\u003e setEmail(e.target.value)}\n                /\u003e\n              \u003c/Form.Group\u003e\n              \u003cForm.Group className=\"mb-5\" controlId=\"signupForm.password\"\u003e\n                \u003cForm.Label\u003eパスワード\u003c/Form.Label\u003e\n                \u003cForm.Control\n                  type=\"password\"\n                  autoFocus\n                  onChange={(e) =\u003e setPassword(e.target.value)}\n                /\u003e\n              \u003c/Form.Group\u003e\n              \u003cbutton type=\"submit\" className=\"btn btn-primary mb-5 w-100\"\u003eサインアップ\u003c/button\u003e\n            \u003c/Form\u003e\n            \u003cdiv className=\"text-center\" \u003e\n              \u003cp\u003e\n                すでにアカウントをお持ちの方は\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n                \u003cButton variant=\"link\" onClick={showLoginModal}\u003eこちら\u003c/Button\u003e\n              \u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/Container\u003e\n        \u003c/Modal.Body\u003e\n        \u003cModal.Footer\u003e\n          \u003cButton variant=\"secondary\" onClick={handleClose}\u003e\n            閉じる\n          \u003c/Button\u003e\n        \u003c/Modal.Footer\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default SignUpModal;\n\n```\n\n\nモーダル\n\nhttps://react-bootstrap.netlify.app/docs/components/modal\n\nフォーム\n\nhttps://react-bootstrap.netlify.app/docs/forms/overview\n\n\n\n## アプリケーションの統合\n最後に、Appコンポーネントでこれらのモーダルウィンドウを使用します。\nついでに認証後の処理とログアウトの処理も追加します。\n\n```react:App.jsx\nimport './App.css';\nimport React, { useState, useEffect } from 'react';\nimport LoginModal from './components/LoginModal';\nimport SignUpModal from './components/SignUpModal';\nimport { Button } from 'react-bootstrap';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport { onAuthStateChanged } from 'firebase/auth';\nimport { auth } from './firebase';\n\nfunction App() {\n  // ログインしているユーザーの情報を管理するステート\n  const [user, setUser] = useState(null);\n  // モーダルの表示状態を管理するステート\n  const [modals, setModals] = useState({ login: false, signUp: false });\n  \n  // ログインモーダルを表示する処理\n  const handleLoginClick = () =\u003e {\n    setModals({ login: true, signUp: false });\n  };\n  // ユーザ登録モーダルを表示する処理\n  const handleSignUpClick = () =\u003e {\n    setModals({ login: false, signUp: true });\n  };\n  // モーダルを閉じる処理\n  const handleCloseModals = () =\u003e {\n    setModals({ login: false, signUp: false });\n  };\n\n  // Firebaseの認証状態が変化した際の処理\n  useEffect(() =\u003e {\n    const unsubscribe = onAuthStateChanged(auth, (user) =\u003e {\n      if (user) {\n        setUser(user);\n      } else {\n        setUser(null);\n      }\n    });\n\n    return () =\u003e unsubscribe();\n  }, []);\n\n  // ログアウト処理\n  const handleLogout = () =\u003e {\n    auth.signOut();\n    // ログアウト後の処理を記述する（例：リダイレクトなど）\n  };\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cdiv className='container '\u003e\n        \u003cdiv className='mt-5'\u003e\n          {user ? (\n            // ログインしている場合の表示\n            \u003cdiv\u003e\n              \u003cp\u003e{user.email} でログイン中\u003c/p\u003e\n              \u003cButton variant=\"secondary\" onClick={handleLogout}\u003eログアウト\u003c/Button\u003e\n            \u003c/div\u003e\n          ) : (\n            // ログインしていない場合の表示\n            \u003c\u003e\n              \u003cButton variant=\"primary\" onClick={handleLoginClick}\u003eログイン\u003c/Button\u003e\n              \u003cButton variant=\"secondary\" onClick={handleSignUpClick}\u003eユーザー登録\u003c/Button\u003e\n            \u003c/\u003e\n          )}\n        \u003c/div\u003e\n        {/* ログイン用モーダル */}\n        \u003cLoginModal show={modals.login} handleClose={handleCloseModals} showSignUpModal={handleSignUpClick} /\u003e\n        \u003cSignUpModal show={modals.signUp} handleClose={handleCloseModals} showLoginModal={handleLoginClick} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n\n\n\n```\n\n## テスト\n\n#### ユーザー登録機能のテスト\n\u003cp float=\"left\"\u003e\n\u003cimg src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/257d9e7a-578a-38b9-3e2e-260aa7f56aeb.png\" width=\"50%\" /\u003e\n  \u003cimg src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/dcc9eaa0-6580-d4ce-7cb0-8c84d0f1d4e0.png\" width=\"45%\" /\u003e \n\u003cp\u003e\n\n## まとめ\n\nFirebase認証とReact Bootstrapを組み合わせて使用することで、ログインやユーザー登録などの認証機能を簡単に実装できました。\nFirebaseの認証機能を利用することで、信頼性の高い認証システムを簡単に導入できるうえ、React Bootstrapを使用することで、UIデザインやレスポンシブデザインに関する考えをあまりすることなく、見栄えの良いUIを構築できました。\nこれにより、少ないコードと短時間で効率よく機能的なログイン・ユーザー登録フォームを作成することができます。\n\n---\nコードはGitHubでご覧いただけます：[GitHubリンク](https://github.com/yhotta240/firebase-auth-template)\n\nhttps://github.com/yhotta240/firebase-auth-template\n\nqiitaで同じ内容を記載しています。\u003cbr/\u003e\nhttps://qiita.com/yhotta240/items/0e83cee50db2cf9a091e\n\n## 参考\n\nFirebaseドキュメント\n\nhttps://firebase.google.com/docs/auth/web/start?hl=ja\u0026_gl=1*s2h8pb*_up*MQ..*_ga*OTgzNTY1MjYxLjE3MTE5NDEyMjE.*_ga_CW55HF8NVT*MTcxMTk0MTIyMC4xLjAuMTcxMTk0MTI0OC4wLjAuMA..#add-initialize-sdk\n\n\n\nReact Bootstrapドキュメント\n\nhttps://react-bootstrap.netlify.app/\n\nBootstrap5設置ガイド\n\nhttps://bootstrap-guide.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhotta240%2Ffirebase-auth-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhotta240%2Ffirebase-auth-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhotta240%2Ffirebase-auth-template/lists"}