How do I handle a JWT expiring

[silentworks]

I'm currently working on a SPA and I sometimes keep it open for long period on one screen, but whenever I click to a new screen and a request is made to supabase I get a 401 from the request along with "JWT Expired" message. How can I catch this from every request supabase makes in order to show a more reliable message or a user log in form.

The question is mainly how do I intercept this response from all supabase calls?

[BennyKok]

I'm also curious about how to handle this situation, I saw that there's an option "autoRefreshToken" but it doesn't seems like working in my case, or maybe this is just referring to refreshing the token upon the first login or something,

Also saw about the two API that might be able to refresh the token, but catching the error with every request feels like not the proper way to handle it...

supabase.auth.refreshSession()
supabase.auth.api.refreshAccessToken(refreshToken)

hopefully someone will have a clear solution to this.

[awalias]

which framework are you using, and is it running on the client? perhaps you could add some repro/environment description here: https://github.com/supabase/supabase-js/issues/178

[b2m9]

I'm still running into this issue in 1.28.2 - are we sure supabase/supabase-js#178 is fixed?

[heauton]

I stumbled on this issue too. Any suggestions from the Supabase team?

[tylermercer]

I've also encountered this.

Really disappointing how important questions like this go unanswered for months.

[kiwicopple]

Sometimes these things just get missed @tylermercer - if it's super urgent/critical it's usually better to raise it as an issue rather than a Discussion. We're hiring to get more eyes on the Discussions. We hope that we can be more available across all the channels soon, and squashing bugs a lot faster

[tylermercer]

That's fair. I'll remember that in the future. Apologies for being irritated, and thanks for all the work you guys do on this.

[awalias]

hey @silentworks this should have been solved by this: supabase/auth-js#72
are you using the latest version of supabase-js, and is it all running client side?

[awalias]

regarding "The question is mainly how do I intercept this response from all supabase calls?"

perhaps we should be checking the JWT client side before sending it at all, I've made an issue here: https://github.com/supabase/supabase-js/issues/197

Also noting that there may be an outstanding issue for mobile: https://github.com/supabase/supabase-js/issues/178

[bard]

@awalias I just stumbled on this while trying the React example. @supabase/supabase-js@1.27.0 and @supabase/gotrue-js@1.20.0 (both latest at the time of writing).

Repro: clone example, login, leave tab open, turn off computer for the night, turn on computer in the morning.

Reloading the page appears to trigger token refresh, and the user is authenticated without needing to go through login again.

Shouldn't requests failed due to 401 trigger an attempt token refresh, and, if failed, supabase.auth.onAuthStateChange?

[mstibbard]

I'm experiencing a JWT expiry issue in my SSR SvelteKit app. I have raised a support ticket. I cannot reliably reproduce the JWT expiring. It occurs in dev and in prod.

supabase-js v1.28.0

My supabase auth setup is directly from https://www.ashleyconnor.co.uk/2021/06/24/authenticated-server-rendered-pages-with-sveltekit-and-supabase which does have a listed fault of There’s no refresh mechanism on a SSR request.

[eikaramba]

i was able to make it work with svelte kit. it's really ugly and i need to polish the stuff but basically i have server only endpoints in sveltekit doing all the authentication. supabase-js is never used on the client. i store access_token, refresh_token and expires_at in individal cookies (with different expirations). this allows me to still read the refresh_cookie even if the access_token is expired. then in the hooks.js file i check the access_token and refresh_token and if the access_token is expired i issue a new one via refreshAccessToken

[juanjo]

Hi @eikaramba,

Do you have a repo or code snippet where we can see how you are doing this?
" if the access_token is expired i issue a new one via refreshAccessToken"

I have implemented the authentication in the server side, and I don't use supabase-js on the client, and store everything in cookies.
But still I need to figure out how to refresh the token in hooks.js.

Thank you in advance!

[serebano]

+1

[eikaramba]

sure no problem. however i have moved on to use directus instead of supabase (after years of feathers.js, strapi and nextjs). In terms of authentication both work the same as both are using JWT. the only difference is that direcuts is saving the refresh_token already as a token. supabase is still on my watchlist but for day-to-day usage i need backend custom code which currently is only feasible if you recreate every endpoint, which is not very DRY. Took me some time to figure out all the needed methods from the underlying authentication layer in supabase. so happy to save you guys some time now :)

anyhow, here is my hooks.js file:

import { auth } from '$lib/supabase';
import * as cookie from 'cookie';
import jwt from 'jsonwebtoken'


const ExpiryMargin=1000;

