How to get access token in server?

[hallee9000]

How can I get the user's access token on the server? Or, how can I set the file's owner when uploading files to storage on the server?

[GaryAustin1]

Not 100% clear on what you are asking, but most likely you need to pass the users jwt to the server and then use supabase.auth.setAuth(jwt) on the server, then make your storage call.

This thread might have some useful info:
#1094

[hallee9000]

Thanks, @GaryAustin1. I think I've understood it. I'll dive into how to implement it.

[elanzini]

@leadream did you have any luck getting JWTs? currently facing the same issue.

[hallee9000]

@elanzini Finally I figured it out.

1. Get user's info by getUserById in server (use server role key to initialize supabase)
2. Generate a jwt token with user's info by jsonwebtoken

[elanzini]

That’s great to hear. Would you be able to share some code samples? I have little familiarity with supabase.

For example, the id of the user is that the one that I see in the JSON above? So are you sending a request to the server with the user id? Why do you need to generate a JWT on the server side?

My understanding is that the JWT is passed from the client to the server and serves the purpose of authenticating the request is done by a specific user.

[hallee9000]

In my case I it's a figma plugin. I can't use supabase sdk in it because it can't access local storage. So I do something like this. I don't have user's token in plugin so I need to generate one by every user's info.

[a4amado]

if anyone comes here in the future

type StateType = {
  session: Session | null;
  status: "loading" | "authenticated" | "unauthenticated";
};
export const sessionState = atom<StateType>({
  session: null,
  status: "loading",
});

export default function NextAuthProvider({ children }: PropsWithChildren) {
  const [_, setSession] = useAtom(sessionState);
  const [cookie, setSessionCookie, deleteSessionCookie] = useCookie("session");
  

  useEffect(() => {
    supabaseclient.auth
      .getSession()
      .then(({ data, error }) => {
        setSessionCookie(data.session?.access_token || "")
        setSession({
          session: data.session,
          status: !data.session ? "unauthenticated" : "authenticated",
        });
        supabaseclient.auth.onAuthStateChange((event, session) => {
          setSessionCookie(session?.access_token || "")
          if (event === "SIGNED_OUT") deleteSessionCookie()
          setSession({
            session: event == "SIGNED_OUT" ? null : session,
            status: event == "SIGNED_OUT" ? "unauthenticated" : "authenticated",
          });
        });
      })
      .catch(() => {
        deleteSessionCookie()
        setSession({
          session: null,
          status: "unauthenticated",
        });
      });
  }, []);

  return <>{children}</>;
}

state hook

"use client";

import { sessionState } from "./Provider";
import { useAtom } from "jotai";

function useSessionState() {
  const [s] = useAtom(sessionState);
  return s;
}
export default useSessionState;

[frankdagostino]

I need to understand this!!!

ActuallyI'm trying to securely handle access tokens in my server components on Next.js, but I can't trust the session that's passed via a non-HttpOnly cookie from the client side. So, I'm trying to figure out how to keep an HttpOnly cookie always synchronized with the default Supabase cookie to use in my server components."

[a4amado]

Supabase is designed for frontend use, similar to Firebase. If you want to use it on the backend, you would need to implement your own authentication on your servers and make your server the mediator between the client and Supabase. However, this approach defeats the main purpose of Supabase, which is to be "serverless." At this point, you are essentially using Supabase as just PostgreSQL.