Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ssr #439

Merged
merged 17 commits into from
Feb 8, 2024
Merged

feat: ssr #439

merged 17 commits into from
Feb 8, 2024

Conversation

loks0n
Copy link
Member

@loks0n loks0n commented Dec 20, 2023 •
edited
Loading

What does this PR do?

  • adds 'journeys' page for high level explanation of SEO support with appwrite

Have you read the Contributing Guidelines on issues?

Yes

@render Render
Copy link

render bot commented Dec 20, 2023

Your Render PR Server URL is https://appwrite-pr-439.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cm1lm15a73kc738g1tf0.

@vercel Vercel
Copy link

vercel bot commented Dec 20, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
website ❌ Failed (Inspect) Jan 13, 2024 9:51am

@gewenyu99 gewenyu99 changed the base branch from main to 1.5.x December 21, 2023 02:23
@loks0n
Update src/routes/docs/products/auth/ssr/+page.markdoc
ab2ca0f 
Co-authored-by: Vincent (Wen Yu) Ge <wenyu1999@hotmail.com>
@github-actions github-actions bot mentioned this pull request Jan 1, 2024
Closed
gewenyu99
gewenyu99 suggested changes Jan 10, 2024
View reviewed changes
src/routes/docs/products/auth/ssr/+page.markdoc Outdated
description: How to implement server side rendering with Appwrite
---

Server side rendering patterns are fully supported with Appwrite. This guide will walk you through the process of implementing server side rendering with Appwrite at a high level.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Give some examples of SSR frameworks. Maybe a short sentence about how this is different from CSR

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/products/auth/ssr/+page.markdoc Outdated
# Setting up the client {% #setting-up-the-client %}

The first step is to set up a client with an API key. This will allow you to make requests to the Appwrite API from your server.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I would do here is to explain the auth flow with SSR here in it's own section, maybe event with a network or UML diagram before going straight to explanation.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added - waiting on diagram

src/routes/docs/products/auth/ssr/+page.markdoc Outdated
```
{% /multicode %}

To prevent rate limiting, you must also use the `setKey` helper on the SDK. It's also possible to populate details about the user with the `setForwardedFor` helper and the `setForwardedUserAgent` helpers.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be it's own section and a more thorough explanation is probably needed here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/products/auth/ssr/+page.markdoc Outdated
res.cookie('session', session.secret, { // use the session secret as the cookie value
httpOnly: true,
secure: true,
sameSite: 'strict',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably after this example, explain that we created a session, returned it as a cookie, and in future requests, this cookie will be automatically sent like before

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@gewenyu99
Copy link
Contributor

Some more comments @loks0n

  • I think the handling of cookies is not well explained. While some might understand how the browser handles cookie from /login's response and sends it on future requests, I'm willing to bet most don't.

  • I think the idea that the server will assume the permission and scope of the session is not well explained.

  • I'm worried that improper following of the guide results in data leaks (cause it's a server SDK) We need to hammer in how to do this so it's safe with multiple warnings.

  • I think the below lines should be introduced earlier in the guide in all examples, they won't read this far before they hit rate limiting and complain

$client->setKey('<API_KEY>');
$client->setSession($session['secret']);
$client->setForwardedFor($_SERVER['HTTP_X_FORWARDED_FOR']);
$client->setForwardedUserAgent($_SERVER['HTTP_USER_AGENT']);

@loks0n loks0n requested review from gewenyu99 and Meldiron February 6, 2024 10:55
gewenyu99
gewenyu99 suggested changes Feb 7, 2024
View reviewed changes
src/routes/docs/tutorials/sveltekit-ssr-auth/step-3/+page.markdoc Outdated
For example, your `.env` might look something similar to this.

```text
APPWRITE_KEY=4d5e6f7g8h9i0j1k2l3m4n5o
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@loks0n Hey can you make sure these are <PLACE_HOLDER> type tags instead? No real IDs please

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/tutorials/sveltekit-ssr-auth/step-3/+page.markdoc
Create a function to build services you need in a file like `src/lib/server/appwrite.js` and **exporting the instances**.

As part of the function, set the current user's session if they are logged in. This is done by accessing the session cookie from the request and calling the `setSession(session)` with the cookie value.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a info tag to talk about why we create a new client every time.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/tutorials/sveltekit-ssr-auth/step-4/+page.markdoc
interface Locals {
user: Models.User<Preferences> | null;
}
// interface PageData {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meant to be a comment?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this is how sveltekit templates this files - best to keep this way I think

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope - this is how sveltekit templates the file. I think we should keep it this way

src/routes/docs/tutorials/sveltekit-ssr-auth/step-2/+page.markdoc Outdated
npm install
```

## Adding `node-appwrite` to Your Svelte App
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use # instead of ## because internal logic demotes tags by one level.

Also check for tags where you don't have {% #link-to-header %}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/tutorials/sveltekit-ssr-auth/step-1/+page.markdoc Outdated
Appwrite takes away the stress of building and maintaining a backend. Appwrite helps implement authentication, databases, file storage, and respond to real-time events with **secure** APIs out of the box.
If you're a Svelte developer, the examples in this guide show you how Appwrite can help you add authentication to Svelte apps faster.

## Before you start
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use # instead of ## because internal logic demotes tags by one level.

Also check for tags where you don't have {% #link-to-header %}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/tutorials/sveltekit-ssr-auth/step-8/+page.markdoc Outdated
---
If you want to see the complete source code, see the [demos-for-svelte](https://github.com/appwrite/demos-for-svelte/tree/main/server-side-rendering) repository.

## Other authentication methods
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use # instead of ## because internal logic demotes tags by one level.

Also check for tags where you don't have {% #link-to-header %}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

src/routes/docs/tutorials/sveltekit-ssr-auth/step-8/+page.markdoc Outdated
description: Add Authentication to a SvelteKit project using Appwrite.
step: 8
---
If you want to see the complete source code, see the [demos-for-svelte](https://github.com/appwrite/demos-for-svelte/tree/main/server-side-rendering) repository.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you want to see the complete source code, see the [demos-for-svelte](https://github.com/appwrite/demos-for-svelte/tree/main/server-side-rendering) repository.
If you want to see the complete source code with styling, see the [demos-for-svelte](https://github.com/appwrite/demos-for-svelte/tree/main/server-side-rendering) repository.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@loks0n loks0n requested a review from gewenyu99 February 8, 2024 12:46
@gewenyu99 gewenyu99 merged commit b7cfde7 into 1.5.x Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Meldiron Meldiron Awaiting requested review from Meldiron

@gewenyu99 gewenyu99 Awaiting requested review from gewenyu99

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@loks0n @gewenyu99