Use JWT to allow Client Side interactions after SSR Auth?

[cyan elbow]

Hello everyone, I am rebuilding a CSR only application with NextJS to leverage SSR strategically so I can fetch certain data on the server and distribute it to all users equally. I figured if I have SSR its beneficial, security wise, to use SSR Authentication, right?
That works well with Appwrite so far, cookie is stored and I can make requests. However, I cannot seem to figure out how to also allow the client to access appwrite directly via the clientSDK (to use server resources efficiently and improve performance I want to keep the majority of api calls on the client side).

cookieStorage.set(`a_session_${BACKEND_PROJECT}`, session.secret, {
  httpOnly: true,
  secure: true,
  sameSite: "none",
  maxAge: Math.floor(
    (new Date(session.expire).getTime() - Date.now()) / 1000
  ),
  path: "/",
  domain: BACKEND_DOMAIN,
});

I found this somewhere here in the support thread to store a cookie with the session secret in its name and the backend domain as domain (e.g. appwrite.io). However, as I am developing on localhost I cannot set that cookie. I have been searching for countless hours now trying to figure out a best practice to authenticate using SSR and using CSR for majority of data requests. Can someone please help me and shine some light? Neither Appwrite Docs nor NextJsDocs nor ChatGPT were any help.
Appreciate it and thanks a lot 🙂

Or would the better approach be to authenticate with CSR and then use a JWT where beneficial to handle requests via the server?

[cyan elbow]

@wary geyser Hello, do you maybe have a best practice for me on hwo to proceed? 🙂 Thanks!

[hasty cobalt]

@cyan elbow If you want to use the client SDK to work then you will have to create a function which fetches the session secret from the server and hydrates it to the .setSession() method of the client SDK.
This needs to be done in a use effect hook.

cookieStore.set(SESSION_COOKIE_NAME, session.secret, {
httpOnly: true,
secure: true,
sameSite: "strict",
path: "/",
maxAge: SESSION_MAX_AGE,
});

after setting the cookies create this

export async function getSessionSecret() {
const cookieStore = await cookies();
const session = cookieStore.get(SESSION_COOKIE_NAME);
return session?.value || null;
}

then wherever you want to use the client sdk do this

import { client } from "@/lib/appwrite";
useEffect(() => {
const hydrate = async () => {
const secret = await getSessionSecret();
if (secret) {
client.setSession(secret);
}
setIsHydrated(true); // Now we know the SDK is ready
};
hydrate();
}, []);

Hope this helps

[cyan elbow]

that would make it accessible via js though opening up vulnerabilites for XSS attacks no? isnt with a JWT Token much safer?

[hasty cobalt]

Since our cookie is http only
So it's not accessible at all

JWT is not the solution

[cyan elbow]

if its http only, how can the client use it to authenticate with the Server?
and why is JWT not the solution? Isnt that what JWTs are made for?

[hasty cobalt]

Nextjs server is your source of truth for the user.

We are setting cookies in the server via the http only method after login or signup.

Then whenever we make a request to the appwrite server we have to use the node appwrite SDK to make the request.

Since you originally asked if it's possible to make request via both the SDK and I told you we can just fetch the session secret from the nextjs stored cookie and ideally verify it if needed then we use the secret we fetched and hydrate the client SDK with the secret with the . setSession method to make request to your backend without any issue.

As for JWT if you are using your own backend then you can use jwt for sure but appwrite has some limitations with jwt so it's not the magic solution.

However do note that the solution I have provided is not meant to be used in production as it is not considered safe it's just a work around for letting the client SDK to work with SSR auth.
There currently is no official solution for it yet.