Authentification Firebase. request.auth est nul lorsque la page est actualisée
P粉693126115
P粉693126115 2024-02-25 21:55:56
0
2
469

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();
    });
  }
})

P粉693126115
P粉693126115

répondre à tous(2)
P粉258788831

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

P粉854119263

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal