Users are occasionally Logged Out

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(






,
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 the**react-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 (

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.