supabase/ssr v0.0.9 setting autoRefreshToken to false breaks package

[robmarshall]

I am using Supabase with Next JS and have the following function:

import { createBrowserClient } from '@supabase/ssr'

const createSupabaseBrowserClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      auth: {
        autoRefreshToken: false,
      },
    }
  )

export default createSupabaseBrowserClient

When I do not include the options object everything works properly.

When I add the autoRefreshToken key I get the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get')

This seems to be an issue with the following object being overwritten: https://github.com/supabase/auth-helpers/blob/main/packages/ssr/src/createBrowserClient.ts#L65

EDIT: Removed typos/comments which confused things.

[j4w8n]

I see one issue with your code. The misspelling of autoRefreshToken - but maybe it's correct in your actual code.

One thing I'm confused about is that you're using createBrowserClient() but in the comment you say this is for server-side rendering. If it's for server-side, then you should be using createServerClient() and also passing in the cookies object.

And if this code is being run on the server-side, then the error makes sense to me. I was able to reproduce it if I removed the cookies object from my createServerClient() code - and the same ssr code it's chocking on is in the createBrowserClient() code as well.

[robmarshall]

@j4w8n Thanks for the reply. I have edited my initial post. Thanks for pointing that out! However the issue still remains.

To clarify. This is only being used on Next using Pages. The code returns the same error client side.

Full error log:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get')
    at eval (index.mjs:106:1)
    at combineChunks (index.mjs:39:1)
    at Object.getItem (index.mjs:105:1)
    at getItemAsync (helpers.js:99:1)
    at SupabaseAuthClient.__loadSession (GoTrueClient.js:737:52)
    at SupabaseAuthClient._useSession (GoTrueClient.js:718:1)
    at SupabaseAuthClient._emitInitialSession (GoTrueClient.js:1127:1)
    at eval (GoTrueClient.js:1121:1)
    at eval (GoTrueClient.js:680:1)
    at SupabaseAuthClient.lockNoOp [as lock] (GoTrueClient.js:27:1)
    at SupabaseAuthClient._acquireLock (GoTrueClient.js:676:1)
    at eval (GoTrueClient.js:1120:1)
    ```

[silentworks]

@robmarshall as @j4w8n stated, you would need to pass the cookies object with the get, set and remove properties in order for this to work. I'm adding this as an improvement we can make to the library so that the cookies object is not required if you are changing any other properties inside of the auth object. But for the immediate now the solution would be to pass the cookies object with its properties again.

[j4w8n]

So are you saying the docs need updated for Client Component on Next.js?

[robmarshall]

Hi @silentworks Ah, I was of the understanding that that was for only server side, not client side.

[robmarshall]

I thought that mergeDeepRight would handle this - maybe not? https://github.com/supabase/auth-helpers/blob/main/packages/ssr/src/createBrowserClient.ts#L142

[j4w8n]

I'm finally catching up to what's happening lol. The options object is optional. However, once you declare the object, cookies is required. Now it makes sense why this is throwing for OP when declaring autoRefreshToken.

[silentworks]

Yes it's a TypeScript issue, mergeDeepRight will handle the merging correctly but TypeScriot will error about the property not being present.

[jmarbutt]

Is there a plan for fixing the optional params or is there a work around? I am looking at trying to pass in headers for my client.

[j4w8n]

The workaround is to pass the cookies option as well.