تنزيل next firebase auth - تنزيل رمز مصدر next firebase auth

FireBase-Auth

مصادقة Firebase البسيطة لجميع استراتيجيات تقديم jex.js.

العرض التوضيحي • البدائل • البدء • API • التكوين • الأنواع • الترحيل إلى V1 • أمثلة • استكشاف الأخطاء وإصلاحها • المساهمة

ماذا تفعل

تجعل هذه الحزمة من السهل الحصول على مستخدم Firebase المصادق عليه ورمز المعرف أثناء كل من تقديم جانب العميل وتقديم جانب الخادم (SSR).

؟ دعم لجميع استراتيجيات تقديم jex.js

ملفات تعريف الارتباط الموقعة ، الآمنة ، HTTP فقط بشكل افتراضي

؟ وصول من جانب الخادم إلى رمز معرف Firebase الخاص بالمستخدم

؟ إدارة ملفات تعريف الارتباط المدمجة

↩ دعم مدمج لإعادة التوجيه بناءً على حالة مصادقة المستخدم

نتعامل مع Firebase JS SDK كمصدر للحقيقة لحالة المصادقة. عندما يقوم المستخدم بتسجيل الدخول ، فإننا ندعو نقطة النهاية لإنشاء رمز تحديث وتخزين معلومات المستخدم ورمز المعرف والرمز المميز لتحديث ملفات تعريف الارتباط. تتلقى الطلبات المستقبلية لصفحات SSR معلومات المستخدم ورمز المعرف من ملفات تعريف الارتباط ، وتحديث رمز المعرف حسب الحاجة. عندما يسجل المستخدم الخروج ، نلقيم ملفات تعريف الارتباط.

العرض التوضيحي

شاهد عرضًا مباشرًا لتطبيق المثال.

عندما (لا) لاستخدام هذه الحزمة

اعتمادًا على احتياجات تطبيقك ، قد تعمل المقاربات الأخرى بشكل أفضل بالنسبة لك.

إذا كان تطبيقك يستخدم صفحات ثابتة فقط أو لا يحتاج إلى مستخدم Firebase لـ SSR ، فاستخدم Firebase JS SDK مباشرة لتحميل المستخدم على جانب العميل.

الايجابيات: إنه أبسط ويزيل هذه الحزمة باعتبارها تبعية.
سلبيات: لن تتمكن من الوصول إلى مستخدم Firebase عند استخدام getServerSideProps .

إذا احتاج تطبيقك إلى مستخدم Firebase لـ SSR (ولكنه لا يحتاج إلى جانب خادم الرمز المميز) ، فيمكنك النظر في أحد هذه الأساليب:

على العميل ، قم بتعيين ملف تعريف ارتباط JavaScript مع معلومات مستخدم Firebase بمجرد تحميل Firebase JS SDK.
- الايجابيات: لن تحتاج إلى نقاط نهاية تسجيل الدخول/تسجيل الدخول إلى واجهة برمجة تطبيقات. يمكنك هيكلة بيانات المستخدم المصادقة كما تريد.
- السلبيات: سيتم عدم موقعة ملف تعريف الارتباط ويمكن الوصول إليه إلى JavaScript الأخرى ، مما يجعل هذا النهج أقل أمانًا. لن تتمكن دائمًا من الوصول إلى جانب خادم Firebase ID ، لذلك لن تتمكن من الوصول إلى خدمات Firebase الأخرى. (لاحظ أنه يمكنك تعيين رمز المعرف في ملف تعريف الارتباط ، ولكنه سوف ينتهي بعد ساعة ويكون غير صالح للصفحات المستقبلية التي يتم تقديمها من جانب الخادم.)
استخدم ملفات تعريف الارتباط جلسة Firebase.
- الايجابيات: يزيل هذه الحزمة كاعتماد.
- سلبيات: لن تتمكن من الوصول إلى جانب خادم Token Firebase ، لذلك لن تتمكن من الوصول إلى خدمات Firebase الأخرى. ستحتاج إلى تنفيذ المنطق للتحقق من الجلسة وإدارة حالة الجلسة.

