Users are occasionally Logged Out

Start with Firebase.js, index.js, FirebaseContext.js, and the Auth component, tracing the Firebase instance through onAuthStateChanged and the Realtime Database lookup. Reproduce the logout or PERMISSION_DENIED behavior and inspect the authentication and database state at that point. Done means identifying a reproducible cause and documenting or implementing a verified fix, but the issue provides no test or acceptance criteria.

Hello guys, I am having a weird behavior where Firebase occasionally logs out my users

Here is how I am using Firebase

I have a file called Firebase.js where I configured my Firebase instance as below

import * as firebase from "firebase";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

class Firebase {
    constructor() {
        this.firebase = firebase.initializeApp(firebaseConfig);
    }
}

export default Firebase;

I made this single instance of Firebase accessible to all my applications in my index.js file as below

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './pages/App';
import {BrowserRouter} from 'react-router-dom'
import Firebase from "./backend/configs/firebase";
import {FirebaseProvider} from "./contexts/FirebaseContext";

ReactDOM.render(
    <React.StrictMode>
        <FirebaseProvider value={new Firebase()}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </FirebaseProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

serviceWorker.unregister();

Here is my FirebaseContext.js file

import React from "react";

const FirebaseContext = React.createContext(null);

export const FirebaseProvider = FirebaseContext.Provider; export const FirebaseConsumer = FirebaseContext.Consumer;

export default FirebaseContext;

Now I am using StyledFirebaseAuth from the thereact-firebaseui dependency as the way to log in my users as below

import * as React from "react";
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
import FirebaseContext from "../contexts/FirebaseContext";

export default class Auth extends React.Component {
    static contextType = FirebaseContext;

    constructor(props, context) {
        super(props, context);
        this.firebase = this.context.firebase;
        this.uiConfig = {
            // Popup sign in flow rather than redirect flow.
            signInFlow: 'popup',
            signInOptions: [{
                defaultCountry: 'NG',
                provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            }], callbacks: {
                // Avoid redirects after sign-in.
                signInSuccessWithAuthResult: () => false
            }
        };
        this.state = {
            loading: false
        }
    }

    // Listen to the Firebase Auth state and set the local state.
    componentDidMount() {
        let self = this;
        this.unregisterAuthObserver = this.firebase.auth().onAuthStateChanged(
            (user) => {
                if (user != null) {
                    this.setState({
                        loading: true
                    })
                    const userId = user.uid;
                    //Fetch in the details of the logged in user
                    firebase
                         .database()
                        .ref(USERS + "/" + userId)
                        .once('value')
                        .then(function (snapshot) {
                            if (snapshot.val()) {
                                //Code omitted here
                                window.location = DASHBOARD
                            } else {
                            }
                        }, function () {
                        });
                }
            });
    }


    // Make sure we un-register Firebase observers when the component un-mounts.
    componentWillUnmount() {
        this.unregisterAuthObserver();
    }

    render() {
        return (
           <div>
              {
              Some code omitted here
              }
          </div>
        );
    }
}

After a while I noticed that firebase keeps on logging out the logged in user out such that subsequent database calls fails with PERMISSION_DENIED.

This has wasted alot of my time. Any help would be greatly appreaciated.

Thank you.