LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-10 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reviewed Next.js SSR tutorial

Browse Source
This commit is contained in:
Vincent (Wen Yu) Ge
2024-02-12 14:41:22 -05:00
parent ed94383b13
commit 0e66c8bb66
12 changed files with 136 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/routes/docs/tutorials/astro-ssr-auth/step-3/+page.markdoc
View File

@@ -12,7 +12,9 @@ Create a function to build services you need in a file like `src/server/appwrite
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.
{% info title="Appwrite client security" %}
We recommend creating a new instance of the Appwrite client for each request. This ensures that the client is not shared between requests and that the session is not shared between users.
Notice that `createAppwriteClient` returns **a new instance** of the Appwrite Client.
When using Appwrite in server-integrations, it's important to **never share a `Client` instance** between two requests.
Doing so could create security vulnerabilities.
{% /info %}
```js
@@ -58,17 +60,37 @@ function parseCookies(cookies: string): Map<string, string | null> {
`import.meta.env.APPWRITE_KEY`, `import.meta.env.PUBLIC_APPWRITE_ENDPOINT` and `import.meta.env.PUBLIC_APPWRITE_PROJECT_ID` are environment variables that are exported in your project's [.env file](https://kit.Astro.dev/docs/modules#$env-dynamic-public).
You can get the values for these variables from the Appwrite console. The `PUBLIC_APPWRITE_ENDPOINT` and `PUBLIC_APPWRITE_PROJECT_ID` are the endpoint and project ID for your Appwrite project.
You can get the values for these variables from the Appwrite console.
The `PUBLIC_APPWRITE_ENDPOINT` is the endpoint of your Appwrite project, and the `PUBLIC_APPWRITE_PROJECT` is the ID of the project you want to use.
You can get the values for these variables from the Appwrite console.
{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.png)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.png)
{% /only_light %}
The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read and write accounts and sessions.
For this tutorial you'll need an API key with the following scopes:
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| Accounts | `accounts.read` | Allows API key to read account information. |
| | `accounts.write` | Allows API key to create, update, and delete account information. |
{% only_dark %}
![Server integrations](/images/docs/quick-starts/dark/integrate-server.png)
{% /only_dark %}
{% only_light %}
![Server integrations](/images/docs/quick-starts/integrate-server.png)
{% /only_light %}
For example, your `.env` might look something similar to this.
```text
APPWRITE_KEY=<YOUR_APPWRITE_KEY>
APPWRITE_KEY=<YOUR_API_KEY>
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT_ID=<YOUR_APPWRITE_PROJECT_ID>
PUBLIC_APPWRITE_PROJECT=<YOUR_PROJECT_ID>
```
For this tutorial you'll need an API key with the following scopes:
- `accounts.read`
- `accounts.write`
- `sessions.write`

2
src/routes/docs/tutorials/astro-ssr-auth/step-7/+page.markdoc
View File

@@ -1,6 +1,6 @@
---
layout: tutorial
title: Adding OAuth2 authentication with SSR
title: OAuth2 authentication with SSR
description: Add authentication to a Astro project using Appwrite.
step: 7
---

6
src/routes/docs/tutorials/nextjs-ssr-auth/step-2/+page.markdoc
View File

@@ -6,7 +6,7 @@ step: 2
---
Create a react project using [Next.js](https://nextjs.org/docs/getting-started/installation#automatic-installation).
Create a project using [Next.js](https://nextjs.org/docs/getting-started/installation#automatic-installation).
```sh
npx create-next-app@latest
@@ -34,10 +34,10 @@ cd my-app
npm install
```
## Adding `node-appwrite` to Your Next.js App
# Install Appwrite {% #instll-appwrite %}
Appwrite provides a Node SDK that can be used in your Next.js apps. You can use Appwrite by installing the Node SDK as an NPM package.
The Node SDK is intended for server-side use. If you want to use Appwrite in a client-side application, you should use the Web SDK instead.
The Node SDK is intended for server-side use. If you want to use Appwrite in a client-side application, you should use the [Web SDK](/docs/quick-starts/web) instead.
```sh
npm install node-appwrite

34
src/routes/docs/tutorials/nextjs-ssr-auth/step-3/+page.markdoc
View File

@@ -11,6 +11,13 @@ Create a function to build services you need in a file like `src/lib/server/appw
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.
{% info title="Appwrite client security" %}
Notice that `createAppwriteClient` returns **a new instance** of the Appwrite Client.
When using Appwrite in server-integrations, it's important to **never share a `Client` instance** between two requests.
Doing so could create security vulnerabilities.
{% /info %}
```js
// src/lib/server/appwrite.js
import { Client, Account } from "node-appwrite";
@@ -41,12 +48,31 @@ export function createAppwriteClient(headers) {
`APPWRITE_KEY`, `NEXT_PUBLIC_APPWRITE_ENDPOINT` and `NEXT_PUBLIC_APPWRITE_PROJECT` are environment variables that are exported in your project's [.env file](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables).
You can get the values for these variables from the Appwrite console. The `PUBLIC_APPWRITE_ENDPOINT` is the endpoint of your Appwrite server, and the `PUBLIC_APPWRITE_PROJECT` is the ID of the project you want to use. The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read and write accounts and sessions.
The `PUBLIC_APPWRITE_ENDPOINT` is the endpoint of your Appwrite project, and the `PUBLIC_APPWRITE_PROJECT` is the ID of the project you want to use.
You can get the values for these variables from the Appwrite console.
{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.png)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.png)
{% /only_light %}
The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read and write accounts and sessions.
For this tutorial you'll need an API key with the following scopes:
- `accounts.read`
- `accounts.write`
- `sessions.write`
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| Accounts | `accounts.read` | Allows API key to read account information. |
| | `accounts.write` | Allows API key to create, update, and delete account information. |
{% only_dark %}
![Server integrations](/images/docs/quick-starts/dark/integrate-server.png)
{% /only_dark %}
{% only_light %}
![Server integrations](/images/docs/quick-starts/integrate-server.png)
{% /only_light %}
For example, your `.env` might look something similar to this.

4
src/routes/docs/tutorials/nextjs-ssr-auth/step-4/+page.markdoc
View File

@@ -7,7 +7,7 @@ step: 4
Build a utility function to get the logged in user from Appwrite. This function will be used in our components and routes to check if a user is logged in, and access the user's details.
Edit the `src/server/appwrite.js` file to create a new function called `getLoggedInUser`:
Edit the `src/server/appwrite.js` file to create a new function called `getLoggedInUser`.
```js
// ... your createAppwriteClient function
@@ -20,7 +20,7 @@ export async function getLoggedInUser(account) {
}
```
Now, use the `getLoggedInUser` function in the home page to redirect based on the user's login status. Create a new file in the `app` directory called `+page.jsx`:
Now, use the `getLoggedInUser` function in the home page to redirect based on the user's login status. Create a new file in the `app` directory called `+page.jsx`.
```js
import { createAppwriteClient, getLoggedInUser } from "@/lib/server/appwrite";

2
src/routes/docs/tutorials/nextjs-ssr-auth/step-7/+page.markdoc
View File

@@ -1,6 +1,6 @@
---
layout: tutorial
title: Adding OAuth2 authentication with SSR
title: OAuth2 authentication with SSR
description: Add authentication to a Next.js project using Appwrite.
step: 7
---

37
src/routes/docs/tutorials/nuxt-ssr-auth/step-3/+page.markdoc
View File

@@ -12,7 +12,9 @@ Create a function to build services you need in a file like `src/lib/server/appw
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.
{% info title="Appwrite client security" %}
We recommend creating a new instance of the Appwrite client for each request. This ensures that the client is not shared between requests and that the session is not shared between users.
Notice that `createAppwriteClient` returns **a new instance** of the Appwrite Client.
When using Appwrite in server-integrations, it's important to **never share a `Client` instance** between two requests.
Doing so could create security vulnerabilities.
{% /info %}
```js
@@ -57,16 +59,37 @@ export default defineNuxtConfig({
});
```
Now you can use `.env` files to set the environment variables for your project. Retrieve the values for these variables from the Appwrite console. The `PUBLIC_APPWRITE_ENDPOINT` and `PUBLIC_APPWRITE_PROJECT_ID` are the endpoint and project ID for your Appwrite project. The `APPWRITE_KEY` is the API key for your Appwrite project.
Now you can use `.env` files to set the environment variables for your project. Retrieve the values for these variables from the Appwrite console.
The `PUBLIC_APPWRITE_ENDPOINT` is the endpoint of your Appwrite project, and the `PUBLIC_APPWRITE_PROJECT` is the ID of the project you want to use.
You can get the values for these variables from the Appwrite console.
{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.png)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.png)
{% /only_light %}
The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read and write accounts and sessions.
For this tutorial you'll need an API key with the following scopes:
- `accounts.read`
- `accounts.write`
- `sessions.write`
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| Accounts | `accounts.read` | Allows API key to read account information. |
| | `accounts.write` | Allows API key to create, update, and delete account information. |
{% only_dark %}
![Server integrations](/images/docs/quick-starts/dark/integrate-server.png)
{% /only_dark %}
{% only_light %}
![Server integrations](/images/docs/quick-starts/integrate-server.png)
{% /only_light %}
For example, your `.env` might look something similar to this.
```text
APPWRITE_KEY=<YOUR_APPWRITE_KEY>
APPWRITE_KEY=<YOUR_API_KEY>
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT_ID=<YOUR_APPWRITE_PROJECT_ID>
PUBLIC_APPWRITE_PROJECT=<YOUR_PROJECT_ID>
```

2
src/routes/docs/tutorials/nuxt-ssr-auth/step-4/+page.markdoc
View File

@@ -7,7 +7,7 @@ step: 4
Nuxt server middle are functions that run on the server before a route is displayed to the user. Nuxt context allows you to store data for the lifecycle of the current request. We can use this to store the user's account data, so that it is available to all pages.
Create a new file in the `server/middleware` directory called `auth.js`:
Create a new file in the `server/middleware` directory called `auth.js`.
```js
// server/middleware/auth.js
import { createAppwriteClient } from "../lib/appwrite";

2
src/routes/docs/tutorials/nuxt-ssr-auth/step-5/+page.markdoc
View File

@@ -5,7 +5,7 @@ description: Add authentication to a Nuxt project using Appwrite.
step: 5
---
We can now implement our sign in page. Create a `signin.vue` file in the `pages` directory:
We can now implement our sign in page. Create a `signin.vue` file in the `pages` directory.
```vue
<!-- pages/signin.vue -->

2
src/routes/docs/tutorials/nuxt-ssr-auth/step-7/+page.markdoc
View File

@@ -1,6 +1,6 @@
---
layout: tutorial
title: Adding OAuth2 authentication with SSR
title: OAuth2 authentication with SSR
description: Add authentication to a Nuxt project using Appwrite.
step: 7
---

40
src/routes/docs/tutorials/sveltekit-ssr-auth/step-3/+page.markdoc
View File

@@ -12,7 +12,9 @@ Create a function to build services you need in a file like `src/lib/server/appw
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.
{% info title="Appwrite client security" %}
We recommend creating a new instance of the Appwrite client for each request. This ensures that the client is not shared between requests and that the session is not shared between users.
Notice that `createAppwriteClient` returns **a new instance** of the Appwrite Client.
When using Appwrite in server-integrations, it's important to **never share a `Client` instance** between two requests.
Doing so could create security vulnerabilities.
{% /info %}
```js
@@ -52,17 +54,37 @@ export function createAppwriteClient(event) {
`APPWRITE_KEY`, `PUBLIC_APPWRITE_ENDPOINT` and `PUBLIC_APPWRITE_PROJECT_ID` are environment variables that are exported in your project's [.env file](https://kit.svelte.dev/docs/modules#$env-dynamic-public).
You can get the values for these variables from the Appwrite console. The `PUBLIC_APPWRITE_ENDPOINT` and `PUBLIC_APPWRITE_PROJECT_ID` are the endpoint and project ID for your Appwrite project.
You can get the values for these variables from the Appwrite console.
The `PUBLIC_APPWRITE_ENDPOINT` is the endpoint of your Appwrite project, and the `PUBLIC_APPWRITE_PROJECT` is the ID of the project you want to use.
You can get the values for these variables from the Appwrite console.
{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.png)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.png)
{% /only_light %}
The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read and write accounts and sessions.
For this tutorial you'll need an API key with the following scopes:
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| Accounts | `accounts.read` | Allows API key to read account information. |
| | `accounts.write` | Allows API key to create, update, and delete account information. |
{% only_dark %}
![Server integrations](/images/docs/quick-starts/dark/integrate-server.png)
{% /only_dark %}
{% only_light %}
![Server integrations](/images/docs/quick-starts/integrate-server.png)
{% /only_light %}
For example, your `.env` might look something similar to this.
```text
APPWRITE_KEY=<YOUR_APPWRITE_KEY>
APPWRITE_KEY=<YOUR_API_KEY>
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT_ID=<YOUR_APPWRITE_PROJECT_ID>
PUBLIC_APPWRITE_PROJECT=<YOUR_PROJECT_ID>
```
For this tutorial you'll need an API key with the following scopes:
- `accounts.read`
- `accounts.write`
- `sessions.write`

2
src/routes/docs/tutorials/sveltekit-ssr-auth/step-7/+page.markdoc
View File

@@ -1,6 +1,6 @@
---
layout: tutorial
title: Adding OAuth2 authentication with SSR
title: OAuth2 authentication with SSR
description: Add authentication to a SvelteKit project using Appwrite.
step: 7
---