Using Next.js and Auth0 with Supabase

Blog Discussions
#1

Learn how to integrate Auth0 authentication with database storage and row-level security authorization in Supabase.
Read more…

:writing_hand:t2: Brought to you by our guest author Jon Meyers

Using Next.js and Auth0 with Supabase
Using Next.js and Auth0 with Supabase1176×1056 224 KB

1 Like
#2

What’s up Devs! Please share any comments or feedback with us on this thread

November Community News 2021
#3

Jon,
Thanks for this great article! One Typescript question:

export const getSupabase = (access_token?: any) => {
  const supabaseClient = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  );

  if (access_token) {
    // Typescript error here
    supabaseClient.auth.session = () => ({
      access_token,
    });
  }

  return supabaseClient;
}

I’m getting the following Typescript error:

Type '{ access_token: any; }' is missing the following properties from type 'Session': token_type, userts(2739)
1 Like
#4
#5

Hey there @juanzgc!

Feel free to DM @dijonmusters about that through his Twitter profile that he provided

#6

@dijonmusters this guide is now outdated based on the row level security updates in this release. I just spent a day trying to figure out why the RLS wouldn’t work :slightly_smiling_face:. Could you update the documentation here?

For anyone else who finds this, you need to replace

create or replace function auth.user_id() returns text as $$
  select nullif(current_setting('request.jwt.claim.userId', true), '')::text;
$$ language sql stable;

with

create or replace function auth.user_id() 
returns text 
language sql stable
as $$
  select (current_setting('request.jwt.claims', true)::jsonb ->> 'userId')::text
$$;
3 Likes
#7

Thanks a lot for sharing that with the rest of community!

#8

This topic was automatically closed after 29 days. New replies are no longer allowed.

#9
#10

Great article! This really helped kickstart an Auth0 - Supabase integration on a recent project.

Building from this example, however, what would be an approach to handle expired JWTs? By setting an expiration, like in the example, it seems like we are working against the settings configured in the Auth0 dashboard. Moreover, there is no mention in the article of how to deal with a session with an expired JWT.

#11

I think that this article has once again become outdated. I found luck following Supabase’s tutorial which is based off of this one, but seems updated. It includes an updated SQL function query for creating the proper auth.user_id() function, and a new pattern for passing the JWT token with requests when initializing the supabase client: https://supabase.com/docs/guides/integrations/auth0

#12

@robertino.calcaterra can you follow up on that? Thank you!

1 Like
#13

I’ve solved my problem by setting AUTH0_SESSION_ABSOLUTE_DURATION to a value less than or equal to the expiration of the JWT signed for Supabase.

#14

We are working closely with our Supabase folks on updating this post

2 Likes
#15

Thanks a lot for the update!

#16

Just for my clarity, are you saying you’re avoiding refreshing the Supabase token by simply expiring the Auth0 session before it or at the same time?

I ended up writing custom logic on the server side to:

  1. check for a valid token with each request to the supabase client
  2. if it’s invalid, await an asynchronous function that signs a new token to the user session and try again

^ Open to suggestions on that. Obviously it’s not a normal pattern like also generating a refresh token, but it seems to work as intended.