// exchange the refresh token for an access token
async function refreshAccessToken(request, cookies) {
  const {data,error} = await auth.api.refreshAccessToken(cookies.refresh_token)
  auth.setAuth(data.access_token); //needed so that server calls are authenticated
  if(error) {
    cookies.access_token = null;
    cookies.refresh_token = null;
    cookies.expires_at = null;
    throw error;
  }
  cookies.access_token = data.access_token;
  cookies.refresh_token = data.refresh_token;
  cookies.expires_at = data.expires_at;
  return [
    cookie.serialize('refresh_token', data.refresh_token, {
      maxAge: 60*60*24*180,
      httpOnly: true,
      path: '/',
      sameSite: 'strict',
      secure: true
    }),
    cookie.serialize('expires_at', data.expires_at, {
      maxAge: 60*60*24*180,
      httpOnly: true,
      path: '/',
      sameSite: 'strict',
      secure: true
    }),
    cookie.serialize('access_token', data.access_token, {
      maxAge: data.expires_in,
      httpOnly: true,
      path: '/',
      sameSite: 'strict',
      secure: true
    })];
}


export const handle = async ({ request, resolve }) => {
  let cookies = cookie.parse(request.headers.cookie || '')
  let setCookies=[];
  

    if(cookies.access_token || cookies.refresh_token) {
      if(cookies.expires_at < Math.floor(Date.now() / 1000) + ExpiryMargin) {
        console.log("expired",cookies);
        try {
          setCookies = await refreshAccessToken(request, cookies);
        } catch (err) {
          console.log(err);
          setCookies=[
            cookie.serialize('refresh_token', { httpOnly: true, path: "/", sameSite: "strict", secure: true, maxAge: 0 }),
            cookie.serialize('expires_at', { httpOnly: true, path: "/", sameSite: "strict", secure: true, maxAge: 0 }),
            cookie.serialize('access_token', { httpOnly: true, path: "/", sameSite: "strict", secure: true, maxAge: 0 }),
          ];
        }
      }
        const jwtPayload = cookies.access_token ? jwt.decode(cookies.access_token) : false;
        request.locals.authenticated = !!jwtPayload
        request.locals.user = {email:jwtPayload.email};
    }

  let response = await resolve(request)
  
  if(setCookies?.length>0){
    response.headers['set-cookie'] = setCookies;
  }

  return response
};

export async function getSession(request) {
  const { user, token,authenticated } = request.locals;
  return {
    user,
    token,
	  authenticated
  };
}

my login.js endpoint is this:

import { auth } from "$lib/supabase";

const constructCookies = (session) => {
  return {
    refresh_token: `refresh_token=${session.refresh_token};Path=/;HttpOnly;Secure;SameSite=Strict;Max-Age=${60*60*24*180};`,
    access_token: `access_token=${session.access_token};Path=/;HttpOnly;Secure;SameSite=Strict;Max-Age=${session.expires_in};`,
    expires_at: `expires_at=${session.expires_at};Path=/;HttpOnly;Secure;SameSite=Strict;Max-Age=${60*60*24*180};`,
  };
};

export async function post(request) {
  let email = request.body.get("email");
  let password = request.body.get("password");
  const redirectedFrom = request.query.get('redirectedFrom');

  if (email && password) {
    let { user, session, error } = await auth.signIn({ email, password });
    console.log(session);

    if (error) {
      return {
        status: 405,
        body: "Login failed",
      };
    }
    let { refresh_token, access_token, expires_at } = constructCookies(session);

    return {
      status: 302,
      body: { redirectedFrom: redirectedFrom ? redirectedFrom : "/" },
      headers: {
        "set-cookie": [refresh_token, access_token, expires_at],
        location: redirectedFrom ? redirectedFrom : "/",
      },
    };
  }


  return {
    status: 405,
    body: "Email or Password wrong",
  };
}

package.json

"cookie": "^0.4.1",
"@supabase/supabase-js": "^1.28.3",
"jsonwebtoken": "^8.5.1",

i can soon publish a repository as well. for directus i improved that whole thing a lot and fixed some errors. but the files above should work for you.

[finnstrand]

i can soon publish a repository as well. for directus i improved that whole thing a lot and fixed some errors. but the files above should work for you.

@eikaramba Thanks! I'd love to have a look at your Directus integration if you don't mind publishing. 🙏

[JasonBrannon]

I'm curious to know how your other API calls [GET, PUT, POST, DELETE] are using jwt, are they referencing your access_token from a cookie?

If so, how is the hooks.js header cookie being set in time with a new access_token? In my experience, this where I have to also store the new access_token to a events.local.accesstoken so other API calls will have it as the access_token cookie in their scope is stale until the hooks hander completes, but by then it's too late.

Managing refresh_token state during the hooks handle using both cookies and events.local.accesstoken is doable, but feels brittle to me, so your solution has piqued my interest.

[denull0]

Any progress on resolving this token issue?

[Jay-flow]

The issue is also underway supabase/supabase-flutter#33
but there is no solution yet 😭

[akiarostami]

@eikaramba's solution above seems to work. It's a simple code and you should be able to easily port it to flutter.

[denull0]

