next firebase auth
v1.3.0
การรับรองความถูกต้องของ Firebase อย่างง่ายสำหรับกลยุทธ์การแสดงผลต่อไปทั้งหมด
แพ็คเกจนี้ทำให้ง่ายต่อการได้รับผู้ใช้ Firebase ที่ได้รับการรับรองความถูกต้องและโทเค็น ID ระหว่างการแสดงผลทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ (SSR)
เราปฏิบัติต่อ Firebase JS SDK เป็นแหล่งที่มาของความจริงสำหรับสถานะการรับรองความถูกต้อง เมื่อผู้ใช้ลงชื่อเข้าใช้เราเรียกจุดสิ้นสุดเพื่อสร้างโทเค็นรีเฟรชและจัดเก็บข้อมูลผู้ใช้โทเค็นรหัสและรีเฟรชโทเค็นในคุกกี้ คำขอในอนาคตไปยังหน้า SSR จะได้รับข้อมูลผู้ใช้และโทเค็น ID จากคุกกี้รีเฟรชโทเค็น ID ตามต้องการ เมื่อผู้ใช้ออกจากระบบเราจะไม่ใช้คุกกี้
ดูการสาธิตสดของแอพตัวอย่าง
ขึ้นอยู่กับความต้องการของแอปของคุณวิธีอื่น ๆ อาจทำงานได้ดีขึ้นสำหรับคุณ
หากแอปของคุณใช้เพียงหน้าคงที่ หรือไม่จำเป็นต้องใช้ผู้ใช้ Firebase สำหรับ SSR ให้ใช้ Firebase JS SDK โดยตรงเพื่อโหลดผู้ใช้ทางฝั่งไคลเอ็นต์
getServerSidePropsหากแอปของคุณต้องการผู้ใช้ Firebase สำหรับ SSR (แต่ไม่ต้องการฝั่งเซิร์ฟเวอร์ Token ID) คุณสามารถพิจารณาหนึ่งในวิธีการเหล่านี้:
หากแอปของคุณต้องการโซลูชันการตรวจสอบความถูกต้องทั่วไป - ไม่ได้รับการรับรองความถูกต้องของ Firebase โดยเฉพาะ - คุณอาจพิจารณาใช้ nextauth.js nextauth.js ไม่ได้ ใช้การรับรองความถูกต้องของ Firebase แต่รองรับผู้ให้บริการข้อมูลประจำตัวที่หลากหลายรวมถึง Google อ่านเพิ่มเติมที่นี่เกี่ยวกับความแตกต่างระหว่าง next-firebase-auth และ NextAuth.js เพื่อดูว่าอะไรดีที่สุดสำหรับความต้องการของคุณ
หากแอปของคุณใช้เราเตอร์แอพของ Next.js แพ็คเกจนี้ยังไม่รองรับ คุณสามารถติดตามความคืบหน้าใน #568
แพ็คเกจนี้จะมีประโยชน์ หากคุณคาดว่าจะใช้ทั้งหน้าคงที่และ SSR หรือหากคุณต้องการเข้าถึงฝั่งเซิร์ฟเวอร์ Firebase ID Tokens
บันทึกย่อเกี่ยวกับสิ่งที่แพ็คเกจนี้ ไม่ได้ ทำ:
- มันไม่ได้ให้ UI การรับรองความถูกต้อง พิจารณา Firebaseui-Web หรือสร้างของคุณเอง
- มันไม่ได้ขยายฟังก์ชันการทำงานของ Firebase นอกเหนือจากการเข้าถึงผู้ใช้ที่ได้รับการรับรองความถูกต้อง ใช้ 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 คุณจะต้องตั้งค่าตัวแปรสภาพแวดล้อม FIREBASE_AUTH_EMULATOR_HOST
เริ่ม next-firebase-auth ใน _app.js :
// ./pages/_app.js
import initAuth from '../initAuth' // the module you created above
initAuth ( )
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } />
}
export default MyAppสร้างจุดสิ้นสุดการเข้าสู่ระบบและออกจากระบบ API ที่ตั้งค่าคุกกี้ 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 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 กับส่วนประกอบ ใช้สิ่งนี้กับหน้า next.js ใด ๆ ที่จะเข้าถึงผู้ใช้ที่ได้รับการรับรองความถูกต้องผ่านทางเบ็ด useUser เป็นทางเลือกที่จะสามารถเปลี่ยนเส้นทางฝั่งไคลเอ็นต์ตามสถานะการรับรองความถูกต้องของผู้ใช้
ยอมรับตัวเลือกต่อไปนี้:
| ตัวเลือก | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
whenAuthed | การดำเนินการที่จะดำเนินการหากผู้ใช้ได้รับการรับรองความถูกต้อง หนึ่งใน AuthAction.RENDER หรือ AuthAction.REDIRECT_TO_APP | 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 ได้เริ่มต้นแล้ว หนึ่งใน: AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN | AuthAction.RENDER |
appPageURL | URL ปลายทางเปลี่ยนเส้นทางเมื่อเราควรเปลี่ยนเส้นทางไปยังแอพ หน้าเว็บ | config.appPageURL |
authPageURL | URL ปลายทางเปลี่ยนเส้นทางเมื่อเราควรเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ หน้าเว็บ | config.authPageURL |
LoaderComponent | ส่วนประกอบที่จะแสดงผลเมื่อผู้ใช้ไม่ได้รับการแก้ไขและ whenUnauthedBeforeInit unauthedbeforeinit ถูกตั้งค่าเป็น AuthAction.SHOW_LOADER | โมฆะ |
ตัวอย่างเช่นหน้านี้จะเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบหากผู้ใช้ไม่ได้รับการรับรองความถูกต้อง:
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 )สำหรับการใช้ TypeScript ลองดูที่นี่
withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) ฟังก์ชั่นการสั่งซื้อที่สูงขึ้นที่ห่อฟังก์ชั่น getServerSideProps ของหน้า Next.js เพื่อให้บริบทของ User ในระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ เป็นทางเลือกที่จะสามารถเปลี่ยนเส้นทางเซิร์ฟเวอร์ตามสถานะการรับรองความถูกต้องของผู้ใช้ ฟังก์ชั่นที่ห่อหุ้มเป็นทางเลือก หากมีให้จะมีการเรียกใช้วัตถุ context ที่มีคุณสมบัติ user
ยอมรับตัวเลือกต่อไปนี้:
| ตัวเลือก | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
whenAuthed | การดำเนินการที่จะดำเนินการหากผู้ใช้ได้รับการรับรองความถูกต้อง AuthAction.RENDER หรือ AuthAction.REDIRECT_TO_APP | AuthAction.RENDER |
whenUnauthed | การดำเนินการที่จะดำเนินการหากผู้ใช้ ไม่ได้ รับการรับรองความถูกต้อง AuthAction.RENDER หรือ AuthAction.REDIRECT_TO_LOGIN | AuthAction.RENDER |
appPageURL | URL ปลายทางเปลี่ยนเส้นทางเมื่อเราควรเปลี่ยนเส้นทางไปยังแอพ หน้าเว็บ | config.appPageURL |
authPageURL | URL ปลายทางเปลี่ยนเส้นทางเมื่อเราควรเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ หน้าเว็บ | 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 }) => {}) พฤติกรรมเกือบจะเหมือนกันกับ withUserTokenSSR ด้วยความแตกต่างที่สำคัญอย่างหนึ่ง: user จะไม่มีโทเค็น ID
วิธีนี้ขึ้นอยู่กับข้อมูลผู้ใช้ที่ได้รับการรับรองจากคุกกี้แทนที่จะตรวจสอบหรือรีเฟรชโทเค็น Firebase ID เพราะเหตุนี้:
user ที่ให้ผ่านบริบทจะแก้ไขเป็นโมฆะเมื่อคุณโทรหา user.getIdToken()withUserTokenSSRwithUserTokenSSR เสมอcookies.signed ถูกตั้งค่าเป็น false การทำเช่นนั้นเป็นความเสี่ยงด้านความปลอดภัยที่อาจเกิดขึ้นเนื่องจากลูกค้าที่ได้รับการรับรองความถูกต้องสามารถแก้ไขได้โดยไคลเอนต์
สิ่งนี้ใช้ตัวเลือกเดียวกันกับ withUserTokenSSR
useUser() ตะขอที่ส่งคืน user ปัจจุบัน ในการใช้สิ่งนี้หน้า Next.js จะต้องถูกห่อหุ้มด้วย withUser หากผู้ใช้ไม่ได้รับการรับรองความถูกต้อง useUser จะส่งคืนอินสแตนซ์ของ User ด้วย id NULL
ตัวอย่างเช่น:
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 "เข้าสู่ระบบ" ของคุณ
คุกกี้ได้รับการจัดการด้วย cookies ดูตัวเลือกการกำหนดค่าสำหรับคุกกี้
อาร์กิวเมนต์ req ควรเป็นวัตถุร้องขอ IncomingMessage / next.js อาร์กิวเมนต์ res ควรเป็นวัตถุการตอบสนอง ServerResponse / next.js มันต้องการให้ส่วนหัวคำขอ Authorization ถูกตั้งค่าเป็นโทเค็นผู้ใช้ Firebase ID ซึ่งแพ็คเกจนี้จัดการโดยอัตโนมัติ
สามารถเรียกได้ทางด้านเซิร์ฟเวอร์เท่านั้น
unsetAuthCookies(req, res)UNSEST (หมดอายุ) คุกกี้ Auth เรียกสิ่งนี้จากจุดสิ้นสุด API "ออกจากระบบ" ของคุณ
อาร์กิวเมนต์ req ควรเป็นวัตถุร้องขอ IncomingMessage / next.js อาร์กิวเมนต์ res ควรเป็นวัตถุการตอบสนอง ServerResponse / next.js
สามารถเรียกได้ทางด้านเซิร์ฟเวอร์เท่านั้น
verifyIdToken(token) => Promise<User> ตรวจสอบโทเค็น Firebase ID และแก้ไขให้กับอินสแตนซ์ User สิ่งนี้มีจุดประสงค์ที่คล้ายกันกับ Firebase Admin VerifyidToken ของ Firebase Admin
getUserFromCookies({ ...options })เพิ่มใน v1
ตรวจสอบและส่งคืน user จากคุกกี้ Auth นี่เป็นอีกทางเลือกหนึ่งสำหรับ verifyIdToken ซึ่งตรวจสอบผู้ใช้จากโทเค็น ID
โดยทั่วไปเราขอแนะนำให้ปลายทาง API ใช้โทเค็น ID แทนที่จะเป็นคุกกี้เพื่อระบุผู้ใช้ซึ่งหลีกเลี่ยงช่องโหว่ CSRF ที่อาจเกิดขึ้น อย่างไรก็ตามวิธีนี้จะเป็นประโยชน์สำหรับจุดสิ้นสุดจะต้องพึ่งพาค่าคุกกี้เพื่อระบุผู้ใช้เท่านั้น
สามารถเรียกได้ทางด้านเซิร์ฟเวอร์เท่านั้น
ดูตัวอย่างนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้สิ่งนี้ในสภาพแวดล้อมแบ็คเอนด์แบบสแตนด์อโลนนอก Next.js
อาร์กิวเมนต์ตัวเลือกอาจรวมถึง:
Object - IncomingMessage / next.js คำขอวัตถุ
วัตถุคำขอที่มีค่าส่วนหัว cookie จะถูกใช้เพื่อตรวจสอบผู้ใช้ จำเป็นต้องมีค่า req หรือ authCookieValue
Boolean
ไม่ว่าผู้ใช้ที่ส่งคืนควรรวมโทเค็น Firebase ID หรือไม่ ค่าเริ่มต้นเป็นจริง เมื่อเป็นจริงพฤติกรรมจะตามมาของ withUserTokenSSR ; เมื่อเท็จจะเป็นไปตามของ withUserSSR อ่านเพิ่มเติมเกี่ยวกับความแตกต่างในเอกสารสำหรับ WithUserssr
String
เป็นทางเลือกในการจัดหาวัตถุ req คุณสามารถให้ค่าคุกกี้ Auth โดยตรงที่จะใช้ ตัวอย่างเช่นหากคุกกี้รับรองความถูกต้องของคุณชื่อ MyAuth คุณจะให้คุณค่าของคุกกี้ MyAuth.AuthUser (ถ้า includeToken เป็นเท็จ) หรือ MyAuth.AuthUserTokens (ถ้า includeToken เป็นจริง)
จำเป็นต้องมีค่า req หรือ authCookieValue
String
ค่าของลายเซ็นของคุกกี้ Auth หากใช้คุกกี้ที่ลงนาม ตัวอย่างเช่นหากคุกกี้รับรองความถูกต้องของคุณชื่อ MyAuth คุณจะให้คุณค่าของคุกกี้ MyAuth.AuthUser.sig (ถ้า includeToken เป็นเท็จ) หรือ MyAuth.AuthUserTokens.sig (ถ้า includeToken เป็นจริง)
AuthAction วัตถุที่กำหนดตัวเลือกการแสดงผล/การเปลี่ยนเส้นทางสำหรับ withUser และ withUserTokenSSR ดู Authaction
ดูตัวอย่างการกำหนดค่าที่นี่ ระบุการกำหนดค่าเมื่อคุณเรียก init
String|Function|Object - หน้าเว็บ
URL เริ่มต้นเพื่อนำทางไปยังเมื่อ withUser หรือ withUserTokenSSR จำเป็นต้องเปลี่ยนเส้นทางไปสู่การเข้าสู่ระบบ เป็นทางเลือกเว้นแต่จะใช้การดำเนินการ AuthAction.REDIRECT_TO_LOGIN Auth Auth
String|Function|Object - หน้าเว็บ
URL เริ่มต้นเพื่อนำทางไปยังเมื่อ withUser หรือ withUserTokenSSR จำเป็นต้องเปลี่ยนเส้นทางไปยังแอพ เป็นทางเลือกเว้นแต่จะใช้การกระทำ AuthAction.REDIRECT_TO_APP Auth Auth
String
จุดสิ้นสุด API โมดูลนี้จะเรียกเมื่อสถานะการรับรองความถูกต้องเปลี่ยนสำหรับผู้ใช้ Firebase ที่ได้รับการรับรองความถูกต้อง
String
จุดสิ้นสุดของ API โมดูลนี้จะเรียกเมื่อสถานะการรับรองความถูกต้องเปลี่ยนสำหรับผู้ใช้ Firebase ที่ไม่ผ่านการตรวจสอบแล้ว
Function (ไม่บังคับ)
ตัวจัดการเรียกว่าจุดสิ้นสุดของ Login API ส่งคืนการตอบสนองที่ไม่ใช่ 200 หากไม่ได้กำหนดตัวจัดการห้องสมุดนี้จะส่งคำตอบที่ไม่ใช่ 200
ไม่ได้ใช้หรือได้รับอนุญาตหากตั้ง tokenChangedHandler ที่กำหนดเอง
Function (ไม่บังคับ)
ตัวจัดการเรียกว่าจุดสิ้นสุดของ Logout API ส่งคืนการตอบกลับที่ไม่ใช่ 200 หากไม่ได้กำหนดตัวจัดการห้องสมุดนี้จะส่งคำตอบที่ไม่ใช่ 200
ไม่ได้ใช้หรือได้รับอนุญาตหากตั้ง tokenChangedHandler ที่กำหนดเอง
Function
การโทรกลับที่ทำงานเมื่อสถานะการรับรองความถูกต้องเปลี่ยนสำหรับผู้ใช้เฉพาะ ใช้สิ่งนี้หากคุณต้องการปรับแต่งวิธีที่แอพฝั่งไคลเอ็นต์ของคุณเรียกจุดสิ้นสุดการเข้าสู่ระบบ/ล็อกอิน API ของคุณ (ตัวอย่างเช่นเพื่อใช้ Fetcher ที่กำหนดเองหรือเพิ่มส่วนหัวที่กำหนดเอง) tokenChangedHandler ได้รับ User เป็นอาร์กิวเมนต์และถูกเรียกเมื่อโทเค็น ID ของผู้ใช้เปลี่ยนแปลงเช่นเดียวกับเหตุการณ์ onIdTokenChanged ของ Firebase
หากระบุการโทรกลับนี้ผู้ใช้จะต้องรับผิดชอบ:
ดูตัวจัดการเริ่มต้นสำหรับคำแนะนำ
String
โฮสต์และพอร์ตสำหรับเครื่องจำลองการรับรองความถูกต้องของ Firebase หากตั้งค่านี้ตัวจำลองการรับรองความถูกต้องจะเริ่มต้นด้วยโฮสต์และพอร์ตที่ให้ไว้
ต้องตรงกับค่าของตัวแปรสภาพแวดล้อม FIREBASE_AUTH_EMULATOR_HOST เช่น localhost:9099
Object
การกำหนดค่าผ่านไปยัง initializeApp ของ firebase-admin ควรมีคุณสมบัติ credential (วัตถุธรรมดา) และคุณสมบัติ databaseURL จำเป็น เว้นแต่ว่าคุณจะเริ่มต้น firebase-admin ตัวเองก่อนที่จะเริ่ม next-firebase-auth
firebaseAdminInitConfig.credential.privateKey ไม่สามารถกำหนดได้ในฝั่งลูกค้าและควรอาศัยอยู่ในตัวแปรสภาพแวดล้อมลับ
ใช้ vercel? ดูการเพิ่มคีย์ส่วนตัวลงใน Vercel เพื่อขอคำแนะนำ
Boolean
เมื่อเป็นจริง firebase-admin จะค้นหาบัญชีบริการสภาพแวดล้อมโฮสติ้งของคุณโดยปริยายในระหว่าง initializeApp สิ่งนี้มีผลบังคับใช้สำหรับทั้ง Firebase และ Google Cloud Platform และแนะนำมากกว่าการเพิ่มคีย์บัญชีบริการลงในรหัสผ่านเส้นทางไฟล์หรือค่าโดยตรง
หมายเหตุ : ในการตั้งค่า firebase-admin ไม่ว่าจะต้องมีการจัดเตรียม firebaseAdminInitConfig หรือ useFirebaseAdminDefaultCredential การใช้ข้อมูลรับรองเริ่มต้นจะแทนที่ค่าที่ส่งผ่านไปยัง firebaseAdminInitConfig.credential หากนำเสนอทั้งสอง
Object
การกำหนดค่าการจับคู่ Firebase JS SDK initializeApp ต้องใช้ค่า firebaseClientInitConfig.apiKey เสมอ เราขอแนะนำให้เริ่มต้น Firebase Client SDK ด้วยตัวคุณเองก่อนที่จะเริ่มต้นการเริ่ม next-firebase-auth ; อย่างไรก็ตาม next-firebase-auth จะพยายามเริ่มต้น Firebase หากแอป Firebase ไม่มีอยู่จริง
Object
การตั้งค่าที่ใช้สำหรับคุกกี้ Auth เราใช้ cookies เพื่อจัดการคุกกี้
คุณสมบัติรวมถึง:
name : ใช้เป็นฐานสำหรับชื่อคุกกี้: หากตั้ง name เป็น "myExample" คุกกี้จะถูกตั้งชื่อ MyExample.AuthUser และ MyExample.AuthUserTokens (รวมถึง MyExample.AuthUser.sig และ MyExample.AuthUserTokens.sig ถ้าคุกกี้) ที่จำเป็น.keys : อาร์เรย์ของสตริงที่จะใช้ในการเซ็นสัญญาคุกกี้; ตัวอย่างเช่น ['xD$WVv3qrP3ywY', '2x6#msoUeNhVHr'] เนื่องจากสตริงเหล่านี้เป็นความลับให้พวกเขาผ่านตัวแปรสภาพแวดล้อมลับเช่น [ process.env.COOKIE_SECRET_CURRENT, process.env.COOKIE_SECRET_PREVIOUS ] อาร์เรย์ keys จะถูกส่งผ่านไปยังตัวสร้างกุญแจตามที่อธิบายไว้ในแพ็คเกจ cookies จำเป็น เว้นแต่ว่า signed จะถูกตั้งค่าเป็น falsecookies.set ไม่สามารถกำหนดค่า keys ได้ในฝั่งไคลเอ็นต์และควรอยู่ในตัวแปรสภาพแวดล้อมลับ
เพื่อความปลอดภัยค่า maxAge จะต้องเป็นสองสัปดาห์หรือน้อยกว่า โปรดทราบว่า maxAge ถูกกำหนดเป็นมิลลิวินาที
หมายเหตุ: การหมดอายุของคุกกี้จะถูกขยายโดยอัตโนมัติเมื่อผู้ใช้โหลด Firebase JS SDK
Firebase JS SDK เป็นแหล่งที่มาของความจริงสำหรับการตรวจสอบความถูกต้องดังนั้นหากคุกกี้หมดอายุ แต่ผู้ใช้ยังคงได้รับการรับรองด้วย Firebase คุกกี้จะถูกตั้งค่าอีกครั้งโดยอัตโนมัติเมื่อผู้ใช้โหลด Firebase JS SDK - แต่ผู้ใช้จะไม่ได้รับการรับรองความถูกต้องในระหว่างการร้องขอครั้งแรก
Function (ไม่บังคับ)
ตัวจัดการข้อผิดพลาดที่จะถูกเรียกหากมีข้อผิดพลาดที่ไม่คาดคิดในขณะที่ตรวจสอบด้านเซิร์ฟเวอร์โทเค็น ID ของผู้ใช้ มันจะได้รับข้อผิดพลาด Auth Firebase
ห้องสมุดนี้จะ ไม่ โยนเมื่อไม่สามารถตรวจสอบโทเค็น ID ได้ แต่จะให้ผู้ใช้ที่ไม่ได้รับการรับรองจากแอป โดยทั่วไปแล้วจะจัดการกับข้อผิดพลาดที่เกี่ยวข้องกับการรับรองความถูกต้องเช่น auth/id-token-expired และ auth/user-disabled โดยไม่ต้องขว้าง ดู #366 และ #174 สำหรับพื้นหลังเพิ่มเติม
Function (ไม่บังคับ)
ตัวจัดการข้อผิดพลาดที่จะถูกเรียกหากมีข้อผิดพลาดที่ไม่คาดคิดในขณะที่รีเฟรชด้านเซิร์ฟเวอร์โทเค็น ID ของผู้ใช้
ห้องสมุดนี้จะ ไม่ โยนเมื่อไม่สามารถรีเฟรชโทเค็น ID ได้ แต่จะให้ผู้ใช้ที่ไม่ได้รับการรับรองจากแอป ดู #366 และ #174 สำหรับพื้นหลังเพิ่มเติม
กำหนดการกระทำที่จะดำเนินการขึ้นอยู่กับสถานะการรับรองความถูกต้องของผู้ใช้โดยใช้ค่าคงที่ต่อไปนี้:
AuthAction.RENDER : แสดงส่วนประกอบลูก
AuthAction.SHOW_LOADER : แสดงส่วนประกอบตัวโหลด
AuthAction.RETURN_NULL : return null แทนส่วนประกอบใด ๆ
AuthAction.REDIRECT_TO_LOGIN : เปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ
AuthAction.REDIRECT_TO_APP : เปลี่ยนเส้นทางไปยังแอป
วัตถุผู้ใช้ใช้ในบริบทฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ นี่คือการเป็นตัวแทนปกติของผู้ใช้ Firebase
ID - String|null
ID ของผู้ใช้ Firebase หรือ 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
URL รูปภาพของผู้ใช้ Firebase หรือ NULL หากผู้ใช้ไม่มี URL รูปภาพ
การเรียกร้อง - Object
เพิ่มใน v0.13.0
การเรียกร้อง Firebase ที่กำหนดเองใด ๆ
getIdToken - Function => Promise<String|null>
ฟังก์ชั่น async ที่แก้ไขเป็นสตริงโทเค็น Firebase ID ที่ถูกต้องหรือเป็นโมฆะหากไม่มีโทเค็นที่ถูกต้อง
clientInitialized - Boolean
ไม่ว่าจะเป็น Firebase JS SDK ได้เริ่มต้นหรือไม่ หาก true เราจะไม่ใช้ข้อมูลผู้ใช้ใด ๆ จากอุปกรณ์ประกอบฉากฝั่งเซิร์ฟเวอร์อีกต่อไป
FirebaseUser - FirebaseUser |null
ผู้ใช้จาก Firebase JS SDK หากมีการเริ่มต้น มิฉะนั้นเป็นโมฆะ
Signout - Function => Promise<void>
วิธีการที่เรียกว่า signOut ของ Firebase หาก Firebase JS SDK ได้รับการเริ่มต้น หาก SDK ยังไม่ได้เริ่มต้นวิธีนี้เป็นวิธีที่ไม่มี
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 ถ้าฝั่งเซิร์ฟเวอร์หรือไม่ได้กำหนดหากฝั่งไคลเอ็นต์
ดูตัวอย่าง
ติดอยู่? การค้นหาการอภิปรายหรือเปิดการอภิปรายถามตอบของคุณเองซึ่งอธิบายถึงสิ่งที่คุณได้ลองไปแล้ว
นี่คือขั้นตอนเริ่มต้นที่คุณสามารถทำได้เพื่อแก้ไขปัญหา:
onVerifyTokenError และ onTokenRefreshError ในการกำหนดค่าของคุณและตรวจสอบบันทึกข้อผิดพลาดใด ๆdebug: true ในการกำหนดค่าและอ่านบันทึกการดีบักฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์สำหรับข้อความที่เป็นประโยชน์เราคาดว่าค่าการกำหนดค่าที่ละเอียดอ่อนบางอย่างจะเป็นเท็จทางด้านไคลเอนต์ (ดูรหัสการตรวจสอบการกำหนดค่า) นี่เป็นข้อควรระวังเพื่อให้แน่ใจว่านักพัฒนาไม่ได้รวมบางสิ่งบางอย่างเช่นคีย์ส่วนตัว Firebase กับลูกค้า JS
ในการแก้ไขปัญหานี้ตรวจสอบให้แน่ใจว่าการตั้งค่าการตั้งค่าจะ undefined ที่ฝั่งไคลเอ็นต์โดยลงชื่อเข้าใช้คอนโซลเบราว์เซอร์ของคุณ คุณสามารถใช้การสนับสนุน .env ของถัดไปเพื่อตั้งค่าตัวแปรเซิร์ฟเวอร์เท่านั้น อย่าใช้คำนำหน้า NEXT_PUBLIC* สำหรับค่าความลับใด ๆ
แพ็คเกจนี้จะเรียกจุดสิ้นสุดของ Google เมื่อต้องการรีเฟรชด้านเซิร์ฟเวอร์โทเค็น คุณเห็นข้อผิดพลาดจากคำขอนั้น
ในการแก้ไขปัญหานี้ยืนยันว่า firebaseAdminInitConfig.credential.clientEmail ถูกต้อง ควรเป็นอีเมลที่จับคู่กับคีย์ส่วนตัว Firebase ของคุณ
หากไม่ได้ช่วยลองตรวจสอบโทเค็นที่กำหนดเองเพื่อตรวจสอบค่าและโครงสร้างด้วยตนเอง บางคนประสบปัญหานี้เมื่อเวลาเซิร์ฟเวอร์ไม่ถูกต้อง
withUserTokenSSR แต่การรับรองความถูกต้องของไคลเอ็นต์หากการรับรองความถูกต้องทำงานด้านไคลเอนต์ แต่ไม่ได้อยู่ในฝั่งเซิร์ฟเวอร์คุกกี้ Auth มักจะไม่ได้ตั้งค่า
ในการแก้ไขปัญหานี้ยืนยันว่าคุกกี้ Auth จะถูกตั้งค่าในเครื่องมือ Dev ของเบราว์เซอร์ของคุณ หากพวกเขาไม่ได้ตั้งค่าโปรดตรวจสอบว่าตัวเลือก secure sameSite และ path ส่งผ่านในการกำหนดค่า next-firebase-auth ต่อไปสำหรับสภาพแวดล้อมของคุณ ตัวอย่างเช่นหากคุณกำลังทดสอบที่ไม่ใช่ https localhost ตรวจสอบให้แน่ใจว่า secure เป็นเท็จ
นอกจากนี้โปรดตรวจสอบบันทึกเซิร์ฟเวอร์ของคุณอีกครั้งสำหรับข้อผิดพลาดใด ๆ เพื่อให้แน่ใจว่าแอป Admin Firebase กำลังเริ่มต้นอย่างถูกต้อง
บ่อยครั้งสิ่งนี้เกิดจากอีเมลที่ไม่ถูกต้องในข้อมูลรับรอง Firebase โปรดตรวจสอบว่าอีเมลนั้นถูกต้องและมาจากบัญชี Firebase เดียวกับคีย์ส่วนตัวของคุณหรือลองสร้างคีย์ใหม่: https://firebase.google.com/docs/admin/setup
คุณสามารถลองตั้งค่าข้อมูลรับรองของคุณในแอพตัวอย่างเพื่อให้แน่ใจว่ารหัสแอปของคุณไม่มีปัญหา
ในการพัฒนาในท้องถิ่นลองล้างข้อมูล/คุกกี้สำหรับ localhost ในกรณีที่คุณลงนามก่อนหน้านี้กับบัญชี Firebase อื่นและยังคงมีคุกกี้ Auth ที่ลงนามโดยคีย์ส่วนตัวอื่น
นอกจากนี้คุณยังสามารถลองปิดใช้งานตัวจำลองการรับรองความถูกต้องของ Firebase ลบ firebaseAuthEmulatorHost ออกจากการกำหนดค่าของคุณและลบ FIREBASE_AUTH_EMULATOR_HOST ออกจากไฟล์. .env ของคุณ
ดูการเพิ่มคีย์ส่วนตัวลงใน Vercel และการสนทนานี้เกี่ยวกับการจัดรูปแบบคีย์ส่วนตัว
เราคาดว่าแอพบางตัวจะต้องใช้คุณสมบัติบางอย่างที่ไม่พร้อมใช้งานในปัจจุบัน:
เรายินดีที่จะรับฟังความคิดเห็นของคุณเกี่ยวกับคุณสมบัติเหล่านี้หรือคุณสมบัติอื่น ๆ โปรดอย่าลังเลที่จะเปิดการสนทนา!
เรายินดีต้อนรับผลงาน! โปรดดูเอกสารที่มีส่วนร่วมเพื่อเริ่มต้น
