Back

Is it possible to combine SSR with CSR?

  • 0
  • Auth
  • Web
  • Cloud
Gabriel
27 Aug, 2024, 15:18

Currently I am login and control what can user see with SSR but I would like to upload files directly to appwrite without upload files first to my server due avoid innecesary traffic. I tried using "{ 'X-Fallback-Cookies': 'my-cookie-name-for-session-token' }" for the headers but I can not receive anything different than 401. Do I have to decide if I want between SSR and SCR? I mean, should I decide if I want my server as middle point between the frontend and backend (appwrite) or use directly the backend?

Is there a way to specify which cookie name should Appwrite use?

I have configured custom domain name but I am testing on localhost.

TL;DR
Developers are trying to combine server-side rendering (SSR) with client-side rendering (CSR) by setting cookies with session tokens. However, they are facing issues accessing the cookies on the client side due to the HttpOnly flag, which restricts JavaScript access. The suggested solution is to create a new Appwrite client on the client side and set the session token from the cookie on that client. To resolve the issue, developers can disable the HttpOnly flag on the cookie or follow this approach: ```ts const token = cookies.get('cookie'); const client = new Client().setEndpoint().setProject().setSession(token); ``
Kenny
27 Aug, 2024, 15:37

Set the token from your cookie as the session on your client

TypeScript
const token = cookies.get('cookie');

const client = new Client().setEndpoint().setProject().setSession(token);
Gabriel
27 Aug, 2024, 15:43

You mean inject it into the client side code, right? I though about it but not sure about safety πŸ˜…

Gabriel
27 Aug, 2024, 15:44

But it seems as the only one solution if bandwidth is the top priority πŸ˜…

Kenny
27 Aug, 2024, 15:54

You'll need a new appwrite client avaliable on the client side if you want to directly upload from the client.

Gabriel
27 Aug, 2024, 15:55

Thank you @Kenny just want to confirm that in case I was missing something in the doc... I was looking like mad person πŸ˜…

rbiut
30 Aug, 2024, 03:59

im on same boat, according to what i read from here, im doing this:

Php:

TypeScript
// Initialize admin client here
// ...

// Get email and password from request
$email = $_POST['email'];
$password = $_POST['password'];

try {
    $account = new Account($adminClient);

    // Create the session using the Appwrite client
    $session = $account->createEmailPasswordSession($email, $password);

    // Set the session cookie
    setcookie('session', $session['secret'], [
        'httpOnly' => true,
        'secure' => true,
        'sameSite' => 'strict',
        'expires' => strtotime($session['expire']),
        'path' => '/',
    ]);

    echo json_encode(['success' => true]);
} catch (Exception $e) {
    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}```

JS (web) part:
```const token = Cookies.get('session');
console.log('Token: ',token);
const client = new Appwrite.Client().setEndpoint(endpoint).setProject('abc').setSession(token);
console.log('Client: ', client);```

Console shows this:

`Token: undefined`
```Client: 
config: Object { endpoint: "https://abc.com", endpointRealtime: "wss://abc.com", project: "abc", … }
endpoint: "https://abc.com"
endpointRealtime: "wss://abc.com"
jwt: ""
locale: ""
project: "abc"
​​session: undefined```

According to what i see, its because the cookie is marked as HttpOnly, and it can only be accessed by the server, not via JavaScript.

So.. do i need to disable the httponly? or is there a better approach to this?
Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more