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

Question

ページを更新すると、クライアント Firebase は認証済みユーザーがいるとみなしているように見えますが、firestorefirebase ルールは認証済みユーザーがいないことを暗示しています。ユーザーがsignInWithEmailAndPasswordを介して電子メールとパスワードを使用してログインするFirebaseアプリがあります。永続性をbrowserLocalPersistenceに設定しました。通常、ユーザーがログインすると、認証されたユーザー オブジェクトを使用して onAuthStateChan が呼び出されます。

P粉258788831 · Answer

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

のようになります。

P粉854119263 · Answer

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

新しいファイル 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(); } }、[ユーザー]）;＃＃＃

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