next firebase auth
v1.3.0
すべてのnext.jsレンダリング戦略のためのシンプルなFirebase認証。
このパッケージにより、クライアント側とサーバー側のレンダリング（SSR）の両方で、認証されたFirebaseユーザーとIDトークンを簡単に入手できます。
Firebase JS SDKを、認証ステータスの真実の源として扱います。ユーザーがサインインすると、エンドポイントを呼び出して更新トークンを生成し、ユーザー情報、IDトークン、およびクッキーでトークンを更新します。 SSRページへの将来のリクエストは、Cookieからユーザー情報とIDトークンを受け取り、必要に応じてIDトークンを更新します。ユーザーがログアウトすると、Cookieを設定します。
サンプルアプリのライブデモを参照してください。
アプリのニーズに応じて、他のアプローチがより適切に機能する可能性があります。
アプリが静的ページのみを使用している場合、またはSSRにFireBaseユーザーが必要ない場合は、FireBase JS SDKを使用してクライアント側にユーザーをロードします。
getServerSidePropsを使用すると、FireBaseユーザーにアクセスできません。アプリがSSRのFireBaseユーザーが必要な場合（ただし、IDトークンサーバー側は必要ありません） 、これらのアプローチの1つを考慮することができます。
アプリが一般化された認証ソリューション（特にFirebase認証ではなく）が必要な場合は、 nextauth.jsの使用を検討できます。 nextauth.jsはFirebase認証を使用していませんが、Googleを含むさまざまなIDプロバイダーをサポートしています。詳細については、 next-firebase-authとnextauth.jsの違いについては、お客様のニーズに最適な機能を確認してください。
アプリがnext.jsのアプリルーターを使用している場合、このパッケージはまだサポートしていません。 ＃568で進捗状況をフォローできます。
このパッケージは、静的ページとSSRの両方を使用することを期待する場合、またはFireBase ID Tokensサーバー側にアクセスする必要がある場合に役立つ可能性があります。
このパッケージがしていないことに関する簡単なメモ：
- 認証UIは提供されません。 firebaseui-webを検討するか、独自に作成してください。
- Authedユーザーへの普遍的なアクセスを提供する以上のファイアベース機能を拡張することはありません。他のニーズには、FireBase Admin SDKとFireBase JS SDKを使用します。
インストール：
yarn add next-firebase-authまたはnpm i next-firebase-authを追加します
ピア依存関係もインストールされていることを確認してください。
yarn add firebase firebase-admin next react react-dom
next-firebase-authを初期化するモジュールを作成します。
詳細については、構成文書を参照してください
// ./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プライベート環境変数FIREBASE_PRIVATE_KEY 、 COOKIE_SECRET_CURRENT 、およびCOOKIE_SECRET_PREVIOUS .env.localに設定します。 FireBase Authentication Emulatorを有効にしている場合は、 FIREBASE_AUTH_EMULATOR_HOST環境変数を設定する必要もあります。
_app.jsでnext-firebase-auth初期化します：
// ./pages/_app.js
import initAuth from '../initAuth' // the module you created above
initAuth ( )
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } />
}
export default MyApp認証Cookieを設定するログインおよびログアウトAPIエンドポイントを作成します。
// ./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 handler最後に、ページで認証されたユーザーを使用します。
// ./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) next-firebase-auth初期化して、構成オブジェクトを取得します。
withUser({ ...options })(PageComponent) Userコンテキストをコンポーネントに提供する高次関数。 useUserフックを介してAuthedユーザーにアクセスするnext.jsページでこれを使用します。オプションで、ユーザーの認証ステータスに基づいてクライアント側のリダイレクトができます。
次のオプションを受け入れます。
| オプション | 説明 | デフォルト |
|---|---|---|
whenAuthed | ユーザーが認証されている場合に実行するアクション。 AuthAction.RENDERまたはAuthAction.REDIRECT_TO_APPの1つ。 | AuthAction.RENDER |
whenAuthedBeforeRedirect | ブラウザがリダイレクトするのを待っている間に実行するアクション。関連性ユーザーが認証されている場合、およびAuthaction.redirect_to_appに設定されている場合。いずれか： AuthAction.RENDERまたはAuthAction.SHOW_LOADERまたはAuthAction.RETURN_NULL 。 | AuthAction.RETURN_NULL |
whenUnauthedBeforeInit | ユーザーが認証されていないが、FireBaseクライアントJS SDKがまだ初期化されていない場合に実行するアクション。いずれか： AuthAction.RENDER 、 AuthAction.REDIRECT_TO_LOGIN 、 AuthAction.SHOW_LOADER 。 | AuthAction.RENDER |
whenUnauthedAfterInit | ユーザーが認証されておらず、FireBaseクライアントJS SDKがすでに初期化されている場合に実行するアクション。 1つ： AuthAction.RENDER 、 AuthAction.REDIRECT_TO_LOGIN 。 | AuthAction.RENDER |
appPageURL | アプリにリダイレクトする必要がある場合、宛先URLをリダイレクトします。 Pageurl。 | config.appPageURL |
authPageURL | ログインページにリダイレクトする場合、リダイレクト宛先URL。 Pageurl。 | config.authPageURL |
LoaderComponent | ユーザーが無限になったときと、 AuthAction.SHOW_LOADERに設定whenUnauthedBeforeInitれている場合、レンダリングするコンポーネント。 | ヌル |
たとえば、ユーザーが認証されていない場合、このページはログインページにリダイレクトされます。
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 )これは、Firebaseが初期化されるまでローダーを表示するログインページの例です。ユーザーが既にログインしている場合、アプリにリダイレクトします。
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 )タイプスクリプトの使用については、こちらをご覧ください。
withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) next.jsページのgetServerSideProps関数をラップする高次関数は、サーバー側のレンダリング中にUserコンテキストを提供します。オプションで、ユーザーの認証ステータスに基づいてサーバー側のリダイレクトができます。ラップされた関数はオプションです。提供されれば、 userプロパティを含むcontextオブジェクトで呼び出されます。
次のオプションを受け入れます。
| オプション | 説明 | デフォルト |
|---|---|---|
whenAuthed | ユーザーが認証されている場合に実行するアクション。 AuthAction.RENDERまたはAuthAction.REDIRECT_TO_APPいずれか。 | AuthAction.RENDER |
whenUnauthed | ユーザーが認証されていない場合に実行するアクション。 AuthAction.RENDERまたはAuthAction.REDIRECT_TO_LOGINのいずれか。 | AuthAction.RENDER |
appPageURL | アプリにリダイレクトする必要がある場合、宛先URLをリダイレクトします。 Pageurl。 | config.appPageURL |
authPageURL | ログインページにリダイレクトする場合、リダイレクト宛先URL。 Pageurl。 | config.authPageURL |
たとえば、このページは、認証されたユーザーのSSRになり、FireBase IDトークンを使用して小道具を取得し、ユーザーが認証されていない場合はログインページにサーバー側をリダイレクトします。
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 }) => {}) 1つの重要な違いを持つ、 withUserTokenSSRとほぼ同じように動作します。 userはIDトークンが含まれていません。
この方法は、FireBase IDトークンを確認または更新するのではなく、Cookieからの認証されたユーザーデータに依存しています。その結果：
user user.getIdToken()を呼び出すと、nullに解決します。withUserTokenSSRよりも高速になります。withUserTokenSSR使用する必要があります。cookies.signedがfalseに設定されている場合、これを使用しないでください。 AuthedユーザーCookie値はクライアントによって変更される可能性があるため、そうすることは潜在的なセキュリティリスクです。
これは、 withUserTokenSSRと同じオプションを取ります。
useUser()現在のuserを返すフック。これを使用するには、next.jsページをwithUserに巻き付ける必要があります。ユーザーが認証されていない場合、 useUser null idを使用してUserインスタンスを返します。
例えば：
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)クッキーを設定して、認証されたユーザーの情報を保存します。 「ログイン」APIエンドポイントからこれを呼び出します。
Cookieはcookiesで管理されています。 Cookieオプションの構成を参照してください。
req引数は、 IncomingMessage / next.jsリクエストオブジェクトである必要があります。 res引数は、 ServerResponse / next.js応答オブジェクトである必要があります。 Authorization要求ヘッダーをFireBaseユーザーIDトークンに設定する必要があります。これは、このパッケージが自動的に処理するものです。
これは、サーバー側でのみ呼び出すことができます。
unsetAuthCookies(req, res)Auth Cookieを設定（期限切れ）。 「ログアウト」APIエンドポイントからこれを呼び出します。
req引数は、 IncomingMessage / next.jsリクエストオブジェクトである必要があります。 res引数は、 ServerResponse / next.js応答オブジェクトである必要があります。
これは、サーバー側でのみ呼び出すことができます。
verifyIdToken(token) => Promise<User> Firebase IDトークンを検証し、 Userインスタンスに解決します。これは、Firebase Admin SDKのVerififideIdtokenと同様の目的を果たします。
getUserFromCookies({ ...options })V1に追加されました
Auth Cookieからuserを検証して返します。これは、IDトークンからユーザーを検証するverifyIdTokenの代替品です。
一般に、APIエンドポイントは、CookieではなくIDトークンを使用してユーザーを識別することをお勧めします。これにより、潜在的なCSRFの脆弱性が回避されます。ただし、この方法はエンドポイントに役立ち、ユーザーを識別するためにCookie値のみに依存する必要があります。
これは、サーバー側でのみ呼び出すことができます。
次のスタンドアロンバックエンド環境でこれを使用する詳細については、この例を参照してください。JS。
オプションの引数には以下を含めることができます。
Object - IncomingMessage / next.jsリクエストオブジェクト
cookieヘッダー値を使用してユーザーを確認するリクエストオブジェクト。 req値またはauthCookieValueいずれかが必要です。
Boolean
返されたユーザーがFireBase IDトークンを含める必要があるかどうか。デフォルトはtrueです。本当の場合、動作はwithUserTokenSSRの動作に従います。 falseの場合、それはwithUserSSRのそれに従います。 withuserssrのドキュメントの区別の詳細については、詳細をご覧ください。
String
reqオブジェクトを提供する代わりに、使用する認証Cookie値を直接提供できます。たとえば、Auth CookieにMyAuthという名前の場合、Cookie MyAuth.AuthUser （ includeToken is false）またはMyAuth.AuthUserTokens （ includeTokenが真である場合）の価値を提供します。
req値またはauthCookieValueいずれかが必要です。
String
署名付きCookieを使用する場合、認証Cookieの署名の価値。たとえば、Auth Cookieの名前がMyAuth場合、Cookie MyAuth.AuthUser.sig （ includeToken is false）またはMyAuth.AuthUserTokens.sigの値を提供します（ includeTokenが真実である場合）。
AuthAction withUserおよびwithUserTokenSSRのレンダリング/リダイレクトオプションを定義するオブジェクト。 Authactionを参照してください。
こちらの構成の例を参照してください。 initを呼び出すときに構成を提供します。
String|Function|Object - Pageurl
withUserまたはwithUserTokenSSRいつログインする必要があるときにナビゲートするデフォルトのURL。 AuthAction.REDIRECT_TO_LOGIN authアクションを使用しない限りオプション。
String|Function|Object - Pageurl
withUserまたはwithUserTokenSSRがアプリにリダイレクトする必要があるときにナビゲートするデフォルトのURL。 AuthAction.REDIRECT_TO_APP authアクションを使用しない限りオプション。
String
APIエンドポイントこのモジュールは、認証されたFireBaseユーザーのAUTH状態が変更されると呼び出します。
String
APIエンドポイントこのモジュールは、認定されていないFireBaseユーザーのAUTH状態が変更されると呼び出します。
Function （オプション）
ログインAPIのエンドポイントが非200応答を返す場合、ハンドラー。ハンドラーが定義されていない場合、このライブラリは200以外の応答を投げかけます。
カスタムtokenChangedHandlerが設定されている場合は、使用または許可されていません。
Function （オプション）
Logout APIエンドポイントが非200応答を返す場合、ハンドラーが呼ばれます。ハンドラーが定義されていない場合、このライブラリは200以外の応答を投げかけます。
カスタムtokenChangedHandlerが設定されている場合は、使用または許可されていません。
Function
Auth状態が特定のユーザーの場合に変更されたときに実行されるコールバック。クライアント側のアプリがログイン/ログアウトAPIエンドポイントを呼び出す方法をカスタマイズする場合は、これを使用します（たとえば、カスタムフェッチャーを使用したり、カスタムヘッダーを追加したりします）。 tokenChangedHandler 、 Userを引数として受信し、FireBaseのonIdTokenChangedイベントと同様に、ユーザーのIDトークンが変更されたときに呼び出されます。
このコールバックが指定されている場合、ユーザーは次の責任を負います。
ガイダンスについては、デフォルトのハンドラーを参照してください。
String
地元のFireBase Auth Emulatorのホストとポート。この値が設定されている場合、認証エミュレータは提供されたホストとポートで初期化されます。
FIREBASE_AUTH_EMULATOR_HOST環境変数の値と一致する必要があります。たとえば、 localhost:9099 。
Object
firebase-adminのinitializeAppに渡された構成。 credentialプロパティ（プレーンオブジェクト）とdatabaseURLプロパティを含める必要があります。 next-firebase-authを初期化する前に、 firebase-admin自分で初期化しない限り必要です。
firebaseAdminInitConfig.credential.privateKeyは、クライアント側で定義することはできず、秘密の環境変数に住む必要があります。
Vercelを使用していますか？ガイダンスについては、Vercelに秘密鍵の追加を参照してください。
Boolean
Trueの場合、 firebase-admin initializeAppでホスティング環境サービスアカウントを暗黙的に見つけます。これは、FireBaseとGoogle Cloud Platformの両方に適用され、ファイルパスまたは直接的な値を介してコードにサービスアカウントキーを追加することを推奨しています。
注： firebase-adminをセットアップするには、 firebaseAdminInitConfigまたはuseFirebaseAdminDefaultCredentialいずれかを提供する必要があります。デフォルトの資格情報を使用すると、両方が提示された場合、 firebaseAdminInitConfig.credentialに渡された値をオーバーライドします。
Object
Firebase JS SDKのinitializeAppを一致させる構成。 firebaseClientInitConfig.apiKey値は常に必要です。 next-firebase-authを初期化する前に、FireBaseクライアントSDKを自分で初期化することをお勧めします。ただし、FireBaseアプリがまだ存在していない場合、 next-firebase-auth FireBaseの初期化を試みます。
Object
認証Cookieに使用される設定。 cookiesを使用してCookieを管理します。
プロパティは次のとおりです。
name ：Cookie名のベースとして使用： nameが「myexample」に設定されている場合、CookieはMyExample.AuthUser and MyExample.AuthUserTokens （plus MyExample.AuthUser.sig and MyExample.AuthUserTokens.sigと名付けられます。必須。keys ：Cookieに署名するために使用される文字列の配列。たとえば、 ['xD$WVv3qrP3ywY', '2x6#msoUeNhVHr'] 。これらの文字列は秘密であるため、 [ process.env.COOKIE_SECRET_CURRENT, process.env.COOKIE_SECRET_PREVIOUS ]などの秘密環境変数を介して提供します。 keysは、 cookiesパッケージに記載されているように、KeyGripコンストラクターに渡されます。 signedされfalseない限り必要です。cookies.setのすべてのオプション。 keys値はクライアント側で定義することはできず、秘密の環境変数に住む必要があります。
セキュリティの場合、 maxAge値は2週間以内でなければなりません。 maxAgeミリ秒で定義されていることに注意してください。
注：ユーザーがFireBase JS SDKをロードすると、Cookiesの有効期限は自動的に拡張されます。
Firebase JS SDKは認証の真実の源であるため、Cookieが期限切れになっているがユーザーがまだFirebaseで認証されている場合、ユーザーがFireBase JS SDKをロードするとCookieが再度設定されますが、最初のリクエストでユーザーはSSR中に認証されません。
Function （オプション）
ユーザーのIDトークンサーバー側を確認しながら予期しないエラーがある場合に呼び出されるエラーハンドラー。 Firebase Authエラーが受けられます。
このライブラリは、IDトークンを確認できない場合に投げません。代わりに、アプリに認知度のないユーザーを提供します。通常、 auth/id-token-expired / auth/user-disabledなどの一般的な認証関連エラーを、投げずに処理します。追加の背景については、＃366および＃174を参照してください。
Function （オプション）
ユーザーのIDトークンサーバー側を更新しているときに予期しないエラーがある場合に呼び出されるエラーハンドラー。
このライブラリは、IDトークンを更新できない場合に投げません。代わりに、アプリに認知度のないユーザーを提供します。追加の背景については、＃366および＃174を参照してください。
次の定数を使用して、ユーザーの認証ステータスに応じて取得するアクションを定義します。
AuthAction.RENDER ：子コンポーネントをレンダリングします
AuthAction.SHOW_LOADER ：ローダーコンポーネントを表示します
AuthAction.RETURN_NULL ：任意のコンポーネントの代わりにnullを返します
AuthAction.REDIRECT_TO_LOGIN ：ログインページにリダイレクトします
AuthAction.REDIRECT_TO_APP ：アプリにリダイレクトします
ユーザーオブジェクトは、サーバー側とクライアント側のコンテキストで使用されます。これは、FireBaseユーザーの正規化された表現です。
id String|null
FireBaseユーザーのID、またはユーザーが認証されていない場合はnull。
電子メール- String|null
FireBaseユーザーのメールアドレス、またはユーザーにメールアドレスがない場合はnull。
emailverified Boolean
ユーザーのメールアドレスが検証されているかどうか。
PhoneNumber String|null
v0.13.1に追加
FireBaseユーザーの電話番号、またはユーザーに電話番号がない場合はnull。
displayName String|null
v0.13.1に追加
FireBaseユーザーの表示名、またはユーザーに表示名がない場合はnull。
Photourl String|null
v0.13.1に追加
FireBaseユーザーの写真URL、またはユーザーに写真URLがない場合はnull。
クレーム- Object
v0.13.0に追加されました
カスタムファイヤーベースのクレーム。
getIdToken Function => Promise<String|null>
有効なFireBase IDトークン文字列に解決する非同期関数、または有効なトークンが利用できない場合はnull。
ClientInitialized Boolean
Firebase JS SDKが初期化されているかどうか。 true場合、サーバー側の小道具からのユーザー情報を使用しなくなりました。
Firebaseuser FirebaseUser |null
Firebase JS SDKからのユーザーが初期化されている場合。それ以外の場合、null。
サインアウト- Function => Promise<void>
FireBase JS SDKが初期化された場合、FireBaseのsignOutを呼び出す方法。 SDKが初期化されていない場合、この方法はopです。
String|Function|Object
appPageURLおよびauthPageURLで構成および高次コンポーネントで使用されるPageurlは、リダイレクト宛先URLまたはパスを定義します。
それは文字列になることができます： /my-url/here/
またはオブジェクト：
{
destination : '/my-url/here/' , // Required string: the URL destination of a redirect
basePath : false , // whether to use the Next.js base path.
}または、 { ctx, user }を受信し、文字列またはRedirectObjectを返す関数：
const redirect = ( { ctx , user } ) => {
// any custom logic here
return `/my-url/here/?username= ${ user . displayName } `
} ctxは、サーバー側の場合は次の.jsコンテキスト値、またはクライアント側の場合は未定義です。
例を参照してください。md。
立ち往生？ディスカッションを検索するか、あなたがすでに試したことを説明する独自のQ＆Aディスカッションを開きます。
問題をデバッグするために実行できる最初の手順を次に示します。
onVerifyTokenErrorとonTokenRefreshErrorを定義し、エラーログを確認します。debug: trueを使用し、役立つメッセージのサーバー側とクライアント側のデバッグログを読み取ります。クライアント側では、特定の機密構成値が偽造されると予想されます（構成検証コードを参照）。これは、開発者がクライアントJSでファイヤーベースの秘密鍵のようなものを誤ってバンドしないようにするための予防策です。
これを修正するには、ブラウザコンソールにログすることにより、クライアント側に設定設定がundefinedあることを確認します。次の.envサポートを使用して、サーバーのみの変数を設定できます。秘密の値にはNEXT_PUBLIC*プレフィックスを使用しないでください。
このパッケージは、トークンサーバー側を更新する必要がある場合にGoogleエンドポイントを呼び出します。そのリクエストからエラーが表示されます。
これを修正するには、 firebaseAdminInitConfig.credential.clientEmailが正しいことを確認してください。それはあなたのFireBaseの秘密鍵とペアになった電子メールでなければなりません。
それが役に立たない場合は、カスタムトークンを検査して、値と構造を手動で検証してみてください。サーバーの時間が正しくないときに、この問題に遭遇する人もいます。
withUserTokenSSR使用するときは常にnullですが、クライアント側の認証は機能します。AUTHがクライアント側で作業しているが、サーバー側では機能しない場合、AUTH Cookieは設定されていない可能性が高いです。
これを修正するために、Auth Cookieがブラウザの開発ツールに設定されていることを確認します。それらが設定されていない場合は、 next-firebase-auth構成で渡されたsecure 、 sameSite 、 pathオプションが環境に理にかなっていることを確認してください。たとえば、非HTTPS LocalHostでテストしている場合は、 secureがfalseであることを確認してください。
さらに、エラーのサーバーログを再確認して、FireBase管理アプリが正しく初期化されていることを確認してください。
多くの場合、これはFireBase資格情報の誤った電子メールによって引き起こされます。メールが正しく、秘密鍵と同じFireBaseアカウントからのものであることを確認するか、新しいキーを生成してみてください：https：//firebase.google.com/docs/admin/setup
サンプルアプリで資格情報を設定して、アプリコードが問題にならないことを確認することができます。
ローカル開発では、以前に別のFireBaseアカウントにサインインしていて、別の秘密鍵で署名されている認証Cookieがある場合に備えて、 localhostのデータ/Cookieをクリアしてみてください。
また、FireBase認証エミュレータを無効にすることもできます。 configからfirebaseAuthEmulatorHostを削除し、 .envファイルからFIREBASE_AUTH_EMULATOR_HOSTを削除します。
Vercelに秘密鍵を追加し、秘密キーのフォーマットに関するこの議論を参照してください。
一部のアプリには、現在利用できないいくつかの機能が必要になると予想しています。
これらまたは他の機能に関するフィードバックをお聞かせください。お気軽にディスカッションを開いてください！
貢献を歓迎します！開始するには、寄稿されたドキュメントをご覧ください。
