Integrar os SDKs do Firebase ao seu app da Web

O Firebase App Hosting é uma opção natural para apps da Web dinâmicos criados com o SDK do Firebase para JavaScript e o Firebase Admin SDK para Node.js. Em um app da Web completo, os SDKs do Firebase, como Authentication, Cloud Firestore e App Check, têm papéis importantes. Neste guia, descrevemos algumas estratégias importantes para ajudar a otimizar os SDKs do Firebase e começar a criar o Firebase no seu app da Web no Firebase App Hosting.

Inicializar automaticamente o Firebase Admin SDK e os SDKs da Web

Os ambientes do Google, como o Firebase App Hosting, oferecem uma inicialização simplificada de apps com uma chamada de construtor sem argumentos no momento do build e da execução. Esse é um recurso do Firebase Admin SDK para Node.js, um SDK do lado do servidor que desbloqueia uma grande área de funcionalidade do Firebase e pode ser muito útil no seu app da Web, e do SDK do Firebase para JavaScript.

Com o initializeApp(), você pode permitir que o Firebase App Hosting preencha automaticamente a configuração do app da Web para você, mantendo a opção de controle detalhado sobre valores específicos se quiser substituir os valores padrão.

Inicializar sem argumentos

Para inicializar o SDK do Firebase Admin SDK ou do Firebase JavaScript com valores de configuração padrão, use initializeApp() sem fornecer argumentos.

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

Para o Admin SDK, essa estratégia de inicialização funciona no App Hosting, assim como em outros ambientes de servidor do Google, incluindo as funções Cloud Run, App Engine e Cloud Run.

SDK para JavaScript

import { initializeApp } from 'firebase/app';
const app = initializeApp();

Para o SDK para JavaScript, essa estratégia de inicialização funciona em App Hosting.

Substituir valores preenchidos automaticamente

É possível modificar a configuração padrão que é injetada automaticamente. Observe que essas opções são diferentes entre o Admin SDK e o SDK para JavaScript.

Substituição de Admin SDK

Para especificar opções de inicialização personalizadas para serviços como Realtime Database, Cloud Storage ou Cloud Functions, use a variável de ambiente FIREBASE_CONFIG. Se o conteúdo da variável FIREBASE_CONFIG começar com um caractere {, ele será analisado como um objeto JSON. Caso contrário, a string será tratada pelo SDK como o caminho de um arquivo JSON que contém as opções.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"databaseURL":"https://project-id-default-rtdb.firebaseio.com","projectId":"my-project-id"}'

Substituição do SDK para JavaScript

Para substituir os valores padrão de FIREBASE_WEBAPP_CONFIG que o App Hosting injeta para a inicialização do SDK para JavaScript, especifique valores em apphosting.yaml:

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

Como usar a inicialização automática em outros ambientes

A inicialização automática é configurada com um script npm postinstall quando você instala o SDK do Firebase para JavaScript. O script postinstall procura a variável de ambiente FIREBASE_WEBAPP_CONFIG, que é definida automaticamente no ambiente de build App Hosting do Cloud Build.

Se você estiver instalando o SDK para JS fora do Cloud Build, será necessário definir essa variável de ambiente ao instalar o SDK do Firebase para JavaScript.

Para configurar o ambiente manualmente na instalação:

  1. Copie o objeto de configuração do app da Web do Firebase no console do Firebase.

  2. Em um terminal, defina a variável de ambiente FIREBASE_WEBAPP_CONFIG antes de executar o comando npm install.

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

Sempre que você mudar o projeto do Firebase ou o app da Web, execute esse comando novamente. Os caches intermediários (como .next/cache) também podem precisar ser limpos.

Usar FirebaseServerApp para SSR

Se você já trabalhou com o SDK do Firebase para JS ou outros SDKs de cliente do Firebase no desenvolvimento do seu app da Web, provavelmente já conhece a interface do FirebaseApp e como usá-la para configurar instâncias de apps. Para facilitar operações semelhantes no lado do servidor, o Firebase oferece FirebaseServerApp.

FirebaseServerApp é uma variante do FirebaseApp para uso em ambientes de renderização do lado do servidor (SSR). Ele inclui ferramentas para continuar sessões do Firebase que abrangem a divisão entre a renderização do lado do cliente (CSR) e do lado do servidor.

Use o FirebaseServerApp para:

  • Executar código do lado do servidor no contexto do usuário, em contraste com o Firebase Admin SDK, que tem direitos de administração completos.
  • Ative o uso de App Check em ambientes de SSR.
  • Continue uma sessão do Firebase Auth criada no cliente.

Para mais detalhes sobre como usar FirebaseServerApp para essas finalidades, consulte Usar o Firebase em apps da Web dinâmicos com SSR.

Ativar o App Check no seu app da Web

Use o App Check para reforçar a segurança do seu web app dinâmico no App Hosting. Ao implementar algumas das estratégias específicas do lado do servidor descritas em Usar o Firebase em apps da Web dinâmicos com SSR, é possível proteger seus back-ends do App Hosting contra abusos.