إذا كان تطبيقك يحتاج إلى حل مصادقة معمم - وليس على وجه التحديد مصادقة Firebase - فيمكنك التفكير في استخدام NextAuth.js. لا يستخدم Nextauth.js مصادقة Firebase ولكنه يدعم مجموعة واسعة من مزودي الهوية ، بما في ذلك Google. اقرأ المزيد هنا حول الاختلافات بين next-firebase-auth و Nextauth.js لمعرفة أيها أفضل لتلبية احتياجاتك.

إذا كان تطبيقك يستخدم جهاز توجيه تطبيق Next.js ، فإن هذه الحزمة لا تدعمه بعد. يمكنك متابعة التقدم في #568.

من المحتمل أن تكون هذه الحزمة مفيدة إذا كنت تتوقع استخدام كل من الصفحات الثابتة و SSR أو إذا كنت بحاجة إلى الوصول إلى جانب خادم Firebase ID.

ملاحظة سريعة حول ما لا تفعله هذه الحزمة:
لا يوفر واجهة مستخدم المصادقة. النظر في 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

قم بإنشاء نقاط نهاية تسجيل الدخول والتسجيل في واجهة برمجة التطبيقات التي وضعت ملفات تعريف الارتباط المصادقة:

 // ./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 )

API

init
withuser
withusertokenssr
withusersr
مستخدم
setauthcookies
unsetauthcookies
تحقق
getUserFromcoOkies
Authaction

`init(config)`

تهيئة next-firebase-auth ، مع أخذ كائن التكوين.

هذا يجب قبل استدعاء أي طريقة أخرى.
نوصي بتهيئة عميل Firebase SDK قبل تسميته.

`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 للوجهة المعاد توجيه عندما يجب أن نعيد التوجيه إلى التطبيق. pageurl.	`config.appPageURL`
`authPageURL`	عنوان URL للوجهة المعاد توجيه عندما يجب أن نعيد التوجيه إلى صفحة تسجيل الدخول. pageurl.	`config.authPageURL`
`LoaderComponent`	المكون الذي يجب تقديمه عند عدم تأليف المستخدم `whenUnauthedBeforeInit` يتم تعيين unuuthedbeforeinit على `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 للوجهة المعاد توجيه عندما يجب أن نعيد التوجيه إلى التطبيق. pageurl.	`config.appPageURL`
`authPageURL`	عنوان URL للوجهة المعاد توجيه عندما يجب أن نعيد التوجيه إلى صفحة تسجيل الدخول. pageurl.	`config.authPageURL`

على سبيل المثال ، ستقوم هذه الصفحة SSR بالمستخدمين المصادقين ، حيث تجلب الدعائم باستخدام رمز معرف Firebase الخاص بهم ، وسوف يتم إعادة توجيه جانب الخادم إلى صفحة تسجيل الدخول إذا لم يتم مصادقة المستخدم:

 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 على رمز معرف.

تعتمد هذه الطريقة على بيانات المستخدم المصادقة من ملف تعريف الارتباط بدلاً من التحقق من أو تحديث رمز معرف Firebase. بالتالي:

لا يوفر رمزًا معرفًا على جانب الخادم. سيتم حل user المقدم عبر السياق إلى NULL عند الاتصال بـ user.getIdToken() .
لا تحتاج إلى تقديم طلب شبكة لتحديث رمز معرف منتهي الصلاحية ، لذلك سيكون ، في المتوسط ، أسرع من withUserTokenSSR .
لا يتحقق من الإلغاء الرمزي. إذا كنت بحاجة إلى التحقق من عدم إلغاء بيانات اعتماد المستخدم ، فيجب عليك دائمًا استخدام withUserTokenSSR .

️ لا تستخدم هذا عندما يتم false cookies.signed . يعد القيام بذلك مخاطر أمان محتملة ، لأن العميل يمكن تعديل قيم ملفات تعريف الارتباط للمستخدم.

هذا يأخذ نفس الخيارات مثل withUserTokenSSR .

`useUser()`

خطاف يرجع user الحالي. لاستخدام هذا ، يجب أن تكون صفحة Next.js ملفوفة في withUser . إذا لم يتم مصادقة المستخدم ، فسيقوم useUser بإرجاع 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 ، والذي يتعامل معه هذه الحزمة تلقائيًا.

هذا لا يمكن استدعاؤه إلا على جانب الخادم.

`unsetAuthCookies(req, res)`

unsets (انتهاء صلاحية) ملفات تعريف الارتباط المصادقة. استدعاء هذا من نقطة نهاية "تسجيل الخروج" الخاص بك API.

