4
votes

Comment restreindre l'accès aux pages dans next.js à l'aide de l'authentification Firebase?

Je travaille sur une application next.js qui utilise Firebase. Je dois utiliser le package d'authentification Firebase pour restreindre l'accès aux pages. L'exemple with-firebase-authentication ne montre pas l'authentification pour plusieurs pages.

import React from 'react';
import Router from 'next/router';

import { firebase } from '../../firebase';
import * as routes from '../../constants/routes';

const withAuthorization = (needsAuthorization) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authUser && needsAuthorization) {
          Router.push(routes.SIGN_IN)
        }
      });
    }

    render() {
      return (
        <Component { ...this.props } />
      );
    }
  }

  return WithAuthorization;
}

export default withAuthorization;

firebase firebase-authentication next.js

0 commentaires

3 Réponses :

0
votes

Bonjour après quelques recherches ici , il semble y avoir deux façons de faire ce. Soit vous alternez le processus d'initialisation de la page en utilisant Custom pour y inclure l'authentification - auquel cas vous pouvez transférer l'état d'authentification comme accessoire à la page suivante - ou vous demander un nouvel état d'authentification pour chaque chargement de page.

0 commentaires

1
votes

Ceci est un exemple de React Firebase Authentication , mais il devrait également fonctionner avec next.js .

L'idée principale est de créer un composant d'ordre supérieur, qui vérifie si l'utilisateur est authentifié et encapsule toutes les pages autour de cela:

const withAuthorization = (needsAuthorization) => (Component) => {
  class WithAuthorization extends React.Component {
    state = { authenticated: null }
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authUser && needsAuthorization) {
          Router.push(routes.SIGN_IN)
        } else {
          // authenticated
          this.setState({ authenticated: true })
        }
      });
    }

    render() {
      if (!this.state.authenticated) {
        return 'Loading...'
      }
      return (
        <Component { ...this.props } />
      );
    }
  }

  return WithAuthorization;
}

Vous pouvez remplacer _app.js et ne renvoyer que si l'utilisateur est authentifié.

Vous pouvez faire quelque chose comme ceci:

import React from 'react';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  }

  return WithAuthentication;
};

export default withAuthentication;

Le mieux serait de gérer cela sur le serveur.

2 commentaires

J'ai modifié la question en une solution que j'ai trouvée mais la page ne redirige qu'une fois le contenu de la page rendu.

dois-je ajouter le HOC au composant de page ???? J'ai essayé quelque chose comme vous l'avez fait ci-dessus, mais il rend puis redirige ..

0
votes

J'ai également eu du mal à intégrer l'authentification Firebase, mais a fini par utiliser l'approche détaillée dans l'exemple with-iron-session sur nextjs: https://github.com/hajola/with-firebase-auth-iron-session

0 commentaires