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

基本的には、APIもAmplifyで管理して、APIクラスを使ったAPI呼び出しを行います。 同じCognito User Poolsを使う、Amplifyで管理されていないAPIを呼び出すケースでは、Authoriza […]

広告ここから
広告ここまで

目次

    基本的には、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)
          })

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark