The module doesn't recognize supabase.clientOptions.auth.flowType key

[aideremir]

Version

@nuxtjs/supabase: 1.4.2
nuxt: 3.14.159

Steps to reproduce

nuxt.config.ts

 supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_ANON_KEY,
    cookieName: 'mycookiename',
    redirect: false,
    clientOptions: {
      auth: {
        flowType: 'implicit',
      },
    },
  },

What is Expected?

The application should use the supabase auth implicit flowType

What is actually happening?

The application uses the supabase auth PKCE flowType

can be checked by outputting
useNuxtApp().$supabase

[th1m0]

It seems like the @supabase/ssr module always overwrites to use pkce see: createBrowserClient(client side) and createServerClient(SSR)

[aideremir]

It seems like the @supabase/ssr module always overwrites to use pkce see: createBrowserClient(client side) and createServerClient(SSR)

@th1m0 thanks for pointing out. Are there any ideas about the purpose of overwriting?

[jlemonz]

I also had problems with this. I think the docs of supabase nuxt should be updated. And give examples that work. I now use the other flow but lot of trial and error.

[Shooteger]

I also had problems with this. I think the docs of supabase nuxt should be updated. And give examples that work. I now use the other flow but lot of trial and error.

Hello, could you maybe share some resources/docs or code, how you got it running with the implicit flow? Thanks in advance. I am currently stuck with the issue for some time now.

[jlemonz]

I also had problems with this. I think the docs of supabase nuxt should be updated. And give examples that work. I now use the other flow but lot of trial and error.

Hello, could you maybe share some resources/docs or code, how you got it running with the implicit flow? Thanks in advance. I am currently stuck with the issue for some time now.

You cant use implicit flow. What i do i generate a magiclink and use your own domain. Do not use supabase url because this will be flagged by outlook as spam. Is another issue posted somewhere about this. So generate the link and from the body get the tokenhash. Then generate your own email with service like mailersend. And set the to url with the tokenhash with a middleware that will verify the otp. Hope this helps. Here is also a blog with more info. Feel free to ask more help. https://catjam.fi/articles/supabase-generatelink-fix

[Shooteger]

Okay, if anyone encounters the same issue. I solved it currently by creating a second supabase instance with the "supabase-js" package and initialize a new client in a plugin. Be careful, it's very important you set a specific storageKey!

Here an example:

const costumeSupabase = createClient(config.public.SUPABASE_URL, config.public.SUPABASE_KEY, {
        auth: {
            flowType: 'implicit',
            storageKey: 'change_password_via_link', // Custom storage key
        },
});

With this I was able to create a supabase instance which uses the implicit flow. I used this instance then in my password reset component:

const { $costumeSupabase } = useNuxtApp();

Now I could finally verify my OTP code from the supabase link in different browsers / sessions:

const { error: verifyError } = await $costumeSupabase.auth.verifyOtp({
      email,
      token,
      type: 'recovery'
});

Then update the user password:

const { error: updateError } = await $costumeSupabase.auth.updateUser({
      password: state.newPassword
});

To keep it clean, after a successful password reset, I removed the local storage with the "change_password_via_link" key.