钩子示例

Question

我正在尝试在React Native应用程序中获取Firebase身份验证访问令牌，以便可以对自定义服务器进行API调用身份验证。 Firebase文档说我应该使用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(() => {
    function onAuthStateChange(user) {
      if (user) {
        user.getIdToken(true)
        .then(latestToken => setToken(latestToken))
        .catch(err => console.log(err))
      }
    }
    const unsubscribe = auth().onAuthStateChanged(onAuthStateChange)
    return () => {
      unsubscribe()
    }
  }, [])
  return token
}

然后在你的功能组件中像这样使用


const token = useToken()

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

在React Native中从Firebase获取当前用户访问令牌

4 个答案:

钩子示例