يجب أن تكون وسيطة req كائن طلب IncomingMessage / next.js. يجب أن تكون وسيطة res كائن استجابة ServerResponse / Next.js.

هذا لا يمكن استدعاؤه إلا على جانب الخادم.

`verifyIdToken(token) => Promise<User>`

يتحقق من رمز معرف Firebase ويحل إلى مثيل User . هذا يخدم غرض مماثل مثل Firebase Admin's SDK's VerifyIdToken.

`getUserFromCookies({ ...options })`

أضاف في V1

يتحقق وإرجاع user من ملفات تعريف الارتباط Auth. هذا بديل للتحقق من verifyIdToken ، والذي يتحقق من المستخدم من رمز المعرف.

بشكل عام ، نوصي بنقاط نهاية API باستخدام رمز معرف بدلاً من ملفات تعريف الارتباط لتحديد المستخدم ، الذي يتجنب بعض نقاط الضعف المحتملة. ومع ذلك ، ستكون هذه الطريقة مفيدة لنقاط النهاية يجب أن تعتمد بشكل حصري على قيم ملفات تعريف الارتباط لتحديد المستخدم.

هذا لا يمكن استدعاؤه إلا على جانب الخادم.

راجع هذا المثال لمزيد من المعلومات حول استخدام هذا في بيئة مستقلة الخلفية خارج Next.js.

يمكن أن تشمل حجة الخيارات:

Req

Object - كائن طلب IncomingMessage / next.js

كائن طلب سيتم استخدام قيمة رأس cookie للتحقق من المستخدم. إما قيمة req أو authCookieValue مطلوبة.

includeoken

Boolean

ما إذا كان يجب على المستخدم الذي تم إرجاعه تضمين رمز معرف Firebase. الافتراضات إلى صواب. عندما يكون هذا صحيحًا ، يتبع السلوك خيار withUserTokenSSR ؛ عندما يكون خطأ ، يتبع ذلك من withUserSSR . اقرأ المزيد عن التمييز في المستندات لـ WithUsssr.

AuthCoOkievalue

String

كبديل لتوفير كائن req ، يمكنك توفير قيمة ملفات تعريف الارتباط مباشرة للاستخدام. على سبيل المثال ، إذا تم تسمية ملف تعريف الارتباط الخاص بك MyAuth ، فستوفر قيمة ملف تعريف الارتباط MyAuth.AuthUser (إذا كان includeToken Of False) أو MyAuth.AuthUserTokens (إذا كان includeToken صحيحًا).

إما قيمة req أو authCookieValue مطلوبة.

AuthCoOkiESIGValue

String

قيمة توقيع ملف تعريف الارتباط Auth ، إذا كانت تستخدم ملفات تعريف الارتباط الموقعة. على سبيل المثال ، إذا تم تسمية ملف تعريف الارتباط الخاص بك MyAuth ، فستوفر قيمة ملف تعريف الارتباط MyAuth.AuthUser.sig (إذا كان includeToken خطأ) أو MyAuth.AuthUserTokens.sig (إذا كان includeToken صحيحًا).

`AuthAction`

كائن يحدد خيارات التقديم/إعادة توجيه مع withUser و withUserTokenSSR . انظر Authaction.

تكوين

انظر مثال على التكوين هنا. قدم التكوين عند الاتصال init .

Authpageurl

String|Function|Object - A pageurl

عنوان URL الافتراضي للتنقل إليه عندما يحتاج withUser أو withUserTokenSSR إلى إعادة توجيه تسجيل الدخول. اختياري ما لم يكن باستخدام AuthAction.REDIRECT_TO_LOGIN إجراء AUTH.

AppPageurl

String|Function|Object - A pageurl

عنوان URL الافتراضي للتنقل إليه عندما يحتاج withUser أو withUserTokenSSR إلى إعادة توجيه التطبيق. اختياري ما لم يكن استخدام AuthAction.REDIRECT_TO_APP Auth إجراء.

loginapiendpoint

String

ستتصل نقطة نهاية API هذه الوحدة عندما تتغير حالة Auth لمستخدم Firebase المصادق عليه.

logoutapiendpoint

String

ستتصل نقطة نهاية API هذه الوحدة عندما تتغير حالة Auth لمستخدم Firebase غير مصادق.

onloginrequesterror

