모든 Next.js 렌더링 전략에 대한 간단한 파이어베이스 인증.
이 패키지를 사용하면 클라이언트 측 및 서버 측 렌더링 (SSR)에서 인증 된 Firebase 사용자 및 ID 토큰을 간단하게 얻을 수 있습니다.
우리는 Firebase JS SDK를 인증 상태의 진실의 원천으로 취급합니다. 사용자가 서명하면 엔드 포인트를 호출하여 새로 고침 토큰을 생성하고 쿠키에 사용자 정보, ID 토큰 및 새로 고침 토큰을 저장합니다. SSR 페이지에 대한 향후 요청은 쿠키에서 사용자 정보와 ID 토큰을 받고 필요에 따라 ID 토큰을 새로 고칩니다. 사용자가 로그 아웃하면 쿠키를 설정하지 않습니다.
예제 앱의 라이브 데모를 참조하십시오.
앱의 요구에 따라 다른 접근 방식이 더 잘 작동 할 수 있습니다.
앱이 정적 페이지 만 사용하거나 SSR 용 FireBase 사용자가 필요하지 않은 경우 FireBase JS SDK를 직접 사용하여 클라이언트 측에서 사용자를로드하십시오.
getServerSideProps 사용하면 Firebase 사용자에게 액세스 할 수 없습니다.앱이 SSR 용 FireBase 사용자가 필요한 경우 (ID 토큰 서버 측면이 필요하지 않음) 이러한 접근 방식 중 하나를 고려할 수 있습니다.
앱에 일반화 된 인증 솔루션 (특히 Firebase 인증이 아닌 일반화 된 인증 솔루션이 필요한 경우 Nexuth.js 사용을 고려할 수 있습니다. NextAuth.js는 FireBase 인증을 사용 하지 않지만 Google을 포함한 다양한 신분 공급자를 지원합니다. next-firebase-auth 와 Nextauth.js의 차이점에 대해 자세히 알아 보려면 귀하의 요구에 가장 적합한 것이 어떤지 확인하십시오.
앱이 다음에 사용하는 경우 JS의 앱 라우터를 사용하는 경우이 패키지는 아직 지원되지 않습니다. #568의 진행 상황을 따를 수 있습니다.
이 패키지는 정적 페이지와 SSR을 모두 사용하거나 FireBase ID Tokens 서버 측에 액세스 해야하는 경우 도움이 될 것입니다 .
이 패키지가하지 않는 일에 대한 빠른 메모 :
- 인증 UI를 제공하지 않습니다. Firebaseui-Web를 고려하거나 직접 구축하십시오.
- 인증 된 사용자에게 보편적 인 액세스를 제공하는 것 이상으로 Firebase 기능을 확장하지 않습니다. 다른 요구에 대해서는 Firebase Admin SDK 및 FireBase JS SDK를 사용하십시오.
설치하다:
원 npm i next-firebase-auth yarn add 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 환경 변수를 설정해야합니다.
_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인증 쿠키를 설정하는 로그인 및 로그 아웃 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 후크를 통해 인증 된 사용자에게 액세스 할 Next.js 페이지에서이를 사용하십시오. 선택적으로, 사용자의 인증 상태를 기반으로 클라이언트 측 리디렉션 할 수 있습니다.
다음 옵션을 수락합니다.
| 옵션 | 설명 | 기본 |
|---|---|---|
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 Client JS SDK가 아직 초기화되지 않은 경우 취해야 할 조치. 중 하나 : AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN , AuthAction.SHOW_LOADER . | AuthAction.RENDER |
whenUnauthedAfterInit | 사용자가 인증되지 않고 Firebase Client JS SDK가 이미 초기화 된 경우 수행 할 조치. 중 하나 : AuthAction.RENDER , AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | 앱으로 리디렉션해야 할 때 대상 RINSTRING URL을 리디렉션합니다. PageUrl. | config.appPageURL |
authPageURL | 로그인 페이지로 리디렉션해야 할 때 대상 RINEDING URL을 리디렉션합니다. PageUrl. | config.authPageURL |
LoaderComponent | 사용자가 승인 할 때 렌더링 할 구성 요소와 ForeInit이 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 )TypeScript 사용은 여기를 참조하십시오.
withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {}) JS Pages의 getServerSideProps 기능을 래핑하는 고차 기능은 서버 측 렌더링 중에 User 컨텍스트를 제공합니다. 선택적으로, 사용자의 인증 상태에 따라 서버 측 리디렉션 할 수 있습니다. 랩핑 된 기능은 선택 사항입니다. 제공된 경우 user 속성이 포함 된 context 객체와 함께 호출됩니다.
다음 옵션을 수락합니다.
| 옵션 | 설명 | 기본 |
|---|---|---|
whenAuthed | 사용자가 인증 된 경우 취할 조치. AuthAction.RENDER 또는 AuthAction.REDIRECT_TO_APP 중 하나입니다. | AuthAction.RENDER |
whenUnauthed | 사용자가 인증 되지 않은 경우 취할 작업. AuthAction.RENDER 또는 AuthAction.REDIRECT_TO_LOGIN . | AuthAction.RENDER |
appPageURL | 앱으로 리디렉션해야 할 때 대상 RINSTRING URL을 리디렉션합니다. PageUrl. | config.appPageURL |
authPageURL | 로그인 페이지로 리디렉션해야 할 때 대상 RINEDING 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 }) => {}) 하나의 주요 차이점과 함께 withUserTokenSSR 과 거의 동일하게 동작합니다. user ID 토큰을 포함하지 않습니다.
이 방법은 Firebase ID 토큰을 확인하거나 새로 고치지 않고 쿠키의 인증 된 사용자 데이터에 의존합니다. 따라서:
user user.getIdToken() 호출 할 때 NULL로 해결됩니다.withUserTokenSSR 보다 빠릅니다.withUserTokenSSR 사용해야합니다.cookies.signed false 하면 사용하지 마십시오. 인증 된 사용자 쿠키 값은 클라이언트가 수정할 수 있기 때문에 잠재적 인 보안 위험이 있습니다.
이것은 withUserTokenSSR 과 동일한 옵션을 취합니다.
useUser() 현재 user 반환하는 후크. 이것을 사용하려면 다음.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 엔드 포인트에서 이것을 호출하십시오.
쿠키는 cookies 로 관리됩니다. 쿠키 옵션 구성을 참조하십시오.
req 인수는 IncomingMessage / next.js 요청 객체 여야합니다. res 인수는 ServerResponse / Next.js 응답 객체 여야합니다. Authorization 요청 헤더를 Firebase 사용자 ID 토큰으로 설정 해야하는데이 패키지는 자동으로 처리됩니다.
서버 측에서만 호출 할 수 있습니다.
unsetAuthCookies(req, res)셀프 쿠키를 unsets (만료). "로그 아웃"API 엔드 포인트에서 이것을 호출하십시오.
req 인수는 IncomingMessage / next.js 요청 객체 여야합니다. res 인수는 ServerResponse / Next.js 응답 객체 여야합니다.
서버 측에서만 호출 할 수 있습니다.
verifyIdToken(token) => Promise<User> Firebase ID 토큰을 확인하고 User 인스턴스로 해결합니다. 이것은 Firebase Admin SDK의 verifyIdToken과 유사한 목적을 제공합니다.
getUserFromCookies({ ...options })v1에 추가되었습니다
인증 쿠키에서 user 확인하고 반환합니다. 이것은 verifyIdToken 의 대안으로, ID 토큰에서 사용자를 확인합니다.
일반적으로 API 엔드 포인트는 쿠키 대신 ID 토큰을 사용하여 사용자를 식별하는 것이 좋습니다. 이는 잠재적 인 CSRF 취약점을 피할 수 있습니다. 그러나이 방법은 엔드 포인트에 도움이 될 것입니다. 쿠키 값에만 의존하여 사용자를 식별해야합니다.
서버 측에서만 호출 할 수 있습니다.
Next.js 외부의 독립형 백엔드 환경에서이를 사용하는 것에 대한 자세한 내용은이 예제를 참조하십시오.
옵션 인수에는 다음이 포함될 수 있습니다.
Object - IncomingMessage / next.js 요청 객체
cookie 헤더 값을 사용하여 사용자를 확인하는 데 사용되는 요청 객체. req 값 또는 authCookieValue 가 필요합니다.
Boolean
반환 된 사용자가 Firebase ID 토큰을 포함 해야하는지 여부. 기본값은 참으로. 사실이라면, 행동은 withUserTokenSSR 의 행동을 따릅니다. 거짓이면 withUserSSR 의 것을 따릅니다. Withuserssr의 문서의 차이점에 대해 자세히 알아보십시오.
String
req 객체를 제공하기위한 대안으로 사용할 인증 쿠키 값을 직접 제공 할 수 있습니다. 예를 들어, 인증 쿠키가 MyAuth 라는 이름을 사용하는 경우 쿠키 MyAuth.AuthUser ( includeToken 경우) 또는 MyAuth.AuthUserTokens ( includeToken 경우)의 가치를 제공합니다.
req 값 또는 authCookieValue 가 필요합니다.
String
서명 된 쿠키를 사용하는 경우 인증 쿠키 서명의 가치. 예를 들어, 인증 쿠키가 MyAuth 라는 경우 쿠키 MyAuth.AuthUser.sig ( includeToken 경우) 또는 MyAuth.AuthUserTokens.sig ( includeToken 경우 true)의 가치를 제공합니다.
AuthAction withUser 및 withUserTokenSSR 의 렌더링/리디렉션 옵션을 정의하는 객체. 인증을 참조하십시오.
여기에서 예제 구성을 참조하십시오. init 호출 할 때 구성을 제공하십시오.
String|Function|Object - PageUrl
withUser 또는 withUserTokenSSR 시대로 이동할 기본 URL은 로그인을 리디렉션해야합니다. AuthAction.REDIRECT_TO_LOGIN 인증 조치를 사용하지 않는 한 선택 사항.
String|Function|Object - PageUrl
withUser 또는 withUserTokenSSR 시점으로 이동할 기본 URL은 앱으로 리디렉션해야합니다. AuthAction.REDIRECT_TO_APP 인증 조치를 사용하지 않는 한 선택 사항.
String
API 엔드 포인트이 모듈은 인증 된 Firebase 사용자의 인증 상태를 변경할 때 호출됩니다.
String
API 엔드 포인트이 모듈은 인증 상태가 무시 된 Firebase 사용자의 상태를 변경할 때 호출됩니다.
Function (선택 사항)
로그인 API 엔드 포인트가 비 2000 응답을 반환하는 경우 호출 된 처리기. 핸들러가 정의되지 않으면이 라이브러리는 2000이 아닌 응답을합니다.
사용자 정의 tokenChangedHandler 설정된 경우 사용하거나 허용되지 않습니다.
Function (선택 사항)
로그 아웃 API 엔드 포인트가 비 20000 응답을 반환하는 경우 핸들러가 호출됩니다. 핸들러가 정의되지 않으면이 라이브러리는 2000이 아닌 응답을합니다.
사용자 정의 tokenChangedHandler 설정된 경우 사용하거나 허용되지 않습니다.
Function
인증 상태가 특정 사용자의 상태를 변경할 때 실행되는 콜백. 클라이언트 측 앱이 로그인/로그 아웃 API 엔드 포인트를 호출하는 방식을 사용자 정의하려면이 기능을 사용하십시오 (예 : 사용자 정의 페치를 사용하거나 사용자 정의 헤더를 추가). tokenChangedHandler User 인수로 수신하며 FireBase의 onIdTokenChanged 이벤트와 유사하게 사용자의 ID 토큰을 변경할 때 호출됩니다.
이 콜백이 지정되면 사용자는 다음을 담당합니다.
안내는 기본 핸들러를 참조하십시오.
String
로컬 파이어베이스 인증 에뮬레이터의 호스트 및 포트. 이 값이 설정되면 인증 에뮬레이터는 제공된 호스트 및 포트로 초기화됩니다.
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 플랫폼 모두에 적용되며 파일 경로 또는 직접 값을 통해 코드에 서비스 계정 키를 추가하는 것보다 권장됩니다.
참고 : firebase-admin 설정하려면 firebaseAdminInitConfig 또는 useFirebaseAdminDefaultCredential 제공해야합니다. 기본 자격 증명을 사용하면 firebaseAdminInitConfig.credential 로 전달 된 값이 모두 제시되면 재정의됩니다.
Object
Firebase JS SDK의 initializeApp 과 일치하는 구성. firebaseClientInitConfig.apiKey 값은 항상 필요합니다 . next-firebase-auth 를 초기화하기 전에 Firebase 클라이언트 SDK를 직접 초기화하는 것이 좋습니다. 그러나 Firebase 앱이 아직 존재하지 않으면 next-firebase-auth Firebase를 초기화하려고 시도합니다.
Object
인증 쿠키에 사용되는 설정. 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 패키지에 설명 된대로 KeyGrip 생성자로 전달됩니다. signed 않는 한 필수는 false 로 설정됩니다.cookies.set 의 모든 옵션. keys 값은 클라이언트 측에서 정의 할 수 없으며 비밀 환경 변수에 살아야합니다.
보안의 경우 maxAge 값은 2 주 이하이어야합니다. maxAge 는 밀리 초로 정의됩니다.
참고 : 사용자가 FireBase JS SDK를로드하면 쿠키의 만료가 자동으로 확장됩니다.
Firebase JS SDK는 인증의 진실의 원천이므로 쿠키가 만료되지만 사용자가 여전히 FireBase로 인증되면 사용자가 FireBase JS SDK를로드하면 쿠키가 자동으로 다시 설정됩니다. 그러나 첫 번째 요청에서 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.
이메일 확인 - 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가 초기화되지 않은 경우이 방법은 NO-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 서버 쪽이거나 클라이언트 측면 정의되지 않은 다음 컨텍스트 값입니다.
examples.md를 참조하십시오.
갇힌? 토론을 검색하거나 이미 시도한 내용을 설명하는 자신의 Q & A 토론을 열십시오.
다음은 디버그 문제를 해결하기 위해 수행 할 수있는 몇 가지 초기 단계입니다.
onVerifyTokenError 및 onTokenRefreshError 정의하고 오류 로그를 확인하십시오.debug: true 및 유용한 메시지에 대해 서버 측 및 클라이언트 측 디버그 로그를 통해 읽으십시오.클라이언트 측에서 특정 민감한 구성 값이 위조 될 것으로 예상됩니다 (구성 유효성 검사 코드 참조). 이는 개발자가 실수로 클라이언트 JS와 함께 FireBase 개인 키와 같은 것을 실수로 번들링하지 않도록하는 예방 조치입니다.
이 문제를 해결하려면 브라우저 콘솔에 로그인하여 클라이언트 측에서 구성 설정이 undefined 하십시오. 다음의 .env 지원을 사용하여 서버 전용 변수를 설정할 수 있습니다. 비밀 값에 대해 NEXT_PUBLIC* 접두사를 사용하지 마십시오.
이 패키지는 토큰 서버 측을 새로 고침 해야하는 경우 Google 엔드 포인트를 호출합니다. 해당 요청에서 오류가 표시됩니다.
이 문제를 해결하려면 firebaseAdminInitConfig.credential.clientEmail 이 올바른지 확인하십시오. Firebase Private 키와 쌍을 이루는 이메일이어야합니다.
도움이되지 않으면 사용자 정의 토큰을 검사하여 값과 구조를 수동으로 검증하십시오. 어떤 사람들은 서버 시간이 잘못되었을 때이 문제에 직면합니다.
withUserTokenSSR 사용할 때는 사용자와 토큰이 항상 늘어나지 만 클라이언트 측 인증은 작동합니다.Auth가 클라이언트 측에서 작동하지만 서버 측에서 작동하지 않는 경우 인증 쿠키가 설정되지 않았을 가능성이 높습니다.
이 문제를 해결하려면 인증 쿠키가 브라우저의 개발 도구에 설정되어 있는지 확인하십시오. 설정되지 않은 경우 next-firebase-auth 구성에 전달 된 secure , sameSite 및 path 옵션이 귀하의 환경에 적합한 지 확인하십시오. 예를 들어, HTTPS LocalHost를 테스트하는 경우 secure 가 False인지 확인하십시오.
또한 FireBase Admin 앱이 올바르게 초기화되도록 오류에 대한 서버 로그를 두 번 확인하십시오.
종종 이것은 Firebase 자격 증명의 잘못된 이메일로 인해 발생합니다. 이메일이 정확하고 개인 키와 동일한 FireBase 계정에서 나오는지 확인하거나 새 키를 생성하십시오 : https://firebase.google.com/docs/admin/setup
예제 앱에서 자격 증명을 설정하여 앱 코드가 문제가되지 않도록 시도 할 수 있습니다.
지역 개발에서 이전에 다른 Firebase 계정에 사인했지만 여전히 다른 개인 키로 인증 쿠키가있는 경우 localhost 의 데이터/쿠키를 지우십시오.
Firebase 인증 에뮬레이터를 비활성화 할 수도 있습니다. 구성에서 firebaseAuthEmulatorHost 제거하고 .env 파일에서 FIREBASE_AUTH_EMULATOR_HOST 제거하십시오.
Vercel에 개인 키를 추가하고 개인 키 형식에 대한이 토론을 참조하십시오.
일부 앱에는 현재 사용할 수없는 일부 기능이 필요할 것으로 예상됩니다.
이 기능 또는 기타 기능에 대한 귀하의 의견을 듣고 싶습니다. 자유롭게 토론을 열어주세요!
우리는 기여를 환영합니다! 기고 문서를 참조하십시오.