Supabase policies on getServerSideProps - Next.js

Question

I'm crafting a Trello clone with Next.js and Supabase as a BaaS.

In my Supabase table I have this policies:

Policies are working grate on client side with the following code:

const { data } = await supabase
    .from<BoardType>('board')
    .select('*')
    .eq('id', board.id)
    .single();

but when I try to get the board info on getServerSideProps it doesn't work, it return null all the time. I know that, for example, if you want to get the authenticated user on server side, you have to use supabase.auth.api.getUserByCookie(context.req) so I don't know if there's something I'm missing, but I couldn't find anything related to that.

Does anyone know how to handle that?

[Edited]

Here is the getServerSideProps code:

export const getServerSideProps: GetServerSideProps<BoardSlugProps> = async ({
  query,
}) => {
  const { data } = await supabase
    .from<BoardType>('board')
    .select('*')
    .eq('id', query.slug as string)
    .single();
  console.log(data);
  return {
    props: {
      board: data,
    },
  };
};

It does @juliomalves . Actually it works if I disable the table policies — Pedro Gómez, Sep 17 '21 at 17:15

score 3 · Accepted Answer · answered Jan 30 '22 at 06:22

Might not be the best way, but this is how I solved it with some hints from this Github discussion https://github.com/supabase/supabase/discussions/1094#discussioncomment-714633

From my understanding, the Supabase client is a little different on the server compared to in the browser (no session). Pulling the token out of cookies and adding it to the client lets the requests to supabase be from the authenticated user.

export const getServerSideProps: GetServerSideProps = ({ req }) => {
  const { user, token } = await supabase.auth.api.getUserByCookie(req);
  supabase.auth.setAuth(token);

  const { data, error } = await supabase.from(...

This totally worked for me as well! – Pedro Gómez Feb 02 '22 at 00:56 — Pedro Gómez, Feb 02 '22 at 00:56

score 1 · Answer 2 · edited Jan 17 '22 at 18:46

1

I found out it sends the request on the datebase with the anon key and not the authenticated jwt in the getSSProps. not sure why or if its intentional. If you add the role() = 'anon' rule it works, but that is not what you want in my opinion.

edited Jan 17 '22 at 18:46

Yunnosch

26,130
9
42
54

answered Jan 17 '22 at 18:24

vskorepa

53
3

Supabase policies on getServerSideProps - Next.js

2 Answers2