score:3
it appears to be a bug in reactfire. see https://github.com/firebaseextended/reactfire/discussions/228.
a possible workaround is mentioned there suggesting to call the following function immediately after signing out:
export const clearfirestorecache = () => {
const map = globalthis['_reactfirepreloadedobservables'];
array.from(map.keys()).foreach(
(key) => key.includes('firestore') && map.delete(key),
);
};
score:0
i finally fixed it when i added a routing system (react-router-dom) . index.ts
<themeprovider theme={apptheme}>
<firebaseappprovider firebaseconfig={firebaseconfig}>
<snackbarprovider maxsnack={6}>
<suspensewithperf fallback={<loader/>} traceid={'web-initial-loading'}>
<hashrouter>
<route path={'/signin'}>
<signin/>
</route>
<route path={'/dashboard'}>
<dashboard/>
</route>
</hashrouter>
</suspensewithperf>
</snackbarprovider>
</firebaseappprovider>
</themeprovider>
and i added a redirect to dashboard on login and a redirect on signin on logout.
i will have to find a way to handle auto signout if not loggedin while on a secured page. but from what i understand, we cannot rely directly on useauth or for more complex routing than showing a component. if you make call that needs to be authenticated to work, you better use a real routing system.
edit to automatically redirect to sign in page and remember where you were you can replace
<route path={'/dashboard'}>
<dashboard/>
</route>
with
{
user
? <> // all secured routes
<route path={'/dashboard'}>
<dashboard />
</route>
</>
: <redirect to={`/signin redirectpath=${history.location.pathname}`} />
}
where user
is the useuser()
hook.
score:0
as per thomas hammerl's answer above, it appears to be a bug in reactfire. see https://github.com/firebaseextended/reactfire/discussions/228.
i ran into this issue while upgrading to firebase 9, but reloading the page after the user signs out was the fix for me:
signout(getauth())
.then(() => {
window.location.reload();
})
.catch((e) => {
// handle error eg
console.log(e.message);
});
this was suggested in the discussion by epodol as a temporary workaround, hopefully the issue can be fixed in the library soon.
Source: stackoverflow.com
Related Query
- Missing permissions error message right after login
- Getting an error trying to start React right after (There might be a problem with the project dependency tree....)
- React google Login firing error on render and after sign in
- Missing file extension "tsx" for "./reducer" error after using eslint-config-airbnb
- firebase Error : FirebaseError: Missing or insufficient permissions
- webpack-dev-server: ERROR in missing ) after argument list @ multi main
- Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions
- Catching error `SyntaxError: missing ) after argument list` when trying to deploy NextJS app to Docker
- Right way of using react-hook-form with typescript and material-ui for showing error message
- Next.js 500 Internal Server Error right after calling useEffect Hook inside 404 Page
- How can I show error message after select photo?
- React Firebase is not returning error message even after giving wrong input
- Formik show validation error message after seperating into components
- Error routing user to another component after login
- after creating a react app npm start doesnt work. No error message given
- Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions for chatRooms
- How to show Toast only once after received error message prop from Redux store
- Error in snapshot listener: FirebaseError: Missing or insufficient permissions
- How to put an error message when putting the credentials wrong in a login
- How to display a success or error message after submitting the form? Using react
- Unable to display the right error message
- How to reset the form and login error message in reactjs
- Keep getting error message about avoiding wrapping code in act after wrapping code in act
- How do I get my error message to go away after form validation in react js?
- React login error message returns undefined on first call then displays error on second call
- Application error - I'm getting an error message after deployment to Heroku even though my app works fine in development
- React App Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`. Error Message
- After referring to document by querySelector I get an error in my React app - everything works fine until I scroll right to the bottom
- React App Firebase Missing or insufficient permissions error when importing data to firestore
- Rendering an error message after form submission in React
More Query from same tag
- How to set expiration time for data stored in ReactJs localStorage
- How to send component's state as payload to store in React redux
- Make a div scollable on overflow-y but at the same time overflow-x should be completely visible
- UseSelector State is Undefined
- How to implement useMemo hook to sort the table by name?
- 405 - http verb used to access this page is not allowed iis in reactjs app
- React: How to make store invulnerable for reload?
- How do I nest routes with React router
- Output filename not configured Error in Webpack
- My state changes when the component is re-rendered
- How to handle events in pure functional React components
- Not able to get length of an array
- Strikethrough in React
- How to fill color to Html?
- hiding a form- component after clicking submit react js
- How to apply css to a specific component?
- Update defaultValue on React component after successful request
- React Hooks Error: Hooks can only be called inside the body of a function component
- how build the webpack.config.prod.js?
- How to test react image component that gets it's src attribute from a REST api
- event.movementX is not working in IE11 if i use mousemove event inside mousedown event
- Is there any possible ways to update (synchronize) localStorage for all opened tabs (browser windows) in React JS (Redux)?
- Adding serial number to the react bootstrap table
- Why won't setMatrix([...matrix, [[x][y]]]) work?
- How to modify & replace the key an object by comparing it with other objects?
- How to Put Routerlink in IconButton in ReactJS
- React-admin - How can I force the Dasbhoard to ask for login if not authenticated
- Interface to extend or function to create similar types
- React-ChartJS-2 Disappearing Chart when using Labels
- How to implement a react controlled input using useReducer?