2

I've got a NextJS app where I am implementing Supabase for authentication, and attempting to strip out Apollo with Urql instead.

In my urql.ts file, I am creating the client as such:

import { createClient, ssrExchange, dedupExchange, fetchExchange } from 'urql';
import { cacheExchange } from '@urql/exchange-graphcache';
import { devtoolsExchange } from '@urql/devtools';

const isServerSide = typeof window === 'undefined';
const ssrCache = ssrExchange({
  isClient: !isServerSide,
  initialState: !isServerSide ? window.__URQL_DATA__ : undefined,
});

const client = createClient({
  url: '/api/graphql',
  exchanges: [
    devtoolsExchange,
    dedupExchange,
    cacheExchange({}),
    ssrCache,
    fetchExchange,
  ],
  fetchOptions: () => {
    return {
      credentials: 'include',
      headers: { Authorization: `Bearer ${token}` }, // how to return token?
    };
  },
});

export { client, ssrCache };

I am trying to figure out how to actually return the token? Because context isn't passed, I am unable to pull it from there. Supabase sets the token as HttpOnly, so I believe that is also preventing me from accessing it here. Using a library such as Js-Cookie returns undefined.

Is there a way to pass context to fetchOptions, or should I try and figure out how to remove HttpOnly when the cookie is being set?

J. Jackson
  • 3,326
  • 8
  • 34
  • 74
  • Supabase has `onAuthStateChange` ([docs](https://supabase.io/docs/reference/javascript/auth-onauthstatechange)) that you could use to listen to the state change. This should include the refetch token and the http token. Maybe this helps? – Herku Sep 03 '21 at 12:20
  • @Herku I do already have that method defined in my app. I wonder if on login, there's a way to manually set that option in the Urql client? – J. Jackson Sep 03 '21 at 14:00
  • I'm honestly not seeing anything in the Urql docs that mention the ability to set a cookie after the fact... – J. Jackson Sep 03 '21 at 14:15
  • URQL has a great [auth exchange](https://github.com/FormidableLabs/urql/tree/main/exchanges/auth#urqlexchange-auth) and you can always store the value in a variable in scope or in local/session storage (not recommended). – Herku Sep 05 '21 at 10:40

0 Answers0