Function (اختياري)

معالج يسمى إذا كانت نقطة نهاية API لتسجيل الدخول إرجاع استجابة غير 200. إذا لم يتم تعريف المعالج ، فسترم هذه المكتبة أي ردود غير 200.

غير مستخدم أو مسموح به إذا تم تعيين tokenChangedHandler مخصص.

onlogoutrequesterror

Function (اختياري)

معالج يسمى إذا كانت نقطة نهاية واجهة برمجة تطبيقات LogOut تُرجع استجابة غير 200. إذا لم يتم تعريف المعالج ، فسترم هذه المكتبة أي ردود غير 200.

غير مستخدم أو مسموح به إذا تم تعيين tokenChangedHandler مخصص.

TokenchangedHandler

Function

رد الاتصال الذي يتم تشغيله عندما تتغير حالة المصادقة لمستخدم معين. استخدم هذا إذا كنت ترغب في تخصيص كيفية استدعاء التطبيق من جانب العميل الخاص بك إلى نقاط نهاية تسجيل الدخول/LogOut API (على سبيل المثال ، لاستخدام مشكلات مخصصة أو إضافة رؤوس مخصصة). يتلقى tokenChangedHandler User كوسيطة ويتم استدعاؤه عندما يتغير رمز معرف المستخدم ، على غرار حدث onIdTokenChanged من FireBase.

إذا تم تحديد رد الاتصال هذا ، فإن المستخدم مسؤول عن:

استدعاء نقاط نهاية تسجيل الدخول/تسجيل الدخول الخاصة بهم اعتمادًا على حالة مصادقة المستخدم.
تمرير رمز معرف المستخدم في رأس التفويض
التأكد من أنه يسمح للطلب بتعيين ملفات تعريف الارتباط.

انظر المعالج الافتراضي للتوجيه.

firebaseauthemulatorhost

String

المضيف والميناء لمحاكي Auth Firebase المحلي. إذا تم تعيين هذه القيمة ، فسيتم تهيئة محاكي Auth مع المضيف والمنفذ المقدم.

يجب أن تتطابق مع قيمة FIREBASE_AUTH_EMULATOR_HOST البيئة المتغير ، على سبيل المثال ، localhost:9099 .

firebaseadmininitconfig

Object

تم تمرير التكوين إلى firebase-admin 's initializeApp . يجب أن تحتوي على خاصية credential (كائن عادي) وخاصية databaseURL . مطلوب ما لم تقم بتهيئة firebase-admin بنفسك قبل تهيئة next-firebase-auth .

firebaseAdminInitConfig.credential.privateKey لا يمكن تعريفه على جانب العميل ويجب أن يعيش في متغير بيئة سري.

باستخدام Vercel؟ انظر إضافة مفتاح خاص إلى Vercel للحصول على التوجيه.

usefirebaseadmindefaultcredential

Boolean

عندما يكون صحيحًا ، ستجد firebase-admin ضمنيًا حساب خدمة بيئة الاستضافة خلال initializeApp . ينطبق هذا على كل من Firebase ، و Google Cloud Platform ، ويوصى به على إضافة مفتاح حساب الخدمة إلى الرمز عبر مسار الملف أو القيمة المباشرة.

ملاحظة : لإعداد firebase-admin ، يجب توفير firebaseAdminInitConfig أو useFirebaseAdminDefaultCredential . سيؤدي استخدام بيانات الاعتماد الافتراضية إلى تجاوز القيم التي تم تمريرها إلى firebaseAdminInitConfig.credential إذا تم تقديم كلاهما.

FirebaseclientInitConfig

Object

تكوين مطابقة Firebase JS SDK's initializeApp . إن قيمة firebaseClientInitConfig.apiKey مطلوبة دائمًا . نوصي تهيئة عميل Firebase SDK بنفسك قبل تهيئة next-firebase-auth ؛ ومع ذلك ، سيحاول next-firebase-auth تهيئة Firebase إذا لم يكن تطبيق 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 إلى مُنشئ KeyGrip كما هو موضح في حزمة cookies . مطلوب ما لم يتم signed على false .
جميع خيارات cookies.set .

لا يمكن تعريف قيمة keys على جانب العميل ويجب أن تعيش في متغير بيئة سري.

