Rendu conditionnel des composants basés sur Next.js : comment dépendre si la demande provient d'un utilisateur Firebase authentifié ?

Question

Remarque : J'utilise Next.js 13 et le répertoire app/

J'apprends Firebase et Next.js et j'essaie de comprendre comment résoudre un problème de jouet. Disons que j'ai un Home()Component

/app/page.jsx

exporter la fonction par défaut Home() {
  retour (
    
      
Bonjour tout le monde
      
Seuls les utilisateurs authentifiés peuvent voir ce texte
    
  )
}
Mon objectif est de tout restituer de manière conditionnelle dans 
...
 selon que l'utilisateur qui demande la page est ou non un utilisateur connecté. Firebase restitue ce composant côté serveur à l'aide de JWT, Next.js 13, donc je pense que cela est possible, mais je n'arrive pas à comprendre comment le faire. 

Je connais onAuthStateChanged, mais pour autant que je sache, cela ne peut être utilisé que côté client. (Les utilisateurs avertis peuvent toujours afficher ce contenu protégé.) Comment puis-je protéger ce contenu côté serveur ? 
            

Answer 1

Pour vérifier si l'utilisateur est connecté, vous pouvez utiliser la méthode 'onAuthStateChanged'.

Stockez ces informations dans l'état du composant ou utilisez-les pour restituer conditionnellement des parties du composant.

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

export default function Home() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
  setUser(user);
  });
    return () => unsubscribe();
  }, []);

  return (
    <main>
      <h1>Hello World</h1>
      {user ? (
        <p>authenticated user</p>
      ) : null}
    </main>
  );
}

Pour effectuer l'authentification de l'utilisateur côté serveur, Next.js fournit 'getServerSideProps' pour obtenir le statut d'authentification de l'utilisateur

import firebase from 'firebase/app';
import 'firebase/auth';

export default function Home({ user }) {
  return (
    <main>
      <h1>Hello World</h1>
      {user ? (
        <p>authenticated user</p>
      ) : null}
    </main>
  );
}

export async function getServerSideProps(context) {
  const user = await new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged(user => {
      resolve(user);
    });
  });

  return {
    props: {
      user,
    },
  };
}

---

Solution mise à jour :

Créer une route côté serveur

import firebase from 'firebase/app';
import 'firebase/auth';
import express from 'express';

const app = express();

app.get('/api/user', async (req, res) => {
  const user = await new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged(user => {
      resolve(user);
    });
  });

  res.send(user);
});

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

Code client

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function Home() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const res = await axios.get('http://localhost:3000/api/user');
      const user = res.data;

      setUser(user);
    };

    fetchUser();
  }, []);

  return (
    <main>
      <h1>Hello World</h1>
      {user ? (
        <p>authenticated user</p>
      ) : null}
    </main>
  );
}