FirebaseExtended / FirebaseExtended/reactfire

useSigninCheck suspends indefinitely

Open
#405 8 comments 5 reactions 1 assignee Claimed by @jhuleatt View on GitHub
v5
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.