للأمان ، يجب أن تكون قيمة maxAge أسبوعين أو أقل. لاحظ أنه يتم تعريف maxAge بالمللي ثانية.

ملاحظة: سيتم تمديد انتهاء صلاحية ملفات تعريف الارتباط تلقائيًا عندما يقوم المستخدم بتحميل قاعدة Firebase JS SDK.
يعد Firebase JS SDK مصدرًا للحقيقة للمصادقة ، لذلك إذا انتهت صلاحية ملفات تعريف الارتباط ولكن لا يزال المستخدم مصادفًا مع Firebase ، فسيتم تعيين ملفات تعريف الارتباط تلقائيًا مرة أخرى عندما يقوم المستخدم بتحميل Firebase JS SDK - ولكن لن يتم تأليف المستخدم أثناء SSR بناءً على هذا الطلب الأول.

onverifytokenerror

Function (اختياري)

معالج الخطأ الذي سيتم استدعاؤه إذا كان هناك خطأ غير متوقع أثناء التحقق من جانب خادم معرف المستخدم. سوف تتلقى خطأ مصادقة Firebase.

لن ترمي هذه المكتبة عندما لا يمكن التحقق من رمز الهوية. بدلاً من ذلك ، سيوفر مستخدمًا غير مصدق على التطبيق. عادةً ما يتعامل مع الأخطاء المتعلقة بالتواطؤ الشائعة مثل auth/id-token-expired و auth/user-disabled دون رمي. انظر #366 و #174 للحصول على خلفية إضافية.

OntokenRefresherror

Function (اختياري)

معالج الخطأ الذي سيتم استدعاؤه إذا كان هناك خطأ غير متوقع أثناء تحديث جانب خادم معرف المستخدم.

لن ترمي هذه المكتبة عندما لا يمكن تحديث رمز الهوية. بدلاً من ذلك ، سيوفر مستخدمًا غير مصدق على التطبيق. انظر #366 و #174 للحصول على خلفية إضافية.

الأنواع

Authaction

يحدد الإجراءات التي يجب اتخاذها اعتمادًا على حالة مصادقة المستخدم ، باستخدام الثوابت التالية:

AuthAction.RENDER : جعل مكون الطفل

AuthAction.SHOW_LOADER : عرض مكون محمل

AuthAction.RETURN_NULL : إرجاع فارغ بدلاً من أي مكون

AuthAction.REDIRECT_TO_LOGIN : إعادة توجيه إلى صفحة تسجيل الدخول

AuthAction.REDIRECT_TO_APP : إعادة توجيه إلى التطبيق

مستخدم

يتم استخدام كائن المستخدم عبر سياقات من جانب الخادم ودور العميل. هذا هو تمثيل طبيعي لمستخدم Firebase.

معرف - String|null

معرف مستخدم Firebase ، أو 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

عنوان URL لصور مستخدم Firebase ، أو NULL إذا لم يكن لدى المستخدم عنوان URL للصور.

مطالبات - Object

أضيفت في v0.13.0

أي مطالبات مخصصة Firebase.

GetIdToken - Function => Promise<String|null>

وظيفة ASYNC التي تحل إلى سلسلة رمز معرف FireBase ، أو NULL إذا لم يكن هناك رمز مميز صالح.

ClientInitialized - Boolean

ما إذا كانت Firebase JS SDK قد تهيئة. إذا كان true ، لم نعد نستخدم أي معلومات مستخدم من الدعائم من جانب الخادم.

Firebaseuser - FirebaseUser |null

المستخدم من Firebase JS SDK ، إذا تم تهيئته. خلاف ذلك ، فارغة.

التوقيع - Function => Promise<void>

طريقة تدعو signOut FireBase إذا تم تهيئة Firebase JS SDK. إذا لم تتم تهيئة SDK ، فإن هذه الطريقة هي عدم وجود OP.

pageurl

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 } وتُرجع سلسلة أو إعادة توجيه:

 const redirect = ( { ctx , user } ) => {
  // any custom logic here
  return `/my-url/here/?username= ${ user . displayName } `
}

ctx هي قيمة سياق NEXT.JS إذا كان جانب الخادم ، أو غير محدد إذا كان جانب العميل.

أمثلة

انظر أمثلة.

استكشاف الأخطاء وإصلاحها

عالق؟ ابحث عن مناقشات أو افتح مناقشة أسئلة وأجوبة تصف ما جربته بالفعل.

