Upgrade @nuxtjs/supabase from 0.3.x to 1.0.x: 500 error > invalid claim: missing sub claim

[mendrinos]

Version

@nuxtjs/supabase: 1.0.2 nuxt: 3.6.5

Steps to reproduce

Use Nuxt 3.6.5 with @nuxtjs/supabase: 0.3.7 Then upgrade to @nuxtjs/supabase: 1.0.2 Follow the breaking changes and update your code as per the guidance: https://supabase.nuxtjs.org/changelog

What is Expected?

To see authentication functioning without any defects, as I followed the upgrade steps, especially the ones with the "breaking changes" across my codebase.

What is actually happening?

Getting error 500 across all routes invalid claim: missing sub claim

at createError (./node_modules/h3/dist/index.mjs:127:15) at serverSupabaseUser (./.nuxt/dev/index.mjs:776:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.handler (./.nuxt/dev/index.mjs:783:16) at async Object.handler (./node_modules/h3/dist/index.mjs:1284:19) at async toNodeHandle (./node_modules/h3/dist/index.mjs:1359:7) at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17) at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:665:30) at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1366:9)

Under Auth Logs from supabase admin I see 5 times this log:

Event Message {"component":"api","error":"401: invalid claim: missing sub claim","level":"info","method":"GET","msg":"401: invalid claim: missing sub claim","path":"/user","referer":"","remote_addr":"x.x.x.x","time":"2023-08-07T11:45:29Z","timestamp":"2023-08-07T11:45:29Z"}

I am suspecting it has to do with the switch to the new default authentication method of PCKE.

[bbaltatu]

I have same issue here but I cannot reproduce it yet. On local the code works but when I deploy the code as a docker image in production and I use the supabase URL and KEY the image is failing with same issue.

[bbaltatu]

I succeed to reproduce by using supabase KEY and URL and only inside a docker file

` FROM node:18.17-bullseye as build-stage

WORKDIR /app

COPY package*.json ./

COPY ./apps/ro-idei/package.json ./apps/ro-idei/ COPY ./packages//package*.json ./packages/

COPY ./packages/ ./packages/

COPY ./apps/ro-idei ./apps/ro-idei

RUN npm install WORKDIR /app/apps/ro-idei RUN npm run build

FROM node:18-alpine as production-stage

WORKDIR /app

COPY --from=build-stage /app/apps/ro-idei/.output .

EXPOSE 3000 CMD [ "node", "server/index.mjs" ] `

[bbaltatu]

Still digging to issue.... Any answer?

[bbaltatu]

I suppose I know the cause https://github.com/supabase/supabase-js/issues/702

serverSupabaseUser returns that error because the user is not logged in and the token is invalid.
I am looking for a solution. I will come back if I will found one.

[CptJJ]

Had this issue, fixed by doing this on all my server routes that use the serverSupabaseUser:

var user = null
  try {
    user = await serverSupabaseUser(event)
  } catch (err) {

  }

[mendrinos]

Thank you @CptJJ, the above made it a non-blocking issue on my end for the time being. Console errors are still being generated.

[mendrinos]

@larbish any update? seems the magic link authentication cannot function at all.

[larbish]

If this is related to the PKCE flow, did you try to use old auth method ?

[mendrinos]

Thanks @larbish ,

I switched to 'implicit' flow and it worked just fine.

clientOptions: { auth: { flowType: 'implicit', detectSessionInUrl: true, persistSession: true, autoRefreshToken: true }, }

[peterkimzz]

I don't think getting the invalid claim error after calling signOut method is normal behaviour. (including it throws 500 code)

I can skip the error in server side like below,

export const getSupabaseUser = async (event: H3Event) => {
  const client = await serverSupabaseClient(event);
  const {
    data: { user },
    error,
  } = await client.auth.getUser();

  if (error) {
    console.log("getSupabaseUser error", error);
  }

  return { supabaseUser: user };
};

[CosAnca]

I'm facing the same issue and switching to implicit flow doesn't work either in my case. The solution provided by @peterkimzz seems to prevent the application to throw 500 and on logout the user is correctly redirected to the /login page but the error is still fired on the server and having other links on the /login page (for example a NuxtLink to a /register page) makes them unusable.

[ammuench]

Just opened https://github.com/nuxt-modules/supabase/pull/272 to hopefully address this issue.

Currently the useSupabaseUser composable is a synchronous method with a promise within--changing it to be a proper async method resolved the invalid claim: missing sub claim when making calls to my backend that had a serverSupabaseUser call after login

[chiuwah]

I am on v1.1.2 and also getting error 500 (invalid claim: missing sub claim) when using serverSupabaseUser() without the user logged in on server api route. Any solutions available?

[kylegl]

I made a reproduction of where im getting this error. I use the serverSupabaseUser on the backend in my trpc context file. /server/trpc/context.ts. Is this related to #272?

nuxt-trpc-prisma-supabase-repro

@larbish

[larbish]

Can someone provide a simple reproduction? I'm not able to reproduce.

[kylegl]

@larbish was my repro not working for you?

[larbish]

Sorry, missed it! I'll have a check this week.

[andreasvirkus]

@larbish have you had the time to check it out?

[larbish]

Should be fixed in version 1.1.5. Could someone confirm ?