supabase.auth.getUser() works in page.tsx server rendering but not in the API

[elbarbi]

Hi everyone,

I am using Supabase whith prisma. I updated my Prisma model and discovered that mirgation would destroy the supabase auth tables. I decided to remove the multischema system from prisma.

Since I did this, I have an error on my route API getUser calls. I don't know if it is linked to the previous changes, but before I work on the Prisma model, it used to work.

I used 'npx supabase reset" and npx prisma db push. Those commands re-created my db with the changes. I created a new account, but now I have an authentication issue.

My cookies are in my browser and in the supabase auth table.

This is the thrown exception:

AuthSessionMissingError: Auth session missing!
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@supabase+auth-js@2.65.0/node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:888:59)
    at SupabaseAuthClient._useSession (webpack-internal:///(rsc)/./node_modules/.pnpm/@supabase+auth-js@2.65.0/node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:790:26)
    at async SupabaseAuthClient._getUser (webpack-internal:///(rsc)/./node_modules/.pnpm/@supabase+auth-js@2.65.0/node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:880:20)
    at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@supabase+auth-js@2.65.0/node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:867:20)
    at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@supabase+auth-js@2.65.0/node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:735:28) {
  __isAuthError: true,
  status: 400,
  code: undefined
}

I read others getUser issues, but I think none of them happened in a such context and a such strange.

This is the "app/account/page.tsx" where the getUser Works. it is server rendered.

Works well, getUser() returns the connected user.

const Account = async () => {
  const supabase = createAndConfigureServerClient();

  const { data, error } = await supabase.auth.getUser();

  if (error || !data?.user) {
    redirect('/signin');
  }

  return <p>Hello {data.user.email}</p>

}
export default Account;

Not working: This is the API route, where the getUser returns the previous exception.
"src/app/api/tests"

export async function GET(request: Request, {params}: any) {
    try {
        const supabase = createAndConfigureServerClient()
        const result = await supabase.auth.getUser();
        const user = result.data.user;
        
        if (!user) {
            return Response.json({error: "You need to be logged to access to the resource"}, {status: 403});
        }

        // Service call
        return NextResponse.json(classrooms);
    } catch (error) {
        return Response.json({error: error}, {status: 500});
    }
}

It seems that it doesn't work either on this function that is called before the initialization of a tsx page:

import { redirect } from "next/navigation";

import { ComponentType } from "react";
import React from "react";
import {createAndConfigureServerClient} from "@/utils/supabase/server";

export function ensureUserSignedIn<P extends {}>(Component: ComponentType<P>) {
  return async function AuthenticatedComponent(props: P): Promise<JSX.Element> {
    const supabase = createAndConfigureServerClient();
    const { data, error } = await supabase.auth.getUser();

    if (error || !data?.user) {
      redirect('/signin');
    }

    return React.createElement(Component, props);
  }

getUser doesn't work so the app is redirected to signin, which is skipped because the suer is already logged.

This is the function used to create supabase client:

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";

export function createAndConfigureServerClient() {
  const cookieStore = cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options });
          } catch (error) {
            // The `set` method was called from a Server Component.
            // Ignore error (handled by middleware)
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: "", ...options });
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // Ignore error (handled by middleware)
          }
        },
      },
    }
  );
}

This is the package version:

    "@supabase/ssr": "^0.3.0",

[AhamSammich]

I've recently been having similar issues with that error. I found this discussion rather helpful.

https://github.com/orgs/supabase/discussions/26791#discussioncomment-10086843

On updating the supabase packages, I haven't had a problem.

{
  "@supabase/ssr": "^0.4.1",
  "@supabase/supabase-js": "^2.45.4"
}

[elbarbi]

I updated my ssr version, but it didn't fix the problem.

[elbarbi]

As I am using server side rendering, I will not use the API. The getUser() is working in pages. This is a bypass solution, I am still interested by a fix.

[AhamSammich]

Middleware should be setup to update the session between routes.

https://supabase.com/docs/guides/auth/server-side/nextjs

This should cover API routes too as long as you configure the matcher to allow that.

For our API routes, we require the tokens to be passed in the headers to set the session in the route handler using supabase.auth.setSession().