follmy

FirebaseのSignInWithEmailAndPasswordでaccessTokenを取得する

2020-12-30

コード

import * as firebase from "firebase"

const config = {
  apiKey: "YOUR_API_KEI",
  authDomain: "www.example.com",
  projectId: "YOUR_PROJECT_ID",
}
if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

firebase
  .auth()
  .signInWithEmailAndPassword(email, password)
  .then(response => {
    response.user
      ?.getIdToken()
      .then(token => {
        console.log(token)
      })
      .catch(error => {
        console.log(error)
      })
  })
  .catch(error => {
    console.log(error)
  })

処理の流れ

ログインしてレスポンスを受け取る

下記でログインしてレスポンスを受け取る

firebase
  .auth()
  .signInWithEmailAndPassword(email, password)
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

レスポンスからアクセストークンを取得する

プロパティにアクセストークンが見えるからアクセスできると思いきや、アクセスできなかった。ドキュメントを見ると下記のプロパティとメソッドが記載されていた。

Properties

emailVerified, isAnonymous, metadata, providerData, refreshToken, tenantId

Methods

delete(), getIdToken(forceRefresh), getIdTokenResult(forceRefresh), reload(), toJson()

で Properties の中には accessToken がなかったので、おそらく getIdToken もしくは getIdTokenResult を使わないといけない。それぞれの違いはこう書いてあった。

getIdToken(forceRefresh)

Returns a JSON Web Token (JWT) used to identify the user to a Firebase service.

getIdTokenResult(forceRefresh)

Returns a deserialized JSON Web Token (JWT) used to identitfy the user to a Firebase service.

実際に使ってみると getIdTokenResult は複数の値が返ってきたので、記載の通り JWT を deserialized した値が返ってきてる。今回は deserialized されていないそのままのトークンが欲しいので、getIdToken を使う。

ちなみに、getIdToken の戻り値は Promise。なので、thencatch で処理。

firebase
  .auth()
  .signInWithEmailAndPassword(email, password)
  .then(response => {
    response.user
      ?.getIdToken()
      .then(token => {
        console.log(token)
      })
      .catch(error => {
        console.log(error)
      })
  })
  .catch(error => {
    console.log(error)
  })

という形で取れた。

まとめ

公式ドキュメントもしくは GitHub 見るの大事。

参考

signInWithEmailAndPassword() function

User interface


プロフィール

koyamaaa2です。

プライバシーポリシー