Refresh Token Not Found / 0.4.0-rc.2

[hsab]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Keywords

"Refresh Token Not Found", "cookies", "subdomain", "apex domain", "auth", "cookie Options", "cookieOptions"

Describe the bug

TLDR; If user has logged in, a long time ago, they are prompted to login again (getUser is null). They login, receive the magic link, are correctly redirected after verifyOtp without errors, but the client throws AuthApiError: Invalid Refresh Token: Refresh Token Not Found. Now the user is stuck in a login loop.

I suspect cookieOptions is the cause of the issue since the issue doesn't arise in local development. Only in production.

I am using supabase.auth across 2 domains: app.domain.com and api.domain.com. This is the flow that a user takes:

1. They visit app.domain.com and enter their email. The client makes a call to api.domain.com/login to initiate login
2. api.domain.com/login makes a call to supabase.auth.signInWithOtp with user's email and the following emailRedirectTo app.domain.com/api/auth/confirm
3. The user successfully receives their email with a magic link to app.domain.com/api/auth/confirm !
4. confirm route successfully executes auth.verifyOtp. User is correctly redirected. No errors.
5. Upon redirect console shows AuthApiError: Invalid Refresh Token: Refresh Token Not Found

App --- app.domain.com

This is a Next.js (14.2.3) web app. We do not use server component and everything happens on the client side with the exception of the confirm route.

app/api/auth/confirm/route.ts

/* eslint-disable import/prefer-default-export */
import { type EmailOtpType } from '@supabase/supabase-js';
import { type NextRequest, NextResponse } from 'next/server';

import { AcmeURLConfig } from '@acme/config';

import { createSBServerClient } from '@/utils/supabase/server';

export const GET = async (request: NextRequest) => {
  const { searchParams } = new URL(request.url);
  const tokenHash = searchParams.get('token_hash');
  const type = searchParams.get('type') as EmailOtpType | null;

  // On successful verification, always redirect the user to the app
  const useUrl = AcmeURLConfig('APP');

  const errorRedirect = request.nextUrl.clone().origin;

  if (tokenHash && type) {
    const supabase = createSBServerClient();

    const { error } = await supabase.auth.verifyOtp({
      type,
      token_hash: tokenHash,
    });

    if (error) {
      // User is never returned to the error page. Thus verifyOtp was successful
      return NextResponse.redirect(`${errorRedirect}/login-error`);
    }
  }

  return NextResponse.redirect(useUrl.ENV_URL);
};

@/utils/supabase/server

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

import { AcmeURLConfig, type Database } from '@acme/config';

const useUrl = AcmeURLConfig('APP');

export const createSBServerClient = () => {
  const cookieStore = cookies();

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookieOptions: useUrl.IS_PRODUCTION
        ? {
            domain: '.domain.com',
            sameSite: 'lax',
            secure: true,
          }
        : {},
      cookies: {
        getAll: async () => {
          return cookieStore.getAll();
        },
        setAll: async (
          cookiesToSet: {
            name: string;
            value: string;
            options: CookieOptions;
          }[],
        ) => {
          try {
            cookiesToSet.forEach(({ name, value, options }) => {
              cookieStore.set({ name, value, ...options });
            });
          } catch (error) {
            //
          }
        },
      },
    },
  );
};

useAuthUser

mport { useQuery } from '@tanstack/react-query';

import { createSBBrowserClient } from '@/utils/supabase';

import type { UseQueryResult } from '@tanstack/react-query';
import type { AuthError, Session } from '@supabase/supabase-js';


const useAuthUser: () => UseQueryResult<TVal | null, Error> = () => {
  const user = useQuery<TVal>({
    queryKey: ['session', 'user'],
    queryFn: async () => {
      const supabase = createSBBrowserClient();

      // I've tried both getUser and getSession to no avail
      const locData = await supabase.auth.getSession();

      if (locData.error || !locData.data.session) {
        await supabase.auth.signOut();
      }

      return locData;
    },
    enabled: false,
    staleTime: 0,
  });

  return user;
};

export default useAuthUser;

@/utils/supabase

import { createBrowserClient } from '@supabase/ssr';

import { AcmeURLConfig, type Database } from '@acme/config';

const useUrl = AcmeURLConfig('APP');

export const createSBBrowserClient = () => {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookieOptions: useUrl.IS_PRODUCTION
        ? {
            domain: '.domain.com',
            sameSite: 'lax',
            secure: true,
          }
        : {},
    },
  );
};

API --- api.domain.com

This is also a Next.js (14.2.3) setup, acting as an API gateway leveraging tRPC

