FirebaseExtended / FirebaseExtended/reactfire
useSigninCheck suspends indefinitely
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 403
- Avg merge
- 14h 53m
- Merged PRs (30d)
- 5
Description
I would like to create a protected route with `reactfire` and `react-router-dom`. To achieve this, I created a `PrivateRoute` component as follows:
```
export default function PrivateRoute(routeProps: RouteProps) {
const { status, data: signInCheckResult, error } = useSigninCheck();
if (signInCheckResult.signedIn) {
return ;
} else {
return (
);
}
}
```
I enabled `suspense` mode for `reactfire`.
Oddly, when staying on a single page for around ~1min, navigating to another page would cause the component to suspend indefinitely. Reloading the page, however, does momentarily unsuspend the page (but the effect would reappear after idle).
### Version info
"firebase": "8.7.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.0",
"reactfire": "3.0.0-rc.2"
### Test case
https://codesandbox.io/s/reactfire-suspend-demo-i3j1e
### Steps to reproduce
1. Click on `Sign in with Google` and proceed.
2. You should land in a `signed in` page with a log out button and a `link to test page`.
2. Wait for at least 30 seconds (idle).
3. Click on `Link to test page` (React Router Link)
4. Page would suspend indefinitely.
### Expected behavior
Page shouldn't suspend indefinitely.
### Actual behavior
Page suspends indefinitely.
Please let me know if there are any good implementations for integrating `reactfire` with `react-router-dom`.
Contributor guide
Assessment
This issue has not been assessed yet.