شيء لا يعمل.

فيما يلي بعض الخطوات الأولية التي يمكنك اتخاذها لتصحيح مشاكل:

حدد onVerifyTokenError و onTokenRefreshError في التكوين الخاص بك والتحقق من أي سجلات خطأ.
تعيين debug: true في التكوين الخاص بك وقراءة من خلال سجلات تصحيح من جانب الخادم وسجلات الأخطاء من جانب العميل لأي رسائل مفيدة.
جرب تطبيق المثال مع بيانات اعتماد Firebase الخاصة بك.
اقرأ من خلال نصائح أخرى استكشاف الأخطاء وإصلاحها أدناه!

أحصل على الخطأ "[بعض الإعدادات] يجب ألا يكون متاحًا على جانب العميل."

نتوقع أن تكون بعض قيم التكوين الحساسة عبارة عن تعشق على جانب العميل (انظر رمز التحقق من صحة التكوين). هذا احتياطي للتأكد من أن المطورين لا يقومون بتجميع شيء مثل مفتاح Firebase الخاص مع العميل JS.

لإصلاح ذلك ، تأكد من أن إعداد التكوين undefined على جانب العميل عن طريق تسجيله إلى وحدة التحكم في المتصفح. يمكنك استخدام دعم .env التالي لتعيين متغيرات الخادم فقط. لا تستخدم أبدًا بادئة NEXT_PUBLIC* لأي قيم سرية.

أحصل على خطأ "invalid_custom_token" عند محاولة الحصول على رمز تحديث.

ستتصل هذه الحزمة بنقطة نهاية Google عندما تحتاج إلى تحديث جانب خادم رمزي. أنت ترى خطأ من هذا الطلب.

لإصلاح ذلك ، تأكد من أن firebaseAdminInitConfig.credential.clientEmail صحيح. يجب أن يكون البريد الإلكتروني المقترن بمفتاح Firebase الخاص.

إذا لم يساعد ذلك ، فحاول فحص الرمز المخصص للتحقق من صحة القيم والهيكل يدويًا. يواجه بعض الأشخاص هذه المشكلة عندما يكون وقت الخادم غير صحيح.

مصادقة من جانب الخادم لا يعمل. يكون المستخدم والرمز المميز دائمًا فارغًا عند استخدام `withUserTokenSSR` ، لكن Auth من جانب العميل يعمل.

إذا كانت AUTH تعمل على جانب العميل ولكن ليس على جانب الخادم ، فمن المرجح أن يتم تعيين ملفات تعريف الارتباط المصادقة.

لإصلاح ذلك ، تأكد من تعيين ملفات تعريف الارتباط Auth في أدوات Dev الخاصة بالمتصفح. إذا لم يتم تعيينها ، فيرجى التحقق من أن خيارات secure sameSite path التي تم تمريرها في تكوين next-firebase-auth أمر منطقي لبيئتك. على سبيل المثال ، إذا كنت تختبر على غير HTTPS LocalHost ، فتأكد من أن secure خاطئة.

بالإضافة إلى ذلك ، يرجى التحقق من سجلات الخادم الخاصة بك لأي أخطاء لضمان تهيئة تطبيق مسؤول FireBase بشكل صحيح.

أحصل على "Auth/Piscument-Beror" مع رسالة "Firebase ID المميز لها" توقيع غير صالح ".

في كثير من الأحيان ، يحدث هذا بسبب بريد إلكتروني غير صحيح في بيانات اعتماد Firebase. يرجى التحقق من أن البريد الإلكتروني صحي

يمكنك محاولة إعداد بيانات الاعتماد الخاصة بك في تطبيق المثال للتأكد من أن رمز التطبيق الخاص بك ليس مشكلة.

في التطوير المحلي ، حاول مسح البيانات/ملفات تعريف الارتباط لـ localhost في حالة تسجيل الدخول مسبقًا مع حساب Firebase آخر ولا يزال لديك ملفات تعريف الارتباط مصادقة موقعة بواسطة مفتاح خاص آخر.

يمكنك أيضًا محاولة تعطيل محاكي مصادقة Firebase. قم بإزالة firebaseAuthEmulatorHost من التكوين الخاص بك وإزالة FIREBASE_AUTH_EMULATOR_HOST من ملف .env الخاص بك.