True, but also the promise of Supabase is that devs can built production ready apps over the weekend. So any workaround is against their values.

[davut]

OK here is the solution for the problem: https://github.com/supabase-community/supabase-auth-helpers/tree/next/src/nextjs

[kristofferso]

I'm also struggling with this issue in a React Native app. Did you figure anything out @tanifort ?

[tanifort]

I have tried a couple of things but nothing worked so far.

[kristofferso]

I came across an article that might have a solution. Working on implementing it now to see if it works

https://www.hxann.com/using-supabase-authentication-on-expo

[thorwebdev]

For React Native, can you try using 'expo-secure-store' as outlined in the docs: https://supabase.com/docs/guides/getting-started/tutorials/with-expo#initialize-a-react-native-app

import 'react-native-url-polyfill/auto'
import * as SecureStore from 'expo-secure-store'
import { createClient } from '@supabase/supabase-js'

const ExpoSecureStoreAdapter = {
  getItem: (key: string) => {
    return SecureStore.getItemAsync(key)
  },
  setItem: (key: string, value: string) => {
    SecureStore.setItemAsync(key, value)
  },
  removeItem: (key: string) => {
    SecureStore.deleteItemAsync(key)
  },
}

const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: ExpoSecureStoreAdapter as any,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})

[pierroo]

I just faced this JWT expired in React native as well;
is expo-secure-store really the suggested way to deal with it?
Can't we just go AsyncStorage from '@react-native-async-storage/async-storage' for the createClient?

Since it is honestly quite a hassle having to deal with expo setup and install for bare react native apps

[eikaramba]

For the sveltekit folks: Supabase released its helper library now. I think using that would now be the way to go https://github.com/supabase-community/auth-helpers/tree/main/packages/sveltekit

[edgarsilva]

In react native this sees to still be an issue, what is worse once the token expires I can't sign-out, it gives me an invalid JWT error ->

LOG  supabase.error: [AuthApiError: Invalid Refresh Token]

@acme/mobile-app:dev:  LOG  supabase.error: [AuthApiError: Invalid Refresh Token]
@acme/mobile-app:dev:  LOG  Let's sign out!
@acme/mobile-app:dev:  LOG  supabase.error: [AuthApiError: Invalid Refresh Token]
@acme/mobile-app:dev:  LOG  Let's sign out!
@acme/mobile-app:dev:  LOG  supabase.error: [AuthApiError: Invalid Refresh Token]
@acme/mobile-app:dev:  ERROR  Something went wrong: JWT is not valid: not a JWT structure

That's kind of the gist of it, I should be able to at least invalidate the session to ask for sign-in again.

[thorwebdev]

https://github.com/orgs/supabase/discussions/889#discussioncomment-6590711

[sotirelisc]

Happening really often in a RN app. Any solutions?

[eatanga-git]

I don't know if this is related, but it seems similar. I'm using Expo Go (React Native). Everytime I restart the application, I am logged out.
"expires_in": 3600 shows up in my log too.

I have the folllwing in my options for my supabase.js file
` auth: {

    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,

},
`

[thorwebdev]

https://github.com/orgs/supabase/discussions/889#discussioncomment-6590711

[eatanga-git]

Also related, trying to get session data (like a user id) doesn't seem to work

console.log( (await supabase.auth.getSession()).data.session.user.id )

[sasweb]

This is a valid error message if you don't have session. await supabase.auth.getSession() can return null and null.data.session.user throws an error.

[eatanga-git]

What I realized is that the session is always returning null whenever I switch to a new screen. So when I login, I have to save the session data into a state, so I can then access it in other screens.

[JavascriptMick]

FWIW, I have resolved this in my setup by:-

1. upgrading plugin.... "@nuxtjs/supabase": "^0.3.1"
2. Changing from this...

supabase = serverSupabaseClient(event)
({data: { user }} = await supabase.auth.getUser());

to this...

(user = await serverSupabaseUser(event));

[dhruvpvx]

this is how I am handling in my react native app

import 'react-native-url-polyfill/auto';
import { createClient } from '@supabase/supabase-js';
import { Database } from './database.types';
import Storage from '../storage';
import { router } from 'expo-router';

const JWT_EXPIRE_CODE = 'PGRST301';

const customFetch: typeof fetch = async (...args) => {
  try {
    const response = await fetch(...args);
    if (response.status === 401 && typeof response.json === 'function') {
      response.json().then((json) => {
        if (json.code === JWT_EXPIRE_CODE) {
          supabase.auth.signOut().finally(() => {
            router.replace('/sign-in');
          });
        }
      });
    }
    return response;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

const supabase = createClient<Database>(
  process.env.EXPO_PUBLIC_SUPABASE_URL || '',
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || '',
  {
    auth: {
      storage: Storage,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false,
    },
    global: {
      fetch: customFetch,
    },
  }
);

export default supabase;