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.

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.

Written by the indexing model from the issue text.