Maîtrise des entretiens Next.js : questions essentielles (partie 7)

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

69. Comment gérer l'authentification des utilisateurs avec JWT dans Next.js ?

Pour gérer l'authentification des utilisateurs avec JWT (JSON Web Tokens) dans Next.js, vous suivez généralement ces étapes :

1. Store JWT : Après vous être connecté, stockez le JWT dans les cookies ou localStorage.
   • Les cookies sont la méthode privilégiée pour stocker les jetons car ils sont automatiquement envoyés à chaque demande.

2. Définissez JWT dans les en-têtes HTTP : Pour les requêtes API, envoyez le JWT dans l'en-tête d'autorisation.
   

   const response = await fetch('/api/protected', {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
   });
   
   

   Copier après la connexion

3. Vérifiez JWT sur le serveur : Dans la route API ou le middleware, vérifiez le JWT avant d'accéder aux ressources protégées.
   

   import jwt from 'jsonwebtoken';
   
   export async function handler(req, res) {
     const token = req.headers.authorization?.split(' ')[1];
     if (!token) return res.status(401).json({ message: 'Unauthorized' });
   
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       req.user = decoded; // Attach the decoded user to the request
       next();
     } catch (err) {
       return res.status(401).json({ message: 'Invalid token' });
     }
   }
   
   

   Copier après la connexion

4. Utiliser des cookies pour une connexion persistante : vous pouvez définir des cookies HTTP uniquement avec JWT, afin que l'utilisateur reste authentifié au fil des sessions.

70. Comment pouvez-vous gérer l'autorisation dans Next.js ?

L'autorisation dans Next.js implique généralement de vérifier le rôle ou le niveau d'autorisation de l'utilisateur après une authentification réussie. Voici quelques approches :

1. Autorisation basée sur le rôle : Une fois l'utilisateur connecté, vous stockez son rôle dans le JWT et le vérifiez lorsque l'utilisateur tente d'accéder à une route protégée.
   

   export async function handler(req, res) {
     const token = req.cookies.token;
     if (!token) return res.status(403).json({ message: 'Forbidden' });
   
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     if (decoded.role !== 'admin') {
       return res.status(403).json({ message: 'Forbidden' });
     }
     // Proceed with handling the request
   }
   
   

   Copier après la connexion

2. Middleware d'autorisation personnalisé : vous pouvez créer un middleware personnalisé pour vérifier si l'utilisateur dispose des autorisations requises avant de servir certaines pages ou routes API.

3. Redirection des utilisateurs non autorisés : Pour les pages SSR ou SSG, vous pouvez utiliser getServerSideProps pour vérifier si l'utilisateur est autorisé et le rediriger sinon.
   

   export async function getServerSideProps(context) {
     const token = context.req.cookies.token;
     if (!token) {
       return { redirect: { destination: '/login', permanent: false } };
     }
     return { props: {} };
   }
   
   

   Copier après la connexion