AWS Amplifyで、ログインユーザーのJWTをfetchのHeaderで渡す方法

基本的には、APIもAmplifyで管理して、APIクラスを使ったAPI呼び出しを行います。

API.get('MyApiName', '/path')

同じCognito User Poolsを使う、Amplifyで管理されていないAPIを呼び出すケースでは、Authorizationヘッダーを自前で追加します。

  const session = await Auth.currentSession()
  const token = session.getAccessToken().getJwtToken()
  if (!init.headers) init.headers = {}
  const result = await fetch('/api', {
    method: 'get',
    headers: {
      Authorization: token,
    },
  })

便利関数にする

都度コードを書くのは手間なので、関数にしましょう。

import { Auth } from 'aws-amplify'

export const callAPIWithAuth = async (
  input: RequestInfo,
  init: RequestInit = {},
): Promise<Response> => {
  const session = await Auth.currentSession()
  const token = session.getAccessToken().getJwtToken()
  if (!init.headers) init.headers = {}
  const result = await fetch(input, {
    ...init,
    headers: {
      ...init.headers,
      Authorization: token,
    },
  })
  return result
}

fetchのように使えばOKです。

    callAPIWithAuth('/api/bookmarks', {
      method: 'GET',
    })
      .then((data) => data.json())
      .then(async (bookmarks) => {
        console.log(bookmarks)
      })
      .catch((e) => {
        console.log(e)
      })