urql + auth-exchange + aws-amplify

client.js

import { makeOperation } from '@urql/svelte'
import { authExchange } from '@urql/exchange-auth'
import { Auth } from 'aws-amplify'
import produce from 'immer'
import { set } from 'lodash'

const amplifyAuthExchange = authExchange({
  addAuthToOperation: ({ authState, operation }) => {
    if (!authState?.token) {
      return operation
    }
    const newContext = produce(operation.context, context => {
      set(context, 'fetchOptions.headers.Authorization', authState.token)
    })
    return makeOperation(operation.kind, operation, newContext)
  },
  willAuthError: ({ authState }) => {
    try {
      const [,payload] = authState.token.split('.')
      const { exp } = JSON.parse(Buffer.from(payload, 'base64'))
      return exp * 1000 < Date.now()
    } catch(e) {
      return true
    }
  },
  didAuthError: ({ error }) =>
    error.graphQLErrors.some(e => e.message === 'Unauthorized'),
  getAuth: async () => {
    const session = await Auth.currentSession()
    if (session) {
      // defines the authState elsewhere
      return {
        token: session.getAccessToken().getJwtToken(),
      }
    }
    Auth.signOut()
    return null
  },
})

Thanks, this was helpful. I had to make some tweaks to the getAuth function to get it to work for me though. Just calling await Auth.currentSession() would result in an error when the app loaded because the user isn't signed in yet. The specific error message I was getting was Possible Unhandled Promise Rejection (id: 0): "No current user". And for some reason I would continue to get this error even after I signed in. However, the error would disappear if I reloaded the app because I guess now I had an active session saved in storage.

I had to make these changes to the getAuth function to get it to work:

getAuth: async ({ authState }) => {
  if (!authState) {
    let session;
    try {
      session = await Auth.currentSession();
    } catch {
      // The promise will be rejected if the user isn't signed in yet
      return null;
    }
    if (session) {
      return {
        token: session.getIdToken().getJwtToken(),
      };
    }
    return null;
  }
  Auth.signOut();
  return null;
};

I don't have a question, but just wanted to post this in case anyone else is trying to use urql with Amplify and is running into the same issue I was having. I also had to add import { Buffer } from "buffer"; for willAuthError.

Nice spotting @ajenkins - I must have missed this due to my setup where I create the client in a component that isn't mounted until after login, glad you found a solution for this!

In the latest version of @urql/exchange-auth, it doesn't getAuth function and I am not able to use Promise inside addAuthToOperation
Do you guys an alternate approach for the latest version @mattfysh @souravjamwal77 ?