La connexion Google ne fonctionne pas dans Next.js avec Firebase en raison d'une erreur Cross-Origin-Opener-Policy

Question

Je développe une application Web à l'aide de Next.js et Firebase. J'ai implémenté avec succès Google Sign-in dans mon application, mais je rencontre un problème qui empêche le processus de connexion de se dérouler comme prévu.

Lorsque j'essaie de me connecter, une fenêtre contextuelle apparaît comme prévu. Cependant, dans la console, je vois l'erreur suivante :

La stratégie Cross-Origin-Opener-Policy bloquerait l'appel window.closed.

En raison de cette erreur, le processus de connexion ne peut pas être terminé et l'utilisateur ne peut pas se connecter correctement.

Un peu plus de contexte : je teste cette fonctionnalité dans un environnement de développement sur localhost. Ce problème existe sur Chrome mais pas sur Firefox.

Cette erreur est-elle due à une mauvaise configuration de Cross-Origin-Opener-Policy ? Si tel est le cas, comment configurer correctement cette stratégie dans mon application Next.js pour Google Sign-in avec Firebase ?

Answer 1

Oui, cela peut avoir quelque chose à voir avec la configuration COOP de vos pages, vos pages de connexion et la façon dont elles interagissent. Lorsque deux pages n'ont pas le même COOP, elles se retrouvent dans des groupes de contexte de navigation distincts, ce qui peut empêcher certaines interactions, comme la méthode window.close.

Il est difficile de donner une solution exacte sans voir votre code et votre implémentation, mais vous pouvez essayer de modifier votre COOP afin qu'elle corresponde à la COOP de la page de connexion. Cela peut être same-origin或same-origin-allow-popups.

Ces en-têtes peuvent être définis dans la configuration NextJS : https://nextjs.org/docs/pages/api-reference/next-config-js/headers

Dans votre cas :

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin", // "same-origin-allow-popups"
          },
        ],
      },
    ];
  },
};

Answer 2

Cela semble être un problème qui n'a pas été résolu depuis longtemps. Cependant, veuillez essayer ce qui suit

1. Veuillez vérifier la portée - https://stackoverflow.com/a/76574604/9640177
2. Si vous utilisez l'API Google, assurez-vous d'avoir défini le domaine autorisé ou l'URI correct sur Firebase et GCP - https:// stackoverflow.com/a/76547658/9640177

Vous pouvez également vous référer au Cross-Origin Isolation Guide - https://web.dev/cross-origin-isolation-guide/ et à la Documentation MDN pour en savoir plus sur Cross-Origin-Opener-Policy

Si vous utilisez l'API Google, assurez-vous d'ajouter également l'URI avec le port, par exemple localhost:3000. Vous pouvez consulter mon site Web en direct - https://radheshyamdas.com/ J'utilise Firebase auth .js construit avec Next