Como mostrar um domínio personalizado durante o login | Documentação do Identity Platform

Neste documento, mostramos como personalizar o gerenciador de autenticação do Identity Platform para que os usuários vejam seu domínio ao fazer login.

Noções básicas sobre o gerenciador de autenticação padrão

Quando você ativa o Identity Platform para seu projeto, um subdomínio exclusivo com tecnologia do Firebase Hosting é criado automaticamente. O domínio tem o formato https://[PROJECT-ID].firebaseapp.com. Por padrão, o Identity Platform usa esse domínio para lidar com todos os redirecionamentos de login do OAuth, OIDC e SAML.

O uso do domínio padrão tem vários benefícios:

Configuração mais fácil
Usar vários domínios com os mesmos provedores federados
Compartilhar um único URL de callback em diferentes serviços e domínios
Funciona com provedores compatíveis com apenas um URL de callback por app.

A desvantagem do gerenciador padrão é que os usuários verão brevemente o URL https://[PROJECT-ID].firebaseapp.com ao fazer login.

Como personalizar o gerenciador de autenticação

Para modificar o gerenciador padrão e fornecer seu próprio:

Conecte seu projeto a um domínio personalizado. É necessário concluir essas etapas usando o Console do Firebase. Não há suporte para a Google Cloud CLI ou o Console do Google Cloud.
Acesse a página Provedores de identidade no console do Google Cloud e selecione seu provedor de SAML. Acessar a página "Provedores do Identity Platform"
Adicione o domínio personalizado à lista de Domínios autorizados.
Atualize o URL de callback com o provedor de identidade para usar o domínio personalizado em vez do domínio padrão. Por exemplo, altere https://myproject.firebaseapp.com/__/auth/handler para https://auth.mycustomdomain.com/__/auth/handler.
Clique em Save.

Como atualizar a configuração do SDK do cliente

Normalmente, é possível copiar o código de inicialização do SDK do cliente no console do Google Cloud. Se você personalizar o gerenciador de autenticação, será necessário atualizar o campo authDomain para seu domínio personalizado:

Versão 9 para a Web

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "...",
  // By default, authDomain is '[YOUR_APP].firebaseapp.com'.
  // You may replace it with a custom domain.
  authDomain: '[YOUR_CUSTOM_DOMAIN]'
};
const firebaseApp = initializeApp(firebaseConfig);auth_init_custom_domain.js

Versão 8 para a Web

firebase.initializeApp({
  apiKey: '...',
  // By default, authDomain is '[YOUR_APP].firebaseapp.com'.
  // You may replace it with a custom domain.
  authDomain: '[YOUR_CUSTOM_DOMAIN]'
});index.js