Firebase認証。ページが更新されると request.auth は null になります

Question

ページを更新すると、クライアント Firebase は認証済みユーザーがいるとみなしているようですが、Firestore の Firebase ルールは、認証済みユーザーがいないことを暗示しています。

ユーザーが signInWithEmailAndPassword 経由でメールとパスワードを使用してサインインする Firebase アプリがあります。永続性を browserLocalPersistence に設定します。通常、ユーザーがログインすると、認証されたユーザー オブジェクトを使用して onAuthStateChanged メソッドが呼び出され、アプリケーションが正常に実行されます。ユーザーがページを更新すると、onAuthStateChanged メソッドが null 以外のユーザーで再度起動されますが、セキュリティ ルールによりすべての Firebase クエリが失敗します。そこで私は何を間違っているのでしょうか。

これはreactjsアプリケーションです。あなたにインスピレーションを与える可能性のある他の回答を提供できる場合は、お知らせください。

私の Firebase ルール:

リーリー

私のログインコード:

リーリー

私の onAuthStateChanged コード

ああああ

Answer 1

read と write の間のカンマを忘れているようです。allow read, write: if isAuthenticated();

のようになります。

Answer 2

結局、ユーザー情報を保持するために認証プロバイダーを実装する必要がありました。

新しいファイル AuthContext.tsx

「react」から React をインポート
import { User } から "firebase/auth";

import const AuthContext = React.createContext(null)

新しいファイル AuthProvider.tsx

import { FC, useEffect, useState } from "react";
import { User } から "firebase/auth";
import {sharedFirebaseAuth} から "../Utils/SharedFirebase";
import { AuthContext } from "./AuthContext";

エクスポート インターフェイス AuthProviderProps {
    子: JSX.Element;
}

import const AuthProvider: FC = ({ Children }: AuthProviderProps) => {
  const [ユーザー、setUser] = useState(null);
  
  useEffect(() => {
    const unsubscribe =sharedFirebaseAuth.onAuthStateChanged((firebaseUser) => {
      setUser(firebaseUser);
    });
    返品 購読解除
  }、[]);

  戻る （
    ＃＃＃{子供たち}＃＃＃
  );
};
次に、index.tsx を次のように更新しました 

React を 'react' からインポートします。 ReactDOM を「react-dom/client」からインポートします。 「./App」からアプリをインポートします。 import { AuthProvider } から './provider/AuthProvider'; インポート "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot( document.getElementById('root') を HTMLElement として使用 ); root.render(

      
    
  
);
次に、app.tsx の onAuthStateChanged を呼び出す部分を次のように更新します。

const ユーザー = useContext(AuthContext); useEffect(() => { if(ユーザー){ requestDocs(); } }、[ユーザー]）;＃＃＃

更新後、ドキュメントを抽出するために必要な認証情報がすべて保持されているようです。