FirebaseExtended / FirebaseExtended/reactfire

useSigninCheck suspends indefinitely

Abierto
#405 8 comentarios 5 reacciones 1 asignado Reclamado por @jhuleatt Ver en GitHub
v5
Lenguaje dominante
TypeScript
Estrellas
3.6k
Forks
403
Merge medio
14 h 53 min
PR fusionados (30 d)
5

Descripción

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`.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.