ログインしていない時にログイン後の画面にアクセスしようとするとログイン画面にリダイレクトするようにしたい。

Question

前提・実現したいこと

ログイン認証していない状態でログイン後の画面にアクセスしようとした時に、
ログイン画面にリダイレクトするようにしたい。

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

Uncaught (in promise) Error: Infinite redirect in navigation guard　at eval

該当のソースコードを実行した時に上記のようなエラーが出てきます。

該当のソースコード

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store'
import firebase from 'firebase';
import config from './firebase.config';

firebase.initializeApp(config);

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

//ログイン認証されていない場合にログイン画面にリダイレクトする処理
router.beforeEach((to, from, next) => {
    if (to.path === '/home') {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                next('/home')
            } else {
                next('/')
            }
        })
    } else {
        next();
    }
});

↓router.js

import { createRouter, createWebHistory } from 'vue-router';
import Login from './components/Login';
import SignUp from './components/SignUp';
import Home from './components/Home';

const router = createRouter({
   history: createWebHistory(),
   routes: [
       { path: '/', component: Login }, //ログイン画面のパス
       { path: '/signup', component: SignUp }, //新規登録画面のパス
       { path: '/home', component: Home }, //ログイン後の画面のパス
   ],
});

export default router;

上記の通り自分なりのコードを書いてみたのですが、なかなか上手くいかない状況です。
onAuthStateChangedでユーザー情報を確認するのではなく、別でフラグを用意した方がいいのでしょうか？
ご教示いただけると助かります????‍♂️