常連

rails(API)と、vuejsと、webpackerを使って認証機能を実装中です。
[Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita](https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241)を参考にさせていただき、firebaseにemailとパスワードが保存されるように実装できました。
そこで、ログインしてないユーザーはホーム画面に遷移させるように、vuerouterの設定をしていました。
記事通りに、router.jsにRouter.beforeEachの設定を書いたところ、下記のエラー文が出てきました。
Router is not definedと出ていますが、vuerouterはちゃんと読み込んでるはずです。どこが原因かわからず質問させていただいた次第です。
ご教示のほど、よろしくお願いいたします。

```
router.js:33 Uncaught ReferenceError: Router is not defined
    at Module../app/javascript/router/router.js (router.js:33)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at Object.1 (log.js:56)
```
とエラーが出てきてきました。エラーに該当するファイルは下記になります。
```
# router.js

import Vue from "vue";
import VueRouter from "vue-router";
import MusicHome from "../pages/MusicHome.vue";
import MusicCreate from "../pages/MusicCreate.vue";
import MusicEdit from "../pages/MusicEdit.vue";
import MusicSearch from "../pages/MusicSearch.vue";
import MusicSearchResult from "../pages/MusicSearchResult.vue";
import SignUp from "../pages/SignUp.vue";
import SignIn from "../pages/SignIn.vue";
import firebase from '../plugins/firebase'

Vue.use(VueRouter);
// Vue.use(VuePaginate);

const routes = [
  {
    path: '*',
    redirect: 'signin'
  },
  { path: "/", name: "MusicHome",meta: { requiresAuth: true }, component: MusicHome },
  { path: "/create", name: "MusicCreate", component: MusicCreate },
  { path: "/edit/:id", name: "MusicEdit", component: MusicEdit },
  { path: "/search", name: "MusicSearch", component: MusicSearch },
  {
    path: "/result/:keyword",
    name: "MusicSearchResult",
    component: MusicSearchResult,
  },
  { path: "/signup", name: "signup", component: SignUp },
  { path: "/signin", name: "signin", component: SignIn },
];

Router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // すでに認証済みの場合は遷移
    if (firebase.auth().currentUser) {
      next()
      return
    }
    // まだ認証されていない場合は Firebase SDK からのコールバックを待つ
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        next()
      } else {
        next({ name: 'Home' })
      }
      return
    })
  }
  next()
})

export default new VueRouter({ routes });
```

```
# application.js

import Vue    from 'vue'
import App    from './App.vue'
import Router from '../router/router.js'
import Store  from '../store/store.js'


const app = new Vue({
   el: '#app',
   router: Router,
   store: Store,
   render: h => h(App)
})
```

Vue.jsで、router is not definedと怒られる

### 実現したいこと

React.jsでアプリを作成しており、
Firebaseでログイン認証の実装をしたいのですが、
「API Keyが無効のため、正しくコピーされているか確認ください」とエラーが表示されます。



### 発生している問題・エラーメッセージ

```
provider.ts:120 Uncaught 
t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}
a: null
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error
```

### 該当のソースコード
.envファイル
```
REACT_APP_FIREBASE_API_KEY
="***"
REACT_APP_FIREBASE_DOMEIN="***"
REACT_APP_FIREBASE_DATABASE="***"
REACT_APP_FIREBASE_PROJECT_ID="***"
REACT_APP_FIREBASE_STORAGE_BUCKET="***"
REACT_APP_FIREBASE_SENDER_ID="***"
REACT_APP_FIREBASE_APP_ID="***"

```
Firebase.js
```
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMEIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const initialized_fb = firebase.initializeApp(firebaseConfig);

export const auth = initialized_fb.auth()
;
export const db = initialized_fb.firestore();

```

###試したこと
0. Firebaseの管理画面からAPIのKey等の.envファイル内のコードをコピーし直しましたが、このエラーメッセージは消えませんでした。
0. コンポーネント内でimportする際は、以下のように書いています。
```
import { auth, db } = '../firebase/Firebase';
```
3..envファイルは .src外のrootに入れています。

どなたかご教示をいただけませんでしょうか。

Firebaseのログイン認証実装したいがYour API key is invalidと表示される

### 実現したいこと
- [ ] FirebaseのAuthenticationを使用し、メールアドレスとパスワードを登録したい

### 前提
簡単なWebページを作成しています。
ユーザー登録のページを作成するのに、FirebaseのAuthenticationを用いてメールアドレスとパスワードを登録する機能を追加します。


### 発生している問題・エラーメッセージ

