在 React Native 中從 Firebase 獲取當前用戶訪問令牌

Question

我正在嘗試在 React Native 應用程序中獲取 Firebase 身份驗證訪問令牌，以便我可以對對自定義服務器的 API 調用進行身份驗證。 Firebase 文檔說我應該使用auth().currentUser.getIdToken();來獲取這個令牌auth().currentUser.getIdToken(); 但是 currentUser 返回null 。

我嘗試在應用程序的多個區域使用getIdToken() 。 我知道訪問令牌是生成的，因為我在使用 expo (user.stsTokenManager.accessToken) 時可以在日志中看到它。

為什么currentUser返回null以及如何獲取accessToken ？

Answer 1

您需要將user.getIdToken()包裝在firebase.auth().onAuthStateChanged以便user可用。 然后，您可以在標頭中使用 jwtToken 來驗證您的 API 調用。 您需要導入 Firebase 配置文件才能使其正常工作。

let jwtToken = firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      user.getIdToken().then(function(idToken) {  // <------ Check this line
          alert(idToken); // It shows the Firebase token now
          return idToken;
      });
    }
  });

Answer 2

getIdToken返回一個承諾

firebase.auth()
        .signInWithCredential(credential)
        .then(async data => {
          const jwtToken = await data.user?.getIdToken();
          console.log(jwtToken);
        })

Answer 3

只需將await放在之前也可以像這樣工作：

await auth().currentUser.getIdToken();

Answer 4

鈎子示例

不幸的是，直接獲取令牌並不可靠。 您首先必須偵聽身份驗證狀態更改事件，該事件在初始化時觸發，因為它是異步的。

import {auth} from '../utils/firebase'
import {useState, useEffect} from 'react'

export default function useToken() {
  const [token, setToken] = useState('')
  useEffect(() => {
    return auth().onAuthStateChanged(user => {
      if (user) {
        user.getIdToken(true)
        .then(latestToken => setToken(latestToken))
        .catch(err => console.log(err))
      }
    })
  }, [])
  return token
}

然后在您的功能組件中像這樣使用

const token = useToken()

useEffect(() => {
  if (token) {
    // go wild
  }
}, [token])