Authentification Firebase. request.auth est nul lorsque la page est actualisée

Question

Lors de l'actualisation de la page, le client Firebase semble penser que j'ai un utilisateur authentifié, mais les règles Firebase de Firestore impliquent que je n'ai pas d'utilisateur authentifié.

J'ai une application Firebase où l'utilisateur via la méthode signInWithEmailAndPassword 使用电子邮件和密码登录。我将持久性设置为 browserLocalPersistence。通常，当用户登录时，会使用经过身份验证的用户对象调用 onAuthStateChanged 方法，并且应用程序可以正常运行。当用户刷新页面时，我的 onAuthStateChanged est à nouveau déclenché avec un utilisateur non nul, mais en raison de mes règles de sécurité, toutes les requêtes Firebase échouent. Qu'est-ce que je fais de mal là.

Il s'agit d'une application Reactjs. S'il vous plaît laissez-moi savoir si je peux fournir d'autres réponses qui pourraient vous inspirer.

Mes règles Firebase :

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if isAuthenticated();
    }
    function isAuthenticated() {
        return request.auth != null && request.auth.uid != null;
    }
  }
  
}

Mon code de connexion :

setPersistence(sharedFirebaseAuth, browserLocalPersistence)
    .then(() => {
        signInWithEmailAndPassword(sharedFirebaseAuth, email, password)
            .then((userCredential) => {
            })
            .catch((error) => {
            });
})

Mon code onAuthStateChanged

onAuthStateChanged(sharedFirebaseAuth, (user) => {
  if(user){
    user.reload().then(()=>{
      requestDocs();
    });
  }
})

Answer 1

Je pense que tu as oublié read 和 write 之间的逗号，应该看起来像 allow read, write: if isAuthenticated();

Answer 2

J'ai fini par devoir implémenter un fournisseur d'authentification afin qu'il conserve mes informations utilisateur.

Nouveau fichier AuthContext.tsx

import React from "react"
import { User } from "firebase/auth";

export const AuthContext = React.createContext(null)

Nouveau fichier AuthProvider.tsx

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

export interface AuthProviderProps {
    children: JSX.Element;
}

export const AuthProvider: FC = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    const unsubscribe = sharedFirebaseAuth.onAuthStateChanged((firebaseUser) => {
      setUser(firebaseUser);
    });
    return unsubscribe
  }, []);

  return (
    {children}
  );
};

Puis j'ai mis à jour mon index.tsx comme ça

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AuthProvider } from './provider/AuthProvider';
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  
    
      
    
  
);

Puis mettez à jour la partie de app.tsx où j'appelle onAuthStateChanged comme suit

const user = useContext(AuthContext);

    useEffect(() => {
        if(user){
            requestDocs();
        }
    },[user]);

Après actualisation, il semble conserver toutes les informations d'authentification nécessaires pour extraire le document.