```
「createUserWithEmailAndPassword」を使用して、ボタンを押したらメールアドレスとパスワードをFirebaseに保存するコードを書きました。
コンソールにエラーは出ませんが、Firebaseにメールアドレスとパスワードが登録されません。
Firebaseのメールアドレスとパスワードの認証は有効にしています。
```

### 該当のソースコード
SignUp.jsx
```ここに言語名を入力
import signupStyle from "./signup.module.css"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";


const SignUp = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const { email, password } = event.target.elements;

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

  return (
    <div className={signupStyle.container}>
        <h2>新規登録</h2>
        <form className={signupStyle.signup} onSubmit={handleSubmit}>
        <div>
            {/* <label>メールアドレス</label> */}
            <input name="email" type="email" placeholder="email" />
        </div>
        <div>
            {/* <label>パスワード</label> */}
            <input name="password" type="password" placeholder="password" />
        </div>
        <div>
            <button className={signupStyle.signup_btn} >登録</button>
        </div>
      </form>
    </div>
  )
}


export default SignUp;
```
Firebase.js
```ここに言語を入力
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";


const firebaseConfig = {
  apiKey: "AIzaSyDILyh1IjjV4SKipvEZA5aZnnHU4-BjC8A",
  authDomain: "react9-77eeb.firebaseapp.com",
  projectId: "react9-77eeb",
  storageBucket: "react9-77eeb.appspot.com",
  messagingSenderId: "306334895626",
  appId: "1:306334895626:web:29f72faf55dd303cebd9f3",
  measurementId: "G-PB6QFEBK89"
};


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);



export { auth };
export default db;
```

### 試したこと

Firebase公式のドキュメントを参考にしてみましたが、解決方法が分かりません。

### 補足情報
React/Reduxを使用しています。
初心者で勉強中です。
ご教授いただけると幸いです。


FirebaseのAuthenticationを使用しメールアドレスとパスワードを登録したい

### 実現したいこと

以下の２点について、質問があります。


①FireBaseAuthを使用する際に、以下のパーミッションは必要なのか。
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
必要なのか迷っている理由：GogleOneTap認証やGoogleログインを使用しているので、ユーザーの許可が必要なのではないかと思ったからです。


②FireBaseCloudFireStoreを使用する際に、以下のパーミッションは必要なのか。
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
必要なのか迷っている理由：FireBaseにデータを追加、削除、編集をしているのでユーザから書き込み権限、FireBaseからデータを取得しているのでユーザーから読み取り権限が必要なのではないかと思ったからです。

### 試したこと

現時点では、パーミッションの確認処理はなにもせず、manifestにもパーミッションの宣言はしていません。
していなくても、特に問題なく動いてはいます。
しかしパーミッションについて調べていると不安になってきたため、質問させていただきました。



Firebaseを使用する際のパーミッション宣言は必要なのか

### 前提

