next firebase auth
v1.3.0
Autenticación simple de Firebase para todas las estrategias de representación de Next.js.
Este paquete hace que sea simple obtener el token de usuario y ID de Firebase autenticado durante la representación (SSR) del lado del cliente y del lado del cliente.
Tratamos el Firebase JS SDK como la fuente de la verdad para el estado de autenticación. Cuando el usuario inicia sesión, llamamos un punto final para generar un token de actualización y almacenar la información del usuario, el token de identificación y actualizar el token en las cookies. Las solicitudes futuras a las páginas de SSR reciben la información del usuario y el token de identificación de las cookies, actualizando el token de identificación según sea necesario. Cuando el usuario inicia sesión, desanimamos las cookies.
Vea una demostración en vivo de la aplicación Ejemplo.
Dependiendo de las necesidades de su aplicación, otros enfoques pueden funcionar mejor para usted.
Si su aplicación solo usa páginas estáticas o no necesita al usuario de Firebase para SSR, use el SDK de Firebase JS directamente para cargar al usuario en el lado del cliente.
getServerSideProps .Si su aplicación necesita al usuario de Firebase para SSR (pero no necesita el lado del servidor Token de ID) , puede considerar uno de estos enfoques:
Si su aplicación necesita una solución de autenticación generalizada , no específicamente la autenticación de Firebase, podría considerar usar NextAuth.js. NextAuth.js no utiliza la autenticación de Firebase, pero admite una amplia variedad de proveedores de identidad, incluido Google. Lea más aquí sobre las diferencias entre next-firebase-auth y NextAuth.js para ver cuál funciona mejor para sus necesidades.
Si su aplicación usa el enrutador de aplicaciones de Next.js, este paquete aún no lo admite. Puedes seguir el progreso en #568.
Es probable que este paquete sea útil si espera usar páginas estáticas y SSR o si necesita acceso al lado del servidor de tokens de ID de Firebase.
Una nota rápida sobre lo que este paquete no hace:
- No proporciona UI de autenticación. Considere Firebaseui-Web o construya la suya.
- No extiende la funcionalidad de Firebase más allá de proporcionar acceso universal al usuario autenticado. Use el SDK de administrador de Firebase y Firebase JS SDK para cualquier otra necesidad.
Instalar:
yarn add next-firebase-auth o npm i next-firebase-auth
Asegúrese de que también estén instaladas dependencias de pares:
yarn add firebase firebase-admin next react react-dom
Cree un módulo para inicializar next-firebase-auth .
Ver documentación de configuración para más detalles
// ./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 Establezca las variables de entorno privado FIREBASE_PRIVATE_KEY , COOKIE_SECRET_CURRENT y COOKIE_SECRET_PREVIOUS en .env.local . Si ha habilitado el emulador de autenticación de Firebase, también deberá establecer la variable de entorno FIREBASE_AUTH_EMULATOR_HOST .
Inicialice next-firebase-auth en _app.js :
// ./pages/_app.js
import initAuth from '../initAuth' // the module you created above
initAuth ( )
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } />
}
export default MyAppCree puntos finales de API de inicio de sesión y cierre de sesión que establezcan cookies de autenticación:
// ./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 handlerFinalmente, use el usuario autenticado en una 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 , tomando un objeto de configuración.
withUser({ ...options })(PageComponent) Una función de orden superior para proporcionar el contexto User a un componente. Use esto con cualquier página Next.js que acceda al usuario autenticado a través del gancho useUser . Opcionalmente, puede redirigir el lado del cliente en función del estado de autenticación del usuario.
Acepta las siguientes opciones:
| Opción | Descripción | Por defecto |
|---|---|---|
whenAuthed | La acción a tomar si el usuario se autentica. Uno de AuthAction.RENDER o AuthAction.REDIRECT_TO_APP . | AuthAction.RENDER |
whenAuthedBeforeRedirect | La acción a tomar mientras espera que el navegador redirige. Relevante cuando el usuario se autentica y cuando se está configurado en authaction.redirect_to_app. Uno de: AuthAction.RENDER o AuthAction.SHOW_LOADER o AuthAction.RETURN_NULL . | AuthAction.RETURN_NULL |
whenUnauthedBeforeInit | La acción a tomar si el usuario no se autentica, pero el cliente Firebase JS SDK aún no se ha inicializado. Uno de: AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN , AuthAction.SHOW_LOADER . | AuthAction.RENDER |
whenUnauthedAfterInit | La acción a tomar si el usuario no se autentica y el cliente Firebase JS SDK ya se ha inicializado. Uno de: AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | La URL de destino de redirigir cuando debemos redirigir a la aplicación. A Pageurl. | config.appPageURL |
authPageURL | La URL de destino de redirigir cuando debemos redirigir a la página de inicio de sesión. A Pageurl. | config.authPageURL |
LoaderComponent | El componente para renderizar cuándo el usuario no está autorizado y whenUnauthedBeforeInit está configurado en AuthAction.SHOW_LOADER . | nulo |
Por ejemplo, esta página redirigirá a la página de inicio de sesión si el usuario no está 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 )Aquí hay un ejemplo de una página de inicio de sesión que muestra un cargador hasta que se inicializa Firebase, luego redirige a la aplicación si el usuario ya está 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 el uso de TypeScript, eche un vistazo aquí.
withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) Una función de orden superior que envuelve una función getServerSideProps de Páginas Next.JS para proporcionar el contexto User durante la representación del lado del servidor. Opcionalmente, puede redirigir el lado del servidor según el estado de autenticación del usuario. Una función envuelta es opcional; Si se proporciona, se llamará con un objeto context que contiene una propiedad user .
Acepta las siguientes opciones:
| Opción | Descripción | Por defecto |
|---|---|---|
whenAuthed | La acción a tomar si el usuario se autentica. Ya sea AuthAction.RENDER o AuthAction.REDIRECT_TO_APP . | AuthAction.RENDER |
whenUnauthed | La acción a tomar si el usuario no está autenticado. AuthAction.RENDER o AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | La URL de destino de redirigir cuando debemos redirigir a la aplicación. A Pageurl. | config.appPageURL |
authPageURL | La URL de destino de redirigir cuando debemos redirigir a la página de inicio de sesión. A Pageurl. | config.authPageURL |
Por ejemplo, esta página será SSR para usuarios autenticados, obteniendo accesorios utilizando su token de ID de Firebase, y redirigirá el lado del servidor a la página de inicio de sesión si el usuario no está 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 }) => {}) Se comporta casi idénticamente a withUserTokenSSR , con una diferencia clave: el user no contendrá un token de identificación.
Este método se basa en datos de usuario autenticado de una cookie en lugar de verificar o actualizar un token de ID de Firebase. Como consecuencia:
user proporcionado a través del contexto se resolverá para anular cuando llame user.getIdToken() .withUserTokenSSR .withUserTokenSSR .cookies.signed se establece en false . Hacerlo es un riesgo de seguridad potencial, porque el cliente podría modificar los valores de cookies de usuario autenticado.
Esto toma las mismas opciones que withUserTokenSSR .
useUser() Un gancho que devuelve al user actual. Para usar esto, la página Next.js debe estar envuelta en withUser . Si el usuario no está autenticado, useUser devolverá una instancia User con una id NULL.
Por ejemplo:
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)Establece cookies para almacenar la información del usuario autenticado. Llame a esto desde su punto final de la API "Iniciar sesión".
Las cookies se gestionan con cookies . Consulte la configuración de opciones de cookies.
El argumento req debe ser un objeto de solicitud IncomingMessage / next.js. El argumento res debe ser un objeto de respuesta ServerResponse / Next.js. Requiere que el encabezado de solicitud Authorization se establezca en el token de identificación de usuario de Firebase, que este paquete maneja automáticamente.
Esto solo se puede llamar en el lado del servidor.
unsetAuthCookies(req, res)UNSET (expira) las cookies de autenticación. Llame a esto desde su punto final de la API de "cierre de sesión".
El argumento req debe ser un objeto de solicitud IncomingMessage / next.js. El argumento res debe ser un objeto de respuesta ServerResponse / Next.js.
Esto solo se puede llamar en el lado del servidor.
verifyIdToken(token) => Promise<User> Verifica un token de ID de Firebase y se resuelve a una instancia User . Esto tiene un propósito similar al VerifyIdToken de Firebase Admin SDK.
getUserFromCookies({ ...options })Agregado en V1
Verifica y devuelve al user de las cookies de autores. Esta es una alternativa a verifyIdToken , que verifica al usuario de un token de identificación.
En general, recomendamos que los puntos finales de API usen un token de identificación en lugar de cookies para identificar al usuario, lo que evita algunas posibles vulnerabilidades de CSRF. Sin embargo, este método será útil para los puntos finales debe confiar exclusivamente en los valores de las cookies para identificar al usuario.
Esto solo se puede llamar en el lado del servidor.
Vea este ejemplo para obtener más información sobre el uso de esto en un entorno de backend independiente fuera de Next.js.
El argumento de opciones puede incluir:
Object : un objeto de solicitud de IncomingMessage / Next.js
Un objeto de solicitud cuyo valor de encabezado cookie se utilizará para verificar a un usuario. Se requieren el valor req o authCookieValue .
Boolean
Si el usuario devuelto debe incluir o no un token de ID de Firebase. El valor predeterminado es verdadero. Cuando es cierto, el comportamiento sigue el de withUserTokenSSR ; Cuando falsa, se deduce el de withUserSSR . Lea más sobre la distinción en los documentos de WithusersSr.
String
Como alternativa para proporcionar el objeto req , puede proporcionar directamente el valor de la cookie de autores para usar. Por ejemplo, si su cookie de autenticación se llama MyAuth , proporcionaría el valor de la cookie MyAuth.AuthUser (si includeToken es falso) o MyAuth.AuthUserTokens (si includeToken es verdadero).
Se requieren el valor req o authCookieValue .
String
El valor de la firma de la cookie de autenticación, si se usa cookies firmadas. Por ejemplo, si su cookie de autenticación se llama MyAuth , proporcionaría el valor de la cookie MyAuth.AuthUser.sig (si includeToken es falso) o MyAuth.AuthUserTokens.sig (si includeToken es verdad).
AuthAction Un objeto que define opciones de representación/redireccionamiento para withUser y withUserTokenSSR . Ver Authation.
Vea una configuración de ejemplo aquí. Proporcione la configuración cuando llame init .
String|Function|Object - A PageUrl
La URL predeterminada para navegar a When withUser o withUserTokenSSR necesita redirigir para iniciar sesión. Opcional a menos que use la acción AuthAction.REDIRECT_TO_LOGIN Auth.
String|Function|Object - A PageUrl
La URL predeterminada para navegar a When withUser o withUserTokenSSR necesita redirigir a la aplicación. Opcional a menos que use la acción AuthAction.REDIRECT_TO_APP Auth.
String
El punto final API que este módulo llamará cuando el estado de autenticación cambie para un usuario de Firebase autenticado.
String
El punto final API que este módulo llamará cuando el estado de Auth cambie para un usuario de Firebase no autenticado.
Function (opcional)
Un controlador llamado si el punto final de la API de inicio de sesión devuelve una respuesta no 200. Si no se define un manejador, esta biblioteca lanzará cualquier respuesta que no sea 200.
No se usa o se permite si se establece un tokenChangedHandler personalizado.
Function (opcional)
Un controlador llamó si el punto final de la API de inicio de sesión devuelve una respuesta no 200. Si no se define un manejador, esta biblioteca lanzará cualquier respuesta que no sea 200.
No se usa o se permite si se establece un tokenChangedHandler personalizado.
Function
Una devolución de llamada que se ejecuta cuando el estado de Auth cambia para un usuario en particular. Use esto si desea personalizar cómo su aplicación del lado del cliente llama a sus puntos finales de la API de inicio de sesión/sesión de inicio de sesión (por ejemplo, para usar un traje personalizado o agregar encabezados personalizados). tokenChangedHandler recibe a un User como argumento y se llama cuando cambia el token de identificación del usuario, de manera similar al evento onIdTokenChanged de Firebase.
Si se especifica esta devolución de llamada, el usuario es responsable de:
Consulte el controlador predeterminado para obtener orientación.
String
El host y el puerto para el emulador local de autores Firebase. Si se establece este valor, el emulador de Auth se inicializará con el host y el puerto proporcionados.
Debe coincidir con el valor de la variable de entorno FIREBASE_AUTH_EMULATOR_HOST , por ejemplo, localhost:9099 .
Object
La configuración pasó al initializeApp de firebase-admin . Debe contener una propiedad credential (un objeto simple) y una propiedad databaseURL . Requerido a menos que inicialice firebase-admin usted mismo antes de inicializar la next-firebase-auth .
firebaseAdminInitConfig.credential.privateKey no se puede definir en el lado del cliente y debe vivir en una variable de entorno secreto.
¿Usando Vercel? Consulte Agregar una clave privada a Vercel para orientación.
Boolean
Cuando sea cierto, firebase-admin encontrará implícitamente su cuenta de servicio de entorno de alojamiento durante initializeApp . Esto es aplicable tanto para Firebase como para la plataforma de Google Cloud, y se recomienda superar la clave de la cuenta de servicio al código a través de la ruta del archivo o el valor directo.
Nota : Para configurar firebase-admin , se debe proporcionar firebaseAdminInitConfig o useFirebaseAdminDefaultCredential . El uso de las credenciales predeterminadas anulará los valores pasados a firebaseAdminInitConfig.credential si se presentan ambos.
Object
Configuración que coincide con Firebase JS SDK initializeApp . Siempre se requiere el valor firebaseClientInitConfig.apiKey . Recomendamos inicializar el SDK de Firebase Client usted mismo antes de inicializar la next-firebase-auth ; Sin embargo, next-firebase-auth intentará inicializar Firebase si una aplicación Firebase aún no existe.
Object
Configuración utilizada para cookies de autores. Usamos cookies para administrar cookies.
Las propiedades incluyen:
name : Usado como base para los nombres de las cookies: si name está configurado en "myExample", las cookies se llamarán MyExample.AuthUser y MyExample.AuthUserTokens (más MyExample.AuthUser.sig y MyExample.AuthUserTokens.sig if cookies están firmadas). Requerido.keys : una variedad de cuerdas que se utilizarán para firmar galletas; Por ejemplo, ['xD$WVv3qrP3ywY', '2x6#msoUeNhVHr'] . Como estas cadenas son secretos, proporcionarlos a través de variables de entorno secretas, como [ process.env.COOKIE_SECRET_CURRENT, process.env.COOKIE_SECRET_PREVIOUS ] . La matriz keys se pasa al constructor KeyGrip como se describe en el paquete cookies . Requerido a menos que signed esté configurado en false .cookies.set . El valor keys no se puede definir en el lado del cliente y debe vivir en una variable de entorno secreto.
Para la seguridad, el valor maxAge debe ser de dos semanas o menos. Tenga en cuenta que maxAge se define en milisegundos.
Nota: Las expiraciones de las cookies se extenderán automáticamente cuando el usuario cargue el SDK Firebase JS.
El Firebase JS SDK es la fuente de la verdad para la autenticación, por lo que si las cookies caducan pero el usuario todavía se autodenomina con Firebase, las cookies se configurarán automáticamente nuevamente cuando el usuario cargue el SDK de Firebase JS, pero el usuario no se autodenominará durante la SSR en esa primera solicitud.
Function (opcional)
Manejador de errores que se llamará si hay un error inesperado al verificar el lado del servidor Token ID del usuario. Recibirá un error de autenticación Firebase.
Esta biblioteca no lanzará cuando no pueda verificar un token de identificación. En cambio, proporcionará un usuario no autenticado a la aplicación. Por lo general, manejará errores comunes relacionados con Auth Auth, como auth/id-token-expired y auth/user-disabled sin lanzar. Consulte #366 y #174 para obtener antecedentes adicionales.
Function (opcional)
Manejador de errores que se llamará si hay un error inesperado mientras actualiza el lado del servidor de token de identificación del usuario.
Esta biblioteca no lanzará cuando no pueda actualizar un token de identificación. En cambio, proporcionará un usuario no autenticado a la aplicación. Consulte #366 y #174 para obtener antecedentes adicionales.
Define las acciones a tomar dependiendo del estado de autenticación de un usuario, utilizando las siguientes constantes:
AuthAction.RENDER : renderizar el componente infantil
AuthAction.SHOW_LOADER : mostrar un componente de cargador
AuthAction.RETURN_NULL : return null en lugar de cualquier componente
AuthAction.REDIRECT_TO_LOGIN : redirección a la página de inicio de sesión
AuthAction.REDIRECT_TO_APP : redireccionar a la aplicación
El objeto de usuario se usa en los contextos del lado del servidor y del lado del cliente. Esta es una representación normalizada de un usuario de Firebase.
ID - String|null
La identificación del usuario de Firebase, o NULL, si el usuario no está autenticado.
Correo electrónico - String|null
La dirección de correo electrónico del usuario de Firebase, o nula si el usuario no tiene dirección de correo electrónico.
Emailverified - Boolean
Si se verifica la dirección de correo electrónico del usuario.
PhoneNumber - String|null
Agregado en V0.13.1
El número de teléfono del usuario de Firebase, o nulo si el usuario no tiene un número de teléfono.
DisplayName - String|null
Agregado en V0.13.1
El nombre de pantalla del usuario del usuario de Firebase, o nulo, si el usuario no tiene nombre de pantalla.
fotourl - String|null
Agregado en V0.13.1
La URL fotográfica del usuario del usuario de Firebase, o nula, si el usuario no tiene URL fotográfica.
Reclamaciones - Object
Agregado en V0.13.0
Cualquier reclamación personalizada de Firebase.
getIdToken - Function => Promise<String|null>
Una función de async que se resuelve en una cadena de token de ID de Firebase válida, o NULL si no hay token válido disponible.
Clientinitialized - Boolean
Si el SDK de Firebase JS se ha inicializado. Si true , ya no estamos utilizando ninguna información del usuario de los accesorios del lado del servidor.
FirebaseUser - FirebaseUser |null
El usuario del Firebase JS SDK, si se ha inicializado. De lo contrario, nulo.
firmar - Function => Promise<void>
Un método que llama signOut de Firebase si se ha inicializado el SDK de Firebase JS. Si el SDK no se ha inicializado, este método es un NO-OP.
String|Function|Object
Utilizado en appPageURL y authPageURL en los componentes de configuración y orden superior, el PageURL define una URL o ruta de destino de redirección.
Puede ser una cadena: /my-url/here/
O un objeto:
{
destination : '/my-url/here/' , // Required string: the URL destination of a redirect
basePath : false , // whether to use the Next.js base path.
} O una función que recibe { ctx, user } y devuelve una cadena o redirectObject:
const redirect = ( { ctx , user } ) => {
// any custom logic here
return `/my-url/here/?username= ${ user . displayName } `
} El ctx es el valor de contexto Next.js si el lado del servidor o el lado del cliente indefinido IF.
Ver ejemplos.md.
¿Atascado? Busque discusiones o abra su propia discusión de preguntas y respuestas que describen lo que ya ha probado.
Aquí hay algunos pasos iniciales que puede tomar para depurar problemas:
onVerifyTokenError y onTokenRefreshError en su configuración y verifique los registros de errores.debug: true en su configuración y lea los registros de depuración del lado del servidor y del lado del cliente para cualquier mensaje útil.Esperamos que ciertos valores de configuración confidenciales sean falsos en el lado del cliente (consulte el código de validación de configuración). Esta es una precaución para asegurarse de que los desarrolladores no estén agrupando accidentalmente algo como su clave privada de Firebase con el cliente JS.
Para solucionar esto, asegúrese de que la configuración undefined esté definida en el lado del cliente al registrarla en la consola de su navegador. Puede usar el soporte .env de Next para establecer variables solo de servidor. Nunca use el prefijo NEXT_PUBLIC* para ningún valor secreto.
Este paquete llamará a un punto final de Google cuando sea necesario actualizar un lado del servidor token. Estás viendo un error de esa solicitud.
Para solucionar esto, confirme que su firebaseAdminInitConfig.credential.clientEmail es correcto. Debe ser el correo electrónico combinado con su clave privada de Firebase.
Si eso no ayuda, intente inspeccionar el token personalizado para validar manualmente los valores y la estructura. Algunas personas se encuentran con este problema cuando el tiempo de su servidor es incorrecto.
withUserTokenSSR , pero la autenticación del lado del cliente funciona.Si Auth está funcionando en el lado del cliente pero no en el lado del servidor, las cookies de Auth probablemente no están configuradas.
Para solucionar esto, confirme que las cookies de autores están configuradas en las herramientas de desarrollo de su navegador. Si no están configurados, verifique que las opciones secure , sameSite y path pasadas en la configuración de la next-firebase-auth tengan sentido para su entorno. Por ejemplo, si está probando en localhost no HTTPS, asegúrese de que secure sea falso.
Además, verifique dos registros de su servidor para cualquier error para asegurarse de que la aplicación de administración de Firebase se esté iniciando correctamente.
A menudo, esto es causado por un correo electrónico incorrecto en credenciales de Firebase. Verifique que el correo electrónico sea correcto y sea de la misma cuenta de Firebase que su clave privada, o intente generar una nueva clave: https://firebase.google.com/docs/admin/setup
Puede intentar configurar sus credenciales en la aplicación Ejemplo para asegurarse de que el código de su aplicación no sea un problema.
En el desarrollo local, intente borrar datos/cookies para localhost en caso de que haya firmado previamente con otra cuenta de Firebase y aún tenga cookies de autores firmadas por otra clave privada.
También puede intentar deshabilitar el emulador de autenticación de Firebase. Retire firebaseAuthEmulatorHost de su configuración y elimine FIREBASE_AUTH_EMULATOR_HOST de su archivo .env .
Consulte Agregar una clave privada a Vercel y esta discusión sobre el formateo de la clave privada.
Esperamos que algunas aplicaciones necesiten algunas características que no están disponibles actualmente:
Nos encantaría escuchar sus comentarios sobre estas u otras características. ¡No dude en abrir una discusión!
¡Agradecemos las contribuciones! Consulte los documentos contribuyentes para comenzar.
