Autenticação simples de Firebase para todas as estratégias de renderização do Next.js.
Este pacote simplifica obter o Autenticed FireBase User e ID Token durante o lado do cliente e o servidor (SSR).
Tratamos o Firebase JS SDK como a fonte da verdade para o status de autenticação. Quando o usuário assina, chamamos um terminal para gerar um token de atualização e armazenar as informações do usuário, ID Token e atualizar o token em cookies. Solicitações futuras para as páginas SSR recebem as informações do usuário e o token de ID dos cookies, atualizando o token de identificação, conforme necessário. Quando o usuário efetua login, desperdiçamos os cookies.
Veja uma demonstração ao vivo do aplicativo de exemplo.
Dependendo das necessidades do seu aplicativo, outras abordagens podem funcionar melhor para você.
Se o seu aplicativo usar apenas páginas estáticas ou não precisar do usuário do Firebase para SSR, use o Firebase JS SDK diretamente para carregar o usuário no lado do cliente.
getServerSideProps .Se o seu aplicativo precisar do usuário do Firebase para SSR (mas não precisar do lado do servidor ID Token) , você poderá considerar uma dessas abordagens:
Se o seu aplicativo precisar de uma solução de autenticação generalizada - não especificamente a autenticação da Base Fire - você poderá considerar usar o Nextauth.js. NextAuth.js não usa a autenticação do FireBase, mas suporta uma ampla variedade de provedores de identidade, incluindo o Google. Leia mais aqui sobre as diferenças entre next-firebase-auth e Nextauth.js para ver o que funciona melhor para suas necessidades.
Se o seu aplicativo usar o roteador de aplicativos Next.js, este pacote ainda não o suportará. Você pode seguir o progresso no #568.
Este pacote provavelmente será útil se você esperar usar páginas estáticas e SSR ou se você precisar de acesso ao lado do servidor ID do FireBase ID.
Uma nota rápida sobre o que este pacote não faz:
- Não fornece interface do usuário de autenticação. Considere o Firebaseui-Web ou construa o seu próprio.
- Ele não estende a funcionalidade do Firebase além de fornecer acesso universal ao usuário autentico. Use o Firebase Admin SDK e o Firebase JS SDK para quaisquer outras necessidades.
Instalar:
yarn add next-firebase-auth ou npm i next-firebase-auth
Verifique se as dependências de colegas também estão instaladas:
yarn add firebase firebase-admin next react react-dom
Crie um módulo para inicializar next-firebase-auth .
Consulte a documentação de configuração para obter detalhes
// ./initAuth.js
import { initializeApp } from 'firebase/app'
import { init } from 'next-firebase-auth'
const initAuth = ( ) => {
const firebaseClientInitConfig = {
apiKey : 'MyExampleAppAPIKey123' , // required
authDomain : 'my-example-app.firebaseapp.com' ,
databaseURL : 'https://my-example-app.firebaseio.com' ,
projectId : 'my-example-app-id' ,
}
initializeApp ( firebaseClientInitConfig )
init ( {
authPageURL : '/auth' ,
appPageURL : '/' ,
loginAPIEndpoint : '/api/login' ,
logoutAPIEndpoint : '/api/logout' ,
onLoginRequestError : ( err ) => {
console . error ( err )
} ,
onLogoutRequestError : ( err ) => {
console . error ( err )
} ,
firebaseAuthEmulatorHost : 'localhost:9099' ,
firebaseAdminInitConfig : {
credential : {
projectId : 'my-example-app-id' ,
clientEmail : '[email protected]' ,
// The private key must not be accessible on the client side.
privateKey : process . env . FIREBASE_PRIVATE_KEY ,
} ,
databaseURL : 'https://my-example-app.firebaseio.com' ,
} ,
// Use application default credentials (takes precedence over firebaseAdminInitConfig if set)
// useFirebaseAdminDefaultCredential: true,
firebaseClientInitConfig ,
// tenantId: 'example-tenant-id', // Optional, only necessary in multi-tenant configuration
cookies : {
name : 'ExampleApp' , // required
// Keys are required unless you set `signed` to `false`.
// The keys cannot be accessible on the client side.
keys : [
process . env . COOKIE_SECRET_CURRENT ,
process . env . COOKIE_SECRET_PREVIOUS ,
] ,
httpOnly : true ,
maxAge : 12 * 60 * 60 * 24 * 1000 , // twelve days
overwrite : true ,
path : '/' ,
sameSite : 'strict' ,
secure : true , // set this to false in local (non-HTTPS) development
signed : true ,
} ,
onVerifyTokenError : ( err ) => {
console . error ( err )
} ,
onTokenRefreshError : ( err ) => {
console . error ( err )
} ,
} )
}
export default initAuth Defina as variáveis de ambiente privado FIREBASE_PRIVATE_KEY , COOKIE_SECRET_CURRENT e COOKIE_SECRET_PREVIOUS in .env.local . Se você ativou o emulador de autenticação Firebase, também precisará definir a variável de ambiente FIREBASE_AUTH_EMULATOR_HOST .
Inicialize next-firebase-auth em _app.js :
// ./pages/_app.js
import initAuth from '../initAuth' // the module you created above
initAuth ( )
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } />
}
export default MyAppCrie pontos de extremidade da API de login e logout que defina os cookies auth:
// ./pages/api/login
import { setAuthCookies } from 'next-firebase-auth'
import initAuth from '../../initAuth' // the module you created above
initAuth ( )
const handler = async ( req , res ) => {
try {
await setAuthCookies ( req , res )
} catch ( e ) {
return res . status ( 500 ) . json ( { error : 'Unexpected error.' } )
}
return res . status ( 200 ) . json ( { success : true } )
}
export default handler // ./pages/api/logout
import { unsetAuthCookies } from 'next-firebase-auth'
import initAuth from '../../initAuth' // the module you created above
initAuth ( )
const handler = async ( req , res ) => {
try {
await unsetAuthCookies ( req , res )
} catch ( e ) {
return res . status ( 500 ) . json ( { error : 'Unexpected error.' } )
}
return res . status ( 200 ) . json ( { success : true } )
}
export default handlerPor fim, use o usuário autenticado em uma página:
// ./pages/demo
import React from 'react'
import {
useUser ,
withUser ,
withUserTokenSSR ,
} from 'next-firebase-auth'
const Demo = ( ) => {
const user = useUser ( )
return (
< div >
< p > Your email is { user . email ? user . email : 'unknown' } . </ p >
</ div >
)
}
// Note that this is a higher-order function.
export const getServerSideProps = withUserTokenSSR ( ) ( )
export default withUser ( ) ( Demo ) init(config) Inicializa next-firebase-auth , pegando um objeto de configuração.
withUser({ ...options })(PageComponent) Uma função de ordem superior para fornecer o contexto User a um componente. Use isso com qualquer página Next.js que acesse o usuário autentico através do gancho useUser . Opcionalmente, ele pode redirecionar do lado do cliente com base no status de autenticação do usuário.
Ele aceita as seguintes opções:
| Opção | Descrição | Padrão |
|---|---|---|
whenAuthed | A ação a ser tomada se o usuário for autenticado. Um de AuthAction.RENDER ou AuthAction.REDIRECT_TO_APP . | AuthAction.RENDER |
whenAuthedBeforeRedirect | A ação a ser tomada enquanto espera o navegador redirecionar. Relevante quando o usuário é autenticado e o wheneauthed está definido como autaction.redirect_to_app. Um de: AuthAction.RENDER ou AuthAction.SHOW_LOADER ou AuthAction.RETURN_NULL . | AuthAction.RETURN_NULL |
whenUnauthedBeforeInit | A ação a ser tomada se o usuário não for autenticada, mas o Firebase Client JS SDK ainda não foi inicializado. Um de: AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN , AuthAction.SHOW_LOADER . | AuthAction.RENDER |
whenUnauthedAfterInit | A ação a ser tomada se o usuário não for autenticada e o Firebase Client JS SDK já foi inicializado. Um de: AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | O URL de destino de redirecionamento quando devemos redirecionar para o aplicativo. Um pageurl. | config.appPageURL |
authPageURL | O URL de destino de redirecionamento quando devemos redirecionar para a página de login. Um pageurl. | config.authPageURL |
LoaderComponent | O componente a renderizar quando o usuário não é autorizado e whenUnauthedBeforeInit você deve ser definido como AuthAction.SHOW_LOADER . | nulo |
Por exemplo, esta página será redirecionada para a página de login se o usuário não for autenticado:
import { withUser , AuthAction } from 'next-firebase-auth'
const DemoPage = ( ) => < div > My demo page </ div >
export default withUser ( {
whenUnauthedAfterInit : AuthAction . REDIRECT_TO_LOGIN ,
authPageURL : '/my-login-page/' ,
} ) ( DemoPage )Aqui está um exemplo de uma página de login que mostra um carregador até que o Firebase seja inicializado e depois redirecionar para o aplicativo se o usuário já estiver conectado:
import { withUser , AuthAction } from 'next-firebase-auth'
const MyLoader = ( ) => < div > Loading... </ div >
const LoginPage = ( ) => < div > My login page </ div >
export default withUser ( {
whenAuthed : AuthAction . REDIRECT_TO_APP ,
whenUnauthedBeforeInit : AuthAction . SHOW_LOADER ,
whenUnauthedAfterInit : AuthAction . RENDER ,
LoaderComponent : MyLoader ,
} ) ( LoginPage )Para o uso do TypeScript, dê uma olhada aqui.
withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) Uma função de ordem superior que envolve uma função Next.JS Pages getServerSideProps para fornecer o contexto User durante a renderização do lado do servidor. Opcionalmente, ele pode ser redirecionado do lado do servidor com base no status de autenticação do usuário. Uma função embrulhada é opcional; Se fornecido, ele será chamado com um objeto context que contém uma propriedade user .
Ele aceita as seguintes opções:
| Opção | Descrição | Padrão |
|---|---|---|
whenAuthed | A ação a ser tomada se o usuário for autenticado. AuthAction.RENDER ou AuthAction.REDIRECT_TO_APP . | AuthAction.RENDER |
whenUnauthed | A ação a ser tomada se o usuário não for autenticado. AuthAction.RENDER ou AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | O URL de destino de redirecionamento quando devemos redirecionar para o aplicativo. Um pageurl. | config.appPageURL |
authPageURL | O URL de destino de redirecionamento quando devemos redirecionar para a página de login. Um pageurl. | config.authPageURL |
Por exemplo, esta página será SSR para usuários autenticados, buscando adereços usando seu token de ID do Firebase e irá redirecionar para a página de login se o usuário não for autenticado:
import {
useUser ,
withUser ,
withUserTokenSSR ,
} from 'next-firebase-auth'
const DemoPage = ( { thing } ) => < div > The thing is: { thing } </ div >
export const getServerSideProps = withUserTokenSSR ( {
whenUnauthed : AuthAction . REDIRECT_TO_LOGIN ,
} ) ( async ( { user } ) => {
// Optionally, get other props.
const token = await user . getIdToken ( )
const response = await fetch ( '/api/my-endpoint' , {
method : 'GET' ,
headers : {
Authorization : token ,
} ,
} )
const data = await response . json ( )
return {
props : {
thing : data . thing ,
} ,
}
} )
export default withUser ( ) ( DemoPage ) withUserSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) Comporta -se quase de forma idêntica ao withUserTokenSSR , com uma diferença importante: o user não conterá um token de ID.
Este método baseia -se em dados do usuário authed de um cookie em vez de verificar ou atualizar um token de ID do Firebase. Consequentemente:
user fornecido via contexto será resolvido para NULL quando você ligar para user.getIdToken() .withUserTokenSSR .withUserTokenSSR .cookies.signed é definido como false . Fazer isso é um risco potencial de segurança, porque os valores de cookies do usuário authados podem ser modificados pelo cliente.
Isso exige as mesmas opções que withUserTokenSSR .
useUser() Um gancho que retorna o user atual. Para usar isso, a página Next.js deve ser embrulhada no withUser . Se o usuário não for autenticado, useUser retornará uma instância User com um id nulo.
Por exemplo:
import { useUser , withUser } from 'next-firebase-auth'
const Demo = ( ) => {
const user = useUser ( )
return (
< div >
< p > Your email is { user . email ? user . email : 'unknown' } . </ p >
</ div >
)
}
export default withUser ( ) ( Demo ) setAuthCookies(req, res)Define cookies para armazenar as informações do usuário autenticado. Chame isso do seu ponto final da API "Login".
Os cookies são gerenciados com cookies . Veja a configuração para opções de cookies.
O argumento req deve ser um objeto de solicitação IncomingMessage / next.js. O argumento res deve ser um objeto de resposta ServerResponse / next.js. Requer que o cabeçalho da solicitação Authorization seja definido para o token de identificação de usuário do Firebase, que este pacote lida automaticamente.
Isso só pode ser chamado no lado do servidor.
unsetAuthCookies(req, res)Unsets (expira) os cookies Auth. Chame isso do seu terminal API "logout".
O argumento req deve ser um objeto de solicitação IncomingMessage / next.js. O argumento res deve ser um objeto de resposta ServerResponse / next.js.
Isso só pode ser chamado no lado do servidor.
verifyIdToken(token) => Promise<User> Verifica um token de ID do Firebase e resolve uma instância User . Isso serve a um propósito semelhante ao Firebase Admin SDK's VerifyidToken.
getUserFromCookies({ ...options })Adicionado em v1
Verifica e retorna o user da Auth Cookies. Esta é uma alternativa para verifyIdToken , que verifica o usuário de um token de ID.
Em geral, recomendamos que os pontos de extremidade da API usem um token de ID em vez de cookies para identificar o usuário, o que evita algumas vulnerabilidades potenciais de CSRF. No entanto, esse método será útil para pontos de extremidade deve confiar exclusivamente com os valores dos cookies para identificar o usuário.
Isso só pode ser chamado no lado do servidor.
Veja este exemplo para obter mais informações sobre como usar isso em um ambiente de back -end independente fora do Next.JS.
O argumento das opções pode incluir:
Object - um objeto de solicitação IncomingMessage / next.js
Um objeto de solicitação cujo valor do cabeçalho cookie será usado para verificar um usuário. O valor req ou authCookieValue são necessários.
Boolean
Se o usuário devolvido deve ou não incluir um token de ID do Firebase. Padrões para True. Quando é verdade, o comportamento segue o de withUserTokenSSR ; Quando falso, segue -se o de withUserSSR . Leia mais sobre a distinção nos documentos para Withusersr.
String
Como alternativa ao fornecimento do objeto req , você pode fornecer diretamente o valor do cookie de autenticação a ser usado. Por exemplo, se o seu cookie de autenticação for nomeado MyAuth , você forneceria o valor do cookie MyAuth.AuthUser (se includeToken for false) ou MyAuth.AuthUserTokens (se includeToken for verdadeiro).
O valor req ou authCookieValue são necessários.
String
O valor da assinatura do cookie de autenticação, se estiver usando cookies assinados. Por exemplo, se o seu cookie de autenticação for chamado MyAuth , você fornecerá o valor do cookie MyAuth.AuthUser.sig (se includeToken for falso) ou MyAuth.AuthUserTokens.sig (se includeToken for verdade).
AuthAction Um objeto que define renderizar/redirecionar opções para withUser e withUserTokenSSR . Veja Autção.
Veja um exemplo de configuração aqui. Forneça a configuração quando ligar para init .
String|Function|Object - um Pageurl
O URL padrão para navegar quando withUser ou withUserTokenSSR precisa redirecionar para fazer login. Opcional, a menos que use a ação de autenticação AuthAction.REDIRECT_TO_LOGIN .
String|Function|Object - um Pageurl
O URL padrão para navegar quando withUser ou withUserTokenSSR precisa redirecionar para o aplicativo. Opcional, a menos que use o AuthAction.REDIRECT_TO_APP Auth Ação.
String
O endpoint da API que este módulo ligará quando o estado de autenticação for alterado para um usuário autenticado do Firebase.
String
O endpoint da API que este módulo ligará quando o estado de autenticação mudar para um usuário não autenticado do Firebase.
Function (opcional)
Um manipulador chamado se o endpoint da API de login retornar uma resposta não 200. Se um manipulador não estiver definido, esta biblioteca colocará respostas não a 200.
Não usado ou permitido se um tokenChangedHandler personalizado estiver definido.
Function (opcional)
Um manipulador chamado se o endpoint da API de logout retornar uma resposta não 200. Se um manipulador não estiver definido, esta biblioteca colocará respostas não a 200.
Não usado ou permitido se um tokenChangedHandler personalizado estiver definido.
Function
Um retorno de chamada que é executado quando o estado de autenticação muda para um usuário específico. Use isso se você deseja personalizar como o aplicativo do lado do cliente chama seus pontos de extremidade de login/logout da API (por exemplo, para usar um buscador personalizado ou adicionar cabeçalhos personalizados). tokenChangedHandler recebe um User como um argumento e é chamado quando o token de ID do usuário muda, da mesma forma que o evento onIdTokenChanged da Firebase.
Se esse retorno de chamada for especificado, o usuário será responsável:
Veja o manipulador padrão para obter orientação.
String
O host e a porta para o emulador de autenticação local da Firebase. Se esse valor for definido, o emulador de autenticação será inicializado com o host e a porta fornecidos.
Deve corresponder ao valor da variável de ambiente FIREBASE_AUTH_EMULATOR_HOST , por exemplo, localhost:9099 .
Object
Configuração passada para o initializeApp da firebase-admin . Ele deve conter uma propriedade credential (um objeto simples) e uma propriedade databaseURL . Necessário , a menos que você inicialize firebase-admin se antes de inicializar next-firebase-auth .
O firebaseAdminInitConfig.credential.privateKey não pode ser definido no lado do cliente e deve viver em uma variável de ambiente secreto.
Usando vercel? Consulte Adicionando uma chave privada ao Vercel para orientação.
Boolean
Quando verdadeiro, firebase-admin encontrará implicitamente sua conta de serviço de ambiente de hospedagem durante initializeApp . Isso é aplicável à plataforma FireBase e Google Cloud e recomendou a chave da conta de serviço ao código por meio do caminho do arquivo ou valor direto.
NOTA : Para configurar firebase-admin , deve ser fornecido firebaseAdminInitConfig ou useFirebaseAdminDefaultCredential . O uso das credenciais padrão substituirá os valores passados para firebaseAdminInitConfig.credential se ambos forem apresentados.
Object
Configuração correspondente ao Firebase JS SDK initializeApp . O valor do firebaseClientInitConfig.apiKey é sempre necessário . Recomendamos a inicialização do SDK do cliente Firebase antes de inicializar next-firebase-auth ; No entanto, next-firebase-auth tentará inicializar o Firebase se um aplicativo Firebase ainda não existir.
Object
Configurações usadas para cookies de autores. Usamos cookies para gerenciar cookies.
As propriedades incluem:
name : Usado como base para nomes de biscoitos: Se name for definido como "MyExample", os cookies serão nomeados MyExample.AuthUser e MyExample.AuthUserTokens (mais MyExample.AuthUser.sig e MyExample.AuthUserTokens.sig Se os cookies forem assinados). Obrigatório.keys : uma variedade de cordas que serão usadas para assinar cookies; Por exemplo, ['xD$WVv3qrP3ywY', '2x6#msoUeNhVHr'] . Como essas seqüências são segredos, forneça -as por meio de variáveis de ambiente secreto, como [ process.env.COOKIE_SECRET_CURRENT, process.env.COOKIE_SECRET_PREVIOUS ] . A matriz keys é passada para o construtor KeyGrip, conforme descrito no pacote cookies . Necessário , a menos que signed seja definido como false .cookies.set . O valor keys não pode ser definido no lado do cliente e deve viver em uma variável de ambiente secreto.
Para segurança, o valor maxAge deve ser de duas semanas ou menos. Observe que maxAge é definido em milissegundos.
NOTA: As expiração dos cookies serão estendidas automaticamente quando o usuário carregar o Firebase JS SDK.
O Firebase JS SDK é a fonte da verdade para a autenticação; portanto, se os cookies expirarem, mas o usuário ainda for aprimorado com o FireBase, os cookies serão definidos automaticamente novamente quando o usuário carregar o Firebase JS SDK - mas o usuário não será autenticado durante o SSR nesse primeiro pedido.
Function (opcional)
Manipulador de erros que será chamado se houver um erro inesperado ao verificar o lado do servidor de token ID do usuário. Ele receberá um erro de autenticação do Firebase.
Esta biblioteca não jogará quando não puder verificar um token de identificação. Em vez disso, ele fornecerá um usuário não autenticado ao aplicativo. Normalmente, ele lida com erros comuns relacionados a authat, como auth/id-token-expired e auth/user-disabled sem arremesso. Veja #366 e #174 para obter um plano de fundo adicional.
Function (opcional)
Manipulador de erros que será chamado se houver um erro inesperado ao atualizar o lado do servidor de token de ID do usuário.
Esta biblioteca não jogará quando não puder atualizar um token de identificação. Em vez disso, ele fornecerá um usuário não autenticado ao aplicativo. Veja #366 e #174 para obter um plano de fundo adicional.
Define ações a serem tomadas dependendo do status de autenticação de um usuário, usando as seguintes constantes:
AuthAction.RENDER : Renderize o componente filho
AuthAction.SHOW_LOADER : mostre um componente de carregador
AuthAction.RETURN_NULL : Retorne nulo em vez de qualquer componente
AuthAction.REDIRECT_TO_LOGIN : redirecionar para a página de login
AuthAction.REDIRECT_TO_APP : redirecionar para o aplicativo
O objeto do usuário é usado nos contextos do lado do servidor e do lado do cliente. Esta é uma representação normalizada de um usuário do Firebase.
ID - String|null
O ID do usuário do Firebase, ou nulo se o usuário não for autenticado.
Email - String|null
O endereço de email do usuário do Firebase, ou nulo se o usuário não tiver endereço de email.
EmailVificado - Boolean
Se o endereço de e -mail do usuário foi verificado.
PhoneNumber - String|null
Adicionado na v0.13.1
O número de telefone do usuário do Firebase, ou nulo se o usuário não tiver número de telefone.
DisplayName - String|null
Adicionado na v0.13.1
O nome de exibição do usuário do Firebase, ou nulo se o usuário não tiver nome de exibição.
fotourl - String|null
Adicionado na v0.13.1
O URL da foto do usuário do Firebase, ou NULL, se o usuário não tiver URL fotográfico.
reivindicações - Object
Adicionado em v0.13.0
Quaisquer reivindicações personalizadas de Firebase.
getIdToken - Function => Promise<String|null>
Uma função assíncrona que resolve uma sequência de token de ID do Firebase válida ou nulo se nenhum token válido estiver disponível.
ClientInitialized - Boolean
Se o Firebase JS SDK inicializou. Se true , não estamos mais usando nenhuma informação do usuário de adereços do lado do servidor.
FireBaseUser - FirebaseUser |null
O usuário do Firebase JS SDK, se tiver sido inicializado. Caso contrário, nulo.
Designação - Function => Promise<void>
Um método que chama signOut da Firebase se o Firebase JS SDK tiver sido inicializado. Se o SDK não foi inicializado, esse método é um não-OP.
String|Function|Object
Utilizado em appPageURL e authPageURL na configuração e componentes de ordem superior, o Pageurl define um URL ou caminho de destino de redirecionamento.
Pode ser uma string: /my-url/here/
Ou um objeto:
{
destination : '/my-url/here/' , // Required string: the URL destination of a redirect
basePath : false , // whether to use the Next.js base path.
} Ou uma função que recebe { ctx, user } e retorna uma string ou redirectObject:
const redirect = ( { ctx , user } ) => {
// any custom logic here
return `/my-url/here/?username= ${ user . displayName } `
} O ctx é o próximo valor de contexto.
Veja exemplos.md.
Preso? Pesquise discussões ou abra suas próprias perguntas e perguntas e respostas descrevendo o que você já tentou.
Aqui estão algumas etapas iniciais que você pode tomar para depurar problemas:
onVerifyTokenError e onTokenRefreshError em sua configuração e verifique se há qualquer logs de erro.debug: true em sua configuração e leia os logs de depuração do lado do servidor e do cliente para obter mensagens úteis.Esperamos que certos valores de configuração sensíveis sejam falsamente no lado do cliente (consulte o código de validação de configuração). Esta é uma precaução para garantir que os desenvolvedores não estejam acidentalmente agrupando algo como a chave privada do Firebase com o cliente JS.
Para corrigir isso, verifique se a configuração de configuração está undefined no lado do cliente, registrando -a no console do navegador. Você pode usar o suporte .env do próximo para definir variáveis somente para o servidor. Nunca use o prefixo NEXT_PUBLIC* para valores secretos.
Este pacote chamará um ponto de extremidade do Google quando precisar atualizar um lado do servidor de token. Você está vendo um erro dessa solicitação.
Para corrigir isso, confirme que o seu firebaseAdminInitConfig.credential.clientEmail está correto. Deve ser o email emparelhado com sua chave privada do Firebase.
Se isso não ajudar, tente inspecionar o token personalizado para validar manualmente os valores e a estrutura. Algumas pessoas encontram esse problema quando o tempo do servidor está incorreto.
withUserTokenSSR , mas funciona o Auth do lado do cliente.Se a AUTH estiver trabalhando no lado do cliente, mas não no lado do servidor, os cookies authes provavelmente não estão definidos.
Para corrigir isso, confirme que os cookies authes estão definidos nas ferramentas de desenvolvimento do seu navegador. Se eles não estiverem definidos, verifique se as opções secure , sameSite e path passadas na configuração da next-firebase-auth fazem sentido para o seu ambiente. Por exemplo, se você estiver testando no host não-HTTPS, verifique se secure é falso.
Além disso, verifique novamente os logs do servidor para obter erros para garantir que o aplicativo de administrador do Firebase esteja inicializando corretamente.
Muitas vezes, isso é causado por um email incorreto em credenciais do Firebase. Verifique se o email está correto e é da mesma conta Firebase que sua chave privada ou tente gerar uma nova chave: https://firebase.google.com/docs/admin/setup
Você pode tentar configurar suas credenciais no aplicativo de exemplo para garantir que seu código de aplicativo não seja um problema.
No desenvolvimento local, tente limpar dados/cookies para localhost , caso você tenha assinado anteriormente com outra conta do Firebase e ainda tem cookies authes assinados por outra chave privada.
Você também pode tentar desativar o emulador de autenticação Firebase. Remova firebaseAuthEmulatorHost da sua configuração e remova FIREBASE_AUTH_EMULATOR_HOST do seu arquivo .env .
Consulte Adicionando uma chave privada para o Vercel e esta discussão sobre formatação privada de chaves.
Esperamos que alguns aplicativos precisem de alguns recursos que não estejam disponíveis no momento:
Gostaríamos muito de ouvir seus comentários sobre esses ou outros recursos. Por favor, sinta -se à vontade para abrir uma discussão!
Congratulamo -nos com contribuições! Consulte os documentos contribuintes para começar.