Firebase ウェブ [Codelabの公式ドキュメント](https://firebase.google.com/codelabs/firebase-web#0)に沿いながらFriendly Chatというウェブアプリケーションを作成しています。その中で、Firebase Authentication を使用してユーザーを認証しようとしております。
しかし、現状ログインボタンを押しても何も反応せずログインできない状態になっております。

### 実現したいこと
Firebase Authentication を使用してgoogle accountでログインできるようにする。

### 発生している問題・エラーメッセージ

```
Uncaught FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).
    at initializeApp (index.esm2017.js?8a30:423:1)
    at getApp (index.esm2017.js?8a30:476:1)
    at getAuth (index-0bb4da3b.js?d0d7:9497:30)
    at initFirebaseAuth (index.js?b635:66:29)
    at eval (index.js?b635:348:1)
    at ./src/index.js (main.js:159:1)
    at __webpack_require__ (main.js:263:41)
    at main.js:304:37
    at main.js:306:12
```

### 該当のソースコード

```firebase-config.js
/**
 * To find your Firebase config object:
 * 
 * 1. Go to your [Project settings in the Firebase console](https://console.firebase.google.com/project/_/settings/general/)
 * 2. In the "Your apps" card, select the nickname of the app for which you need a config object.
 * 3. Select Config from the Firebase SDK snippet pane.
 * 4. Copy the config object snippet, then add it here.
 */

const config = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

export function getFirebaseConfig() {
  if (!config || !config.apiKey) {
    throw new Error('No Firebase configuration object provided.' + '\n' +
    'Add your web app\'s configuration object to firebase-config.js');
  } else {
    return config;
  }
}
```
```
'use strict';

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

import { getFirebaseConfig } from './firebase-config.js';

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

initFirebaseAuth();
loadMessages();

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);
```
上記のファイルはindex.jsとなります。
自分が変更した部分以外は省略させていただきました。

### 試したこと

上記のファイルに
import { initializeApp } from "firebase/app";を追加してみたりしましたが、
エラー内容が増えるのみでした。

### 補足情報（FW/ツールのバージョンなど）
Mac(M1)
firebase --version 11.16.1
[サンプルコード](git clone https://github.com/firebase/codelab-friendlychat-web)はこちらから
見ることができます。

Firebase Authentication を使用してGoogleアカウントでログインをできるようにしたい

お世話になっております

Firebase Authenticationを使おうと思っているのですが、
セキュリティについて気になる点があったので、ご教授いただきたいです

構成はクライアント(SPA)とAPIサーバー(Firebase admin)として、
ユーザーの認証は以下のような流れで公式に書いてあります

1 クライアントでトークンを取得し, APIサーバーに送信
2 APIサーバーはverifyIdToken(またはVerifyIDTokenAndCheckRevoked)でトークンを検証

[公式URL: IDトークンを検証する ](https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ja)

このトークンはセッション管理に使用されていると思われますが([参考URL](https://ritou.hatenablog.com/entry/2020/01/08/070000))、
トークン自体はブラウザのindexedDBに保存されています

SPAのユーザー認証でlocalStorageに入れるとXSSのリスクがあるというのは有名です
Cookie(httponly + secure)とサーバーサイド側のセッション管理をするのが現状は無難という認識ですが、

Firebase Authenticationについて、以下の認識で合っていますでしょうか？

1 セッション管理はしている
2 しかし、indexedDBなのでXSSのリスクはある(localStorageで取り上げるよくある問題)

他にもセキュリティリスクがあったらぜひ教えていただきたいです
お手数ですが、よろしくお願いいたします

追記
ご指摘をいただいて、今回の質問はXSSではないかもしれません

今回の質問は、ユーザーの入力値などでJavaScriptが実行されるものではなく、
scriptタグなどで第三者のJSを実行している時、その第三者のJSが改ざんされ、localStorage/indexedDBの値を抜かれるというものです

こちらの記事を読んで気になりました
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

そうそうあることではないと思いますが、このあたりを意識する場合、Firebase Authenticationで何か対応されていることはありますでしょうか

Firebase Authenticationのセキュリティについて(トークンとXSS)

    "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
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)
      }
    }
  }
```

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

```tsx
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
```


Firebase authでエラーになる



ログイン済みの場合はログイン後の画面(signed_in_screen)、ログインしていない場合はログイン前の画面(community _screen)の画面を表示したいのですがコーディングを教えてください。

main.dart
```
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:kaisupo/screens/home_screen.dart';
import 'package:kaisupo/firebase_options.dart';

Future<void> main() async {
  //main関数を非同期処理にするときに必ず必要になる
  WidgetsFlutterBinding.ensureInitialized();
  //Firebase初期化
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "介護従事者応援アプリ",
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      // home: HomeScreen(),
      home: HomeScreen(),
    );
  }
}

```


kaisupo/screens/community_screen.dart
```
import 'package:firebase_auth/firebase_auth.dart';
import 'package:kaisupo/screens/signed_in_screen.dart';
import 'package:flutter/material.dart';
import 'package:kaisupo/parts/back_gradation_setting.dart';
import 'package:kaisupo/parts/bottom_navigation_bar.dart';
import 'package:kaisupo/parts/title_text.dart';

//介護士コミュニティ

class CommunityScreen extends StatefulWidget {
  @override
  _CommunityScreenState createState() => _CommunityScreenState();
}

