I'm working on a react PWA using Firebase services. By PWA I mean it uses service workers, has Firestore offline data persistence enabled, and is supposed to log the user in as long as the session data is stored in the browser.
The problem I'm having is after a user is authenticated, I want the user to be able to turn off wifi and mobile data, and be able to open the app again, and the app treat the user like the user is authenticated. This all works fine on desktop browsers Chrome, and Firefox. (For some reason not on Safari)
However, when I use the latest Chrome and Firefox mobile browsers, the service workers work well but after turning off wifi an mobile data, the app doesn't treat the user like they are logged in and a error message in the console appears that reads "inner auth error". It unfortunately doesn't give much more information than that.
To check for a user I'm using the onAuthStateChanged listener in my App.tsx like this:
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
setCurrentUser(user.email);
} else {
setCurrentUser(null);
}
});
You can try for yourself here:
email: user@test.com pw: testpassword123
https://ravenstaging--review-dev-brown-4wcbt6-7jxhpu9l.web.app/
Any help/ information will be much appreciated. Thank you!
This error is occurring because if getAuth() is called or initializeAuth is defined with the browserPopupRedirectResolver, it will error on mobile and in Safari when offline. You can read how to fix it here: https://github.com/firebase/firebase-js-sdk/issues/5529