Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

useSigninCheck suspends indefinitely

Abierto
#405 8 comentarios 5 reacciones 1 asignado Ver en GitHub

@jhuleatt ya está trabajando en esto.

Desde el 22/7/2021.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

v5

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 <Route {...routeProps} />;
  } else {
    return (
      <Redirect
        to={{ pathname: "/signin", state: { from: routeProps.path } }}
      />
    );
  }
}

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.
  3. Wait for at least 30 seconds (idle).
  4. Click on Link to test page (React Router Link)
  5. 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.

Lenguaje dominante
TypeScript
Estrellas
3.6k
Forks
403
Merge medio
5 d 1 h
PR fusionados (30 d)
10

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de FirebaseExtended/reactfire

Todos los issues de FirebaseExtended/reactfire

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.