أحصل على الخطأ ، "فشل في تحليل المفتاح الخاص: خطأ: رسالة تنسيق غير صالحة PEM."

انظر إضافة مفتاح خاص إلى Vercel وهذه المناقشة حول تنسيق المفاتيح الخاصة.

القيود والتعليقات

نتوقع أن تحتاج بعض التطبيقات إلى بعض الميزات غير المتوفرة حاليًا:

دعم منطق الجلسة المخصص: حاليًا ، لا تسمح هذه الحزمة باستخدام ملف تعريف ارتباط مخصص أو وحدة جلسة. قد يحتاج بعض المطورين إلى هذه المرونة ، على سبيل المثال ، الحفاظ على بيانات المستخدم في تخزين جلسة من جانب الخادم.
تعيين ملف تعريف ارتباط مصادف واحد: تقوم هذه الحزمة حاليًا بتعيين أكثر من ملف تعريف ارتباط لتخزين حالة المصادقة. لا يمكن حاليًا استخدام ملف تعريف ارتباط واحد باسم مخصص: #190

نود أن نسمع ملاحظاتك حول هذه الميزات أو غيرها. لا تتردد في فتح مناقشة!

المساهمة

نرحب بالمساهمات! يرجى الاطلاع على المستندات المساهمة للبدء.

يوسع

next firebase auth

FireBase-Auth

العرض التوضيحي • البدائل • البدء • API • التكوين • الأنواع • الترحيل إلى V1 • أمثلة • استكشاف الأخطاء وإصلاحها • المساهمة

ماذا تفعل

؟ دعم لجميع استراتيجيات تقديم jex.js

ملفات تعريف الارتباط الموقعة ، الآمنة ، HTTP فقط بشكل افتراضي

؟ وصول من جانب الخادم إلى رمز معرف Firebase الخاص بالمستخدم

؟ إدارة ملفات تعريف الارتباط المدمجة

↩ دعم مدمج لإعادة التوجيه بناءً على حالة مصادقة المستخدم

العرض التوضيحي

عندما (لا) لاستخدام هذه الحزمة

ابدأ

مثال على التكوين:

API

init(config)

withUser({ ...options })(PageComponent)

withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {})

withUserSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {})

useUser()

setAuthCookies(req, res)

unsetAuthCookies(req, res)

verifyIdToken(token) => Promise<User>

getUserFromCookies({ ...options })

Req

includeoken

AuthCoOkievalue

AuthCoOkiESIGValue

AuthAction

تكوين

Authpageurl

AppPageurl

loginapiendpoint

logoutapiendpoint

onloginrequesterror

onlogoutrequesterror

TokenchangedHandler

firebaseauthemulatorhost

firebaseadmininitconfig

usefirebaseadmindefaultcredential

FirebaseclientInitConfig

ملفات تعريف الارتباط

onverifytokenerror

OntokenRefresherror

الأنواع

Authaction

مستخدم

pageurl

أمثلة

استكشاف الأخطاء وإصلاحها

شيء لا يعمل.

أحصل على الخطأ "[بعض الإعدادات] يجب ألا يكون متاحًا على جانب العميل."

أحصل على خطأ "invalid_custom_token" عند محاولة الحصول على رمز تحديث.

مصادقة من جانب الخادم لا يعمل. يكون المستخدم والرمز المميز دائمًا فارغًا عند استخدام withUserTokenSSR ، لكن Auth من جانب العميل يعمل.

أحصل على "Auth/Piscument-Beror" مع رسالة "Firebase ID المميز لها" توقيع غير صالح ".

أحصل على الخطأ ، "فشل في تحليل المفتاح الخاص: خطأ: رسالة تنسيق غير صالحة PEM."

القيود والتعليقات

المساهمة

`init(config)`

`withUser({ ...options })(PageComponent)`

`withUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {})`

`withUserSSR({ ...options })(getServerSidePropsFunc = ({ user }) => {})`

`useUser()`

`setAuthCookies(req, res)`

`unsetAuthCookies(req, res)`

`verifyIdToken(token) => Promise<User>`

`getUserFromCookies({ ...options })`

`AuthAction`

مصادقة من جانب الخادم لا يعمل. يكون المستخدم والرمز المميز دائمًا فارغًا عند استخدام `withUserTokenSSR` ، لكن Auth من جانب العميل يعمل.