Can The load() Function Access Secure Values?

If I want to take advantage of load on hover when using a url Param, I can use the following pattern. Pass the param

<A href={`/${orderId}`}>Link</A>

<A href={`/${orderId}`}>Link</A>

Then in the component

const getOrder = cache(async (orderId: string): Promise<Order | undefined> => {
  "use server";
  return await getOrder(orderId);
}, "order");

// Get the param
export const route = {
  load({ params }) {
    void getOrder(params.orderId);
  },
} satisfies RouteDefinition;

export default function OrderDetailsPage(props: RouteSectionProps) {
  const order = createAsync(() => getOrder(props.params.orderId));
  //... use the order
}

const getOrder = cache(async (orderId: string): Promise<Order | undefined> => {
  "use server";
  return await getOrder(orderId);
}, "order");

// Get the param
export const route = {
  load({ params }) {
    void getOrder(params.orderId);
  },
} satisfies RouteDefinition;

export default function OrderDetailsPage(props: RouteSectionProps) {
  const order = createAsync(() => getOrder(props.params.orderId));
  //... use the order
}

But what if I need to pass getOrder() something secure like a userId or a jwt? Is there a way that I can pass a secure value to the load function without exposing it?

9 Replies

peerreynders•2mo ago

- After successful authentication store JWT in an HttpOnly cookie (i.e. the client JS can't access it). - Have middleware block requests to protected routes that don't have a cookie header with a valid JWT. Alternately you can even put that check in the API Route by inspecting the APIEvent.request. Similarly in a 'use server' section you can bail if getRequestEvent() doesn't pass the sniff test.

ChrisThornham•2mo ago

Ok. So if I have an AuthProvider that watches auth state changes, I can set or delete a cookie in the auth provider. Then if I need to access the cookie on the server, I can do so. It might look something like this: When the AuthProvider notices an auth session exists:

import { setCookie } from "vinxi/http";

// Set the session cookie
setCookie(event, "supabaseSession", session, {
  httpOnly: true,
  sameSite: 'Strict',
});

import { setCookie } from "vinxi/http";

// Set the session cookie
setCookie(event, "supabaseSession", session, {
  httpOnly: true,
  sameSite: 'Strict',
});

When the AuthProvider notices that the session expires or is removed I can remove the cookie:

setCookie(event, "supabaseSession", "", { maxAge: 0 });

setCookie(event, "supabaseSession", "", { maxAge: 0 });

And finally, if I need to access my session on the server I can:

function serverFunction() {
 "use server";
 const session = getCookie(event, "supabaseSession");
}

function serverFunction() {
 "use server";
 const session = getCookie(event, "supabaseSession");
}

Something like this? I'm not sure if "event" is needed in these cases.

Brendonovich•2mo ago

You should be fine to not pass event in. Call stuff in load the same way you do in createAsync, cookies make managing auth state nicer since you don’t have to pass them in manually Supabase should already be setting an auth cookie for you anyway that you can read from the supabase client

peerreynders•2mo ago

I'm not sure if "event" is needed in these cases.

Those functions are provided by h3 and in SolidStart they take event.nativeEvent. It just happens that vinxi wraps them and populates the event for you if you don't provide it. h3 also provides a session API the one caveat being that always creates a session when you use getSession() even if there isn't one already; i.e. it assumes that the session always exists, only it's contents is ephemeral. Example

Advanced - h3

More utilities

GitHub

sandbox000/src/server/session.ts at main · peerreynders/sandbox000

WIP. Contribute to peerreynders/sandbox000 development by creating an account on GitHub.

GitHub

vinxi/packages/vinxi/runtime/http.js at c1d444ddd3667627c6b70da677d...

The Full Stack JavaScript SDK. Contribute to nksaraf/vinxi development by creating an account on GitHub.

ChrisThornham•2mo ago

Yes… I'm running everything client side right now so supabase is only storing my session in local storage. I just need to figure out how to use the ssr package with solidstart. Too bad they don't provide an example. https://supabase.com/docs/guides/auth/server-side/creating-a-client

Creating a Supabase client for SSR | Supabase Docs

Configure your Supabase client to use cookies

Brendonovich•2mo ago

Oh i thought they’d set a cookie for you too, huh On the server use createServerClient and hook up the cookies with getCookies/setCookie Or u may have to use setHeader

ChrisThornham•2mo ago

Yeah, that would be ideal, but they don't. I’ll dig into it. I think a lot of trial and error with some ChatGPT will get me there. Haha. Thanks!

peerreynders•2mo ago

If these sources are anything to go by it's going to be interesting: https://github.com/orgs/supabase/discussions/1094 https://www.restack.io/docs/supabase-knowledge-supabase-get-user-by-cookie

GitHub

Is it possible to make requests "as" a particular user on the serve...

For context, I'm using Next.js with supabase-js, roughly following the Next.js with supabase auth example. I have a policy uid() = user_id on a table with row level security turned on, and I wa...

Supabase user retrieval by cookie

Learn how to fetch user data in Supabase using cookies with secure and efficient methods.

ChrisThornham•2mo ago

Thanks @peerreynders

Gaming

Programming

Can The load() Function Access Secure Values?