class _CommunityScreenState extends State<CommunityScreen> {
  //現在のタブを保持する変数の定義と初期値の設定
  var _currentTab = TabItem.community;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  //タブの更新
  void _selectedTab(TabItem tabItem) {
    setState(() => _currentTab = tabItem);
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: PreferredSize(
            preferredSize: const Size.fromHeight(60.0),
            child: AppBar(
              title: TitleTextCreate(
                  title: "介護士コミュニティ",
                  size: 30,
                  color: Colors.white,
                  radius: 18,
                  shadow: Colors.indigo),
              centerTitle: true,
              backgroundColor: Colors.lightGreen.shade400,
            ),
          ),
          //BottomNavigationBarセット
          bottomNavigationBar: BottomNavigationBarSet(
            currentTab: _currentTab,
            onSelectedTab: _selectedTab,
          ),
          body: SafeArea(
            key: _formKey,
            child: Stack(children: [
              //背景グラデーション
              BackGroundDecoration(
                  first: Colors.deepOrangeAccent.shade200,
                  second: Colors.amber.shade300,
                  third: Colors.yellow.shade200),
              StreamBuilder<User?>(
                stream: FirebaseAuth.instance.authStateChanges(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    // スプラッシュ画面などに書き換えても良い
                    return const SizedBox();
                  }
                  if (snapshot.hasData) {
                    // User が null でなない、つまりサインイン済みのホーム画面へ
                    return CommunityScreen();
                  }
                  // User が null である、つまり未サインインのサインイン画面へ
                  return SignedInScreen();
                },
              ),
              SingleChildScrollView(
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextFormField(
                          controller: _emailController,
                          decoration: InputDecoration(labelText: 'メールアドレス'),
                          keyboardType: TextInputType.emailAddress,
                          validator: (String? value) {
                            if (value?.isEmpty == true) {
                              return 'メールアドレスを入力して下さい';
                            }
                            return null;
                          },
                        ),
                        SizedBox(height: 8),
                        TextFormField(
                          controller: _passwordController,
                          decoration: InputDecoration(labelText: 'パスワード'),
                          keyboardType: TextInputType.visiblePassword,
                          obscureText: true,
                          validator: (String? value) {
                            if (value?.isEmpty == true) {
                              return 'パスワードを入力して下さい';
                            }
                            return null;
                          },
                        ),
                        SizedBox(height: 16),
                        SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: () => _onSignIn(),
                            child: Text('ログイン'),
                          ),
                        ),
                        SizedBox(height: 8),
                        SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: () => _onSignUp(),
                            child: Text('新規登録'),
                          ),
                        ),
                      ]),
                ),
              ),
            ]),
          ),
        ),
      );

  Future<void> _onSignIn() async {
    try {
      if (_formKey.currentState?.validate() != true) {
        return;
      }

      //新規登録と同じく入力された内容をもとにログイン処理を行う
      final String email = _emailController.text;
      final String password = _passwordController.text;
      await FirebaseAuth.instance
          .signInWithEmailAndPassword(email: email, password: password);

      Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (_) => SignedInScreen(),
        ),
      );
    } catch (e) {
      await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('エラー'),
            content: Text(e.toString()),
          );
        },
      );
    }
  }

  Future<void> _onSignUp() async {
    try {
      if (_formKey.currentState?.validate() != true) {
        return;
      }
      final String email = _emailController.text;
      final String password = _passwordController.text;
      await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password);

      Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (_) => SignedInScreen(),
        ),
      );
    } catch (e) {
      await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('エラー'),
            content: Text(e.toString()),
          );
        },
      );
    }
  }
}
```

kaisupo/screens/signed_in_screen.dart

```ここに言語を入力
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:kaisupo/screens/community_screen.dart';
import 'package:kaisupo/parts/back_gradation_setting.dart';
import 'package:kaisupo/parts/bottom_navigation_bar.dart';
import 'package:kaisupo/parts/title_text.dart';

class SignedInScreen extends StatefulWidget {
  @override
  _SignedInScreenState createState() => _SignedInScreenState();
}

class _SignedInScreenState extends State<SignedInScreen> {
  var _currentTab = TabItem.community;
  //タブの更新
  void _selectedTab(TabItem tabItem) {
    setState(() => _currentTab = tabItem);
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(60.0),
        child: AppBar(
          title: TitleTextCreate(
              title: "介護士コミュニティ",
              size: 30,
              color: Colors.white,
              radius: 18,
              shadow: Colors.indigo),
          centerTitle: true,
          backgroundColor: Colors.lightGreen.shade400,
          actions: [
            //ログアウト用ボタン
            IconButton(
              onPressed: () => _onSignOut(),
              icon: Icon(Icons.exit_to_app),
            ),
          ],
        ),
      ),
      //BottomNavigationBarセット
      bottomNavigationBar: BottomNavigationBarSet(
        currentTab: _currentTab,
        onSelectedTab: _selectedTab,
      ),
    );
  }

  Future<void> _onSignOut() async {
    //ログアウト処理
    await FirebaseAuth.instance.signOut();

    //ログアウトに成功したらログイン画面に戻す
    //現在の画面は不要になるのでpushReplacementを使う
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (_) => CommunityScreen(),
      ),
    );
  }
}
```

変更
試したこと
[参考サイト]https://qiita.com/KosukeSaigusa/items/b19ec19379c5a2e4ceb2を参考に、実装しようと試みましたが、デバッグした後、RUNすることは出来たものの、community screeの画面が幾重にも重なる現象がおきました。その後、調べてはみたものの修正方法がわからず、お聞きしたく。

![UI](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-06/c791fe13-0cb8-4cbd-8479-281e6671ecf8.png)
