[NextJS / Firebase] L'instance firebase perds sa clé api coté client

popotte
Javascript React

Hello :)

Alors j'ai un soucis avec la connection Google de Firebase

Coté serveur j'initialise mon app firebase, et je déclenche une popup Google dans une page login, mais j'ai une erreur disant Firebase: Error (auth/api-key-not-valid.-please-pass-a-valid-api-key.)

En console les clés api de mon auth ont disparu, tout simplement :/

options: Object { apiKey: "undefined", authDomain: "undefined", databaseURL: "undefined", … }

apiKey: "undefined"
appId: "undefined"
authDomain: "undefined"
databaseURL: "undefined"
messagingSenderId: "undefined"
projectId: "undefined"
storageBucket: "undefined"

Pourtant quaund j'initialise les données sont bien affichées et fonctionnent bien :/

Voila pour le code:

// @/firebase/firebase_app
import { initializeApp, getApps, getApp } from 'firebase/app'
import { getAuth, GoogleAuthProvider } from "firebase/auth"

const firebase_config = {
  apiKey: `${process.env.FIREBASE_APP_API_KEY}`,
  authDomain: `${process.env.FIREBASE_APP_AUTH_DOMAIN}`,
  databaseURL: `${process.env.FIREBASE_APP_DATABASE_URL}`,
  projectId: `${process.env.FIREBASE_APP_PROJECT_ID}`,
  storageBucket: `${process.env.FIREBASE_APP_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.FIREBASE_APP_MESSAGING_SENDER_ID}`,
  appId: `${process.env.FIREBASE_APP_APP_ID}`
}

const app = !getApps.length ? initializeApp(firebase_config) : getApp()

console.log(app) // Affiche les clés comme il faut
const provider = new GoogleAuthProvider()
const auth = getAuth(app)

export { app, auth, provider }
// sign_in/page
"use client"
import React from 'react'
import { signInWithPopup } from 'firebase/auth'
import { app, auth, provider } from '@/firebase/firebase_app'

class Page extends React.Component {
  sign_in() {
    console.log(app) // toutes les option en undefined...
    console.log(auth) // toutes les options en undefined...
    signInWithPopup(auth, provider).then(r => console.log(r.user)) // Renvoie le message d'erreur...
  }
  render() {
    const user = auth.user
    return (
      <div>
        <div>
          <button onClick={ this.sign_in }>Sign In</button>
        </div>
      </div>
    )
  }
}

export default Page

Voila, quelqu'un sait d'où ça pourrait venir? ^^'

EDIT

Alors je viens de checker et le problème c'est l'env qui n'est disponible que coté serveur, mais bon passer mes clés api coté client c'est pas fou fou, y a un moyen pour faire déclencher la popup coté serveur? Ou au moins sécuriser les clés api si faut vraiment le rendre dispo coté front? :/

Aucune réponse