api.domain.com/account/login

import { OpenApiMeta } from 'trpc-openapi';
import { z } from 'zod';

import { TRPCError } from '@trpc/server';
import { loggedProcedure, router } from '../../trpcFactory';
import withRateLimited from '../../middlewares/withRateLimited';
import { createSBServerClient } from '../../supabase/server';

const endpoint = 'login';

const meta: OpenApiMeta = {
  openapi: {
    enabled: true,
    method: 'GET',
    path: `/account/${endpoint}`,
    protect: true,
    tags: ['account'],
    summary: 'Login via email',
  },
};

const login = router({
  login: loggedProcedure
    // Middlewares
    .use(withRateLimited({ windowSize: 10, maxRequests: 3 }))
    // Router
    .meta(meta)
    .input(
      z.object({
        email: z.string().email(),
        emailRedirectTo: z.string().url(),
      }),
    )
    .output(z.boolean())
    .query(async ({ input, ctx }) => {
      const supabase = createSBServerClient(ctx);

      const data = await supabase.auth.signInWithOtp({
        email: input.email,
        options: {
          shouldCreateUser: true,
          emailRedirectTo: input.emailRedirectTo,
        },
      });

      if (data.error) {
        throw new TRPCError({
          message: `There was an error signing you in. We are currently investigating the issue. Please try again in a few minutes. If you need further assistance, don't hesitate to contact us at [email protected]`,
          code: 'INTERNAL_SERVER_ERROR',
        });
      }

      return true;
    }),
});

export default login;

../../supabase/server'

import { createServerClient, type CookieOptions } from '@supabase/ssr';

import { AcmeURLConfig, type Database } from '@acme/config';
import { TContext } from '../types';

const useUrl = AcmeURLConfig('APP');

export const createSBServerClient = (ctx: TContext) => {
  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE!,
    {
      cookieOptions: useUrl.IS_PRODUCTION
        ? {
            domain: '.domain.com',
            sameSite: 'lax',
            secure: true,
          }
        : {},
      cookies: {
        getAll: async () => {
          return Object.entries(ctx.getCookies() || {}).map(
            ([name, value]) => ({ name, value }),
          );
        },
        setAll: async (
          cookiesToSet: {
            name: string;
            value: string;
            options: CookieOptions;
          }[],
        ) => {
          try {
            cookiesToSet.forEach(({ name, value, options }) => {
              ctx.setCookie({ name, value, options });
            });
          } catch (error) {
            //
          }
        },
      },
    },
  );
};

ctx.cookies

import cookie, { CookieSerializeOptions } from 'cookie';

export function getCookies(req: Request) {
  const cookieHeader = req.headers.get('cookie');
  if (!cookieHeader) return {};
  return cookie.parse(cookieHeader);
}

export function getCookie(req: Request, name: string) {
  const cookieHeader = req.headers.get('cookie');
  if (!cookieHeader) return undefined;
  const cookies = cookie.parse(cookieHeader);
  return cookies[name];
}

export function setCookie({
  resHeaders,
  name,
  value,
  options,
}: {
  resHeaders: Headers;
  name: string;
  value: string;
  options?: CookieSerializeOptions;
}) {
  resHeaders.append('Set-Cookie', cookie.serialize(name, value, options));
}

Steps Taken

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Update to 0.4 RC2
2. Increased Refresh token reuse interval to 100 seconds
3. I have https://**.domain.com** listed under Redirect URLs
4. Followed advise on https://github.com/supabase/auth-helpers/issues/436 , and https://github.com/orgs/supabase/discussions/27037

Expected behavior

Upon login and redirection the refresh token is found and valid, and getUser/getSession return valid results.

Screenshots

System information

System:
    Shell: 5.9 - /usr/bin/zsh
Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 9.3.0 - ~/.local/share/pnpm/pnpm
Browsers:
    Brave Browser: 125.1.66.118
    Chromium: 126.0.6478.55
npmPackages:
    @supabase/ssr: 0.4.0-rc.2 => 0.4.0-rc.2 
    @supabase/supabase-js: ^2.43.4 => 2.43.4 

    @tanstack/react-query: ^5.40.1 => 5.40.1 
    @trpc/client: 11.0.0-rc.401 => 11.0.0-rc.401+91720833b 
    @trpc/next: 11.0.0-rc.401 => 11.0.0-rc.401+91720833b 
    @trpc/react-query: 11.0.0-rc.401 => 11.0.0-rc.401+91720833b 
    next: ^14.2.3 => 14.2.3 
    react: ^18.3.1 => 18.3.1 
    typescript: 5.3.3 => 5.3.3 

[hsab]

Hi @hf ! Tagging you here out of desperation :) since I see you respond to a lot of folks stuck in similar situations

[hsab]

My understanding is that api.domain.com is pretty much irrelevant in this case since the user should be able to copy and paste the magic link from their email into any browser and be able to log in. I could be wrong, but I also suspect that subdomain cookie options could be the issue because the issue doesn't arise in local development. Only in production.

[hsab]

Ok folks I figured this out based on this comment's "gotcha". @hf what was happening was that I had some leftover cookies from app.domain.com. These were set before I switched to the multi-domain setup. I assume auth.logout() removes cookies by providing path and domain. In this case domain would be .domain.com, which is different from the old cookie domain of app.domain.com. This results in those leftover cookies not being cleaned up, and a stale auth token is left in storage. I think a better approach is to first do a lookup for sb-{SUPABASE_PROJECT_ID}-auth-token and then remove it properly by providing the cookie's domain. At the end of the day, logout is responsible to ensure there are no sb-{SUPABASE_PROJECT_ID}-auth-token cookies left. Just my 2 cents.

For anyone else running into this, I created a utility function nukeCookies, which I call in my hooks after auth.logout and also after auth.getUser only if the session/user is null.

nukeCookies

/* eslint-disable no-restricted-syntax */
import Cookies from 'js-cookie';

import { AcmeURLConfig, SUPABASE_PROJECT_ID } from '@acme/config';

const useURL = AcmeURLConfig('APP');

const cookiesToRemove = [
  `sb-${SUPABASE_PROJECT_ID}-auth-token-code-verifier`,
  `sb-${SUPABASE_PROJECT_ID}-auth-token`,
];

let cookieDomains: string[] = [];

if (!useURL.IS_DEVELOPMENT) {
  cookieDomains = [
    'domain.com',
    '.domain.com',
    'api.domain.com',
    'app.domain.com',
    'web.domain.com',
  ];
} else {
  cookieDomains = ['localhost'];
}

const nukeCookies = () => {
  for (const cookie of cookiesToRemove) {
    // Just to be sure
    Cookies.remove(cookie);

    // Clean up cookies for all domains
    for (const domain of cookieDomains) {
      // For chrome
      Cookies.remove(cookie, { domain });
      // For firefox https://stackoverflow.com/a/67335269
      Cookies.remove(cookie, { path: '/', domain });
    }
  }
};

export default nukeCookies;

useAuthLogout

/* eslint-disable no-restricted-syntax */

'use client';

/* eslint-disable no-restricted-globals */
import { useQuery } from '@tanstack/react-query';

import { createSBBrowserClient } from '@/utils/supabase';
import useAuthUser from '@/hooks/useAuthUser';
import nukeCookies from '@/utils/nukeCookies';

import type { DefinedUseQueryResult } from '@tanstack/react-query';
import type { AuthError } from '@supabase/supabase-js';

const useAuthLogout: () => DefinedUseQueryResult<
  {
    error: AuthError | null;
  } | null,
  Error
> = () => {
  const user = useAuthUser();
  const logout = useQuery<{
    error: AuthError | null;
  } | null>({
    queryKey: ['session', 'logout'],
    queryFn: async () => {
      const supabase = createSBBrowserClient();

      const locData = await supabase.auth.signOut({ scope: 'local' });

      nukeCookies();

      await user.refetch();

      if (locData.error) {
        throw new Error(locData.error.message);
      }

      return locData;
    },
    enabled: false,
    staleTime: 0,
    initialData: null,
  });

  return logout;
};

export default useAuthLogout;

useAuthUser

'use client';

/* eslint-disable no-restricted-globals */
import { useQuery } from '@tanstack/react-query';

import { createSBBrowserClient } from '@/utils/supabase';
import nukeCookies from '@/utils/nukeCookies';

import type { UseQueryResult } from '@tanstack/react-query';
import type { UserResponse } from '@supabase/supabase-js';

const useAuthUser: () => UseQueryResult<UserResponse | null, Error> = () => {
  const user = useQuery<UserResponse>({
    queryKey: ['session', 'user'],
    queryFn: async () => {
      const supabase = createSBBrowserClient();

      const locData = await supabase.auth.getUser();

      if (locData.error || !locData.data.user) {
        await supabase.auth.signOut({ scope: 'local' });
        nukeCookies();
      }

      return locData;
    },
    enabled: false,
    staleTime: 0,
  });

  return user;
};

export default useAuthUser;

[Hallidayo]

Hi everyone, due to inactivity on this issue I've moved the issue over to discussions/enhancements.