LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-11 04:22:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: more ssr inconsistencies

Browse Source
This commit is contained in:
loks0n
2024-03-09 19:13:02 +01:00
parent 1d15978eaa
commit 847a4cb0c1
18 changed files with 111 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/blog/post/introducing-support-for-server-side-rendering/+page.markdoc
View File

@@ -118,7 +118,7 @@ import { parseCookie } from "next/dist/compiled/@edge-runtime/cookies";
export function createAdminClient() => {
const client = new Client()
.setEndpoint(process.env.PUBLIC_APPWRITE_ENDPOINT)
.setProject(process.env.PUBLIC_APPWRITE_PROJECT_ID)
.setProject(process.env.PUBLIC_APPWRITE_PROJECT)
.setKey(process.env.APPWRITE_API_KEY)
return {
@@ -131,7 +131,7 @@ export function createAdminClient() => {
export function createSessionClient(headers) {
const client = new Client()
.setEndpoint(process.env.PUBLIC_APPWRITE_ENDPOINT)
.setProject(process.env.PUBLIC_APPWRITE_PROJECT_ID)
.setProject(process.env.PUBLIC_APPWRITE_PROJECT)
const cookies = parseCookie(headers.get('cookie') ?? '')
const session = cookies.get('my-session-cookie') ?? ''

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

@@ -8,6 +8,7 @@ step: 4
Astro middleware are functions that run on the server before a page is displayed to the user. Astro locals are a way to store data that is specific to the current request. We can use these features to store the user's account data, so that it is available to all pages.
Create a new file in the `src/server` directory called `middleware.js`:
```js
// src/server/middleware.js
import { defineMiddleware } from "astro:middleware";
@@ -40,7 +41,7 @@ declare namespace App {
interface ImportMetaEnv {
readonly PUBLIC_APPWRITE_ENDPOINT: string;
readonly PUBLIC_APPWRITE_PROJECT_ID: string;
readonly PUBLIC_APPWRITE_PROJECT: string;
readonly APPWRITE_KEY: string;
}
@@ -58,8 +59,8 @@ if (user) {
return Astro.redirect("/account");
}
return Astro.redirect("/signin");
return Astro.redirect("/signup");
---
```
When a user visits the home page, they will be redirected to the sign in page if they are not logged in, or to the account page if they are logged in.
When a user visits the home page, they will be redirected to the sign up page if they are not logged in, or to the account page if they are logged in.

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

@@ -1,11 +1,11 @@
---
layout: tutorial
title: Create sign in page
title: Create sign up page
description: Add authentication to a Astro project using Appwrite.
step: 5
---
We can now implement our sign in page. Create a `signin.astro` file in the `src/pages` directory:
We can now implement our sign up page. Create a `signin.astro` file in the `src/pages` directory:
```js
---

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

@@ -5,7 +5,7 @@ description: Add authentication to a Astro project using Appwrite.
step: 6
---
Now the end-user is able to sign in, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/pages` directory called `account.astro` and add the following code:
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/pages` directory called `account.astro` and add the following code:
```js
---
@@ -14,7 +14,7 @@ import { SESSION_COOKIE, createSessionClient } from "../server/appwrite";
// Redirect the user if not signed in
const { user } = Astro.locals;
if (!user) {
return Astro.redirect("/signin");
return Astro.redirect("/signup");
}
// Handle form action
@@ -28,8 +28,8 @@ if (Astro.request.method === "POST") {
// Delete the session cookie
Astro.cookies.delete(SESSION_COOKIE);
// Redirect the user to sign in page
return Astro.redirect("/signin");
// Redirect the user to sign up page
return Astro.redirect("/signup");
}
---
<ul>

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

@@ -1,18 +1,18 @@
---
layout: tutorial
title: OAuth2 authentication with SSR
title: OAuth authentication with SSR
description: Add authentication to a Astro project using Appwrite.
step: 7
---
To support the OAuth2 flow, we first redirect the user to the OAuth2 provider, and then handle the callback from the OAuth2 provider.
To support the OAuth flow, we first redirect the user to the OAuth provider, and then handle the callback from the OAuth provider.
To redirect, add a button to our sign in page that redirects the user to the OAuth2 provider.
To redirect, add a button to our sign up page that redirects the user to the OAuth provider.
```js
<!-- src/pages/signin.astro -->
<!-- src/pages/signup.astro -->
<!-- ... existing sign in form -->
<!-- ... existing sign up form -->
<form action="/oauth2" method="post">
<input type="hidden" name="provider" value="github" />
@@ -31,11 +31,11 @@ export const POST = async ({ redirect, url }) => {
// Create the Appwrite client
const { account } = createAdminClient();
// Create an OAuth2 token
// Create an OAuth token
const redirectUrl = await account.createOAuth2Token(
OAuthProvider.Github,
`${url.protocol}//${url.hostname}/oauth`,
`${url.protocol}//${url.hostname}/signin`
`${url.protocol}//${url.hostname}/signup`
);
// Redirect the end-user to the OAuth2 provider authentication
@@ -43,7 +43,7 @@ export const POST = async ({ redirect, url }) => {
};
```
The `createOAuth2Token` method returns a URL to the OAuth2 provider. After authentication the OAuth2 provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
The `createOAuth2Token` method returns a URL to the OAuth provider. After authentication the OAuth provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
Create a new `GET` route to handle the callback and create a session for the user.

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

@@ -5,7 +5,7 @@ description: Add authentication to a Next.js project using Appwrite.
step: 5
---
We can now implement our sign in page. Create a `page.jsx` file in the `src/app/signup` directory:
We can now implement our sign up page. Create a `page.jsx` file in the `src/app/signup` directory:
```jsx
// src/app/signup/page.jsx

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

@@ -5,7 +5,7 @@ description: Add authentication to a Next.js project using Appwrite.
step: 6
---
Now the end-user is able to sign in, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/app/account` directory called `page.jsx` and add the following code:
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/app/account` directory called `page.jsx` and add the following code:
```jsx
// src/app/account/page.jsx

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

@@ -7,7 +7,7 @@ step: 7
# Enable OAuth provider {% #enable-oauth-provider %}
To enable the GitHub OAuth2 provider, navigate to your Appwrite Console > Auth > Settings > OAuth2 Providers > GitHub
To enable the GitHub OAuth provider, navigate to your Appwrite Console > Auth > Settings > OAuth2 Providers > GitHub
To support the OAuth flow, we first redirect the user to the OAuth provider, and then handle the callback from the OAuth provider.

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

@@ -26,7 +26,7 @@ export const SESSION_COOKIE = "my-custom-session";
export function createAdminClient() {
const client = new Client()
.setEndpoint(process.env.APPWRITE_ENDPOINT!)
.setProject(process.env.APPWRITE_PROJECT_ID!)
.setProject(process.env.APPWRITE_PROJECT!)
.setKey(process.env.APPWRITE_KEY!);
return {
@@ -64,7 +64,7 @@ export default defineNuxtConfig({
appwriteKey: process.env.APPWRITE_KEY,
public: {
appwriteEndpoint: process.env.PUBLIC_APPWRITE_ENDPOINT,
appwriteProjectId: process.env.PUBLIC_APPWRITE_PROJECT_ID,
appwriteProjectId: process.env.PUBLIC_APPWRITE_PROJECT,
},
},
});
@@ -74,9 +74,11 @@ Now you can use `.env` files to set the environment variables for your project.
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 %}
@@ -86,12 +88,13 @@ The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read
For this tutorial you'll need an API key with the following scopes:
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| ------------------------------------------------------ | ------------------------------------------------------ | ------------------------------------------------------ |
| Sessions | `sessions.write` | Allows API key to create, update, and delete sessions. |
{% 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 %}

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

@@ -41,8 +41,8 @@ export default defineEventHandler(async (event) => {
await sendRedirect(event, "/account");
}
await sendRedirect(event, "/signin");
await sendRedirect(event, "/signup");
});
```
When a user visits the home page, they will be redirected to the sign in page if they are not logged in, or to the account page if they are logged in.
When a user visits the home page, they will be redirected to the sign up page if they are not logged in, or to the account page if they are logged in.

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

@@ -1,16 +1,16 @@
---
layout: tutorial
title: Create sign in page
title: Create sign up page
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 up page. Create a `signin.vue` file in the `pages` directory.
```vue
<!-- pages/signin.vue -->
<!-- pages/signup.vue -->
<template>
<form method="post" action="/api/signin">
<form method="post" action="/api/signup">
<input id="email" name="email" placeholder="Email" type="email" />
<input
id="password"
@@ -26,7 +26,7 @@ We can now implement our sign in page. Create a `signin.vue` file in the `pages`
This is an HTML form with an email and password input. When the form is submitted, we want to send the email and password to Appwrite to authenticate the user. To use Nuxt form actions we create a `signin.post.js` file in the `server/api` directory:
```javascript
// server/api/signin.post.js
// server/api/signup.post.js
import { SESSION_COOKIE, createAdminClient } from "~/server/lib/appwrite";
export default defineEventHandler(async (event) => {

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

@@ -5,7 +5,7 @@ description: Add authentication to a Nuxt project using Appwrite.
step: 6
---
Now the end-user is able to sign in, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `pages` directory called `account.vue` and add the following code:
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `pages` directory called `account.vue` and add the following code:
```vue
<!-- pages/account.vue -->
@@ -44,6 +44,6 @@ export default defineEventHandler(async (event) => {
await account.deleteSession("current");
deleteCookie(event, SESSION_COOKIE);
await sendRedirect(event, "/signin");
await sendRedirect(event, "/signup");
});
```

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

@@ -1,18 +1,18 @@
---
layout: tutorial
title: OAuth2 authentication with SSR
title: OAuth authentication with SSR
description: Add authentication to a Nuxt project using Appwrite.
step: 7
---
To support the OAuth2 flow, we first redirect the user to the OAuth2 provider, and then handle the callback from the OAuth2 provider.
To support the OAuth flow, we first redirect the user to the OAuth provider, and then handle the callback from the OAuth provider.
To redirect, add a button to our sign in page that redirects the user to the OAuth2 provider.
To redirect, add a button to our sign up page that redirects the user to the OAuth provider.
```vue
<!-- pages/signin.vue -->
<!-- pages/signup.vue -->
<!-- ... existing sign in form -->
<!-- ... existing sign up form -->
<form action="/api/oauth2" method="post">
<input type="hidden" name="provider" value="github" />
@@ -31,17 +31,17 @@ export default defineEventHandler(async (event) => {
const { account } = createAdminClient();
const redirectUrl = await account.createOAuth2Token(
"github", // OAuth2 provider
"github", // OAuth provider
`${config.public.appwriteEndpoint}/api/oauth2`, // Success URL: redirect back to the /oauth2 route
`${config.public.appwriteEndpoint}/signin` // Failure URL: redirect to the sign in page
`${config.public.appwriteEndpoint}/signup` // Failure URL: redirect to the sign up page
);
// Redirect the user to the OAuth2 provider authorization page
// Redirect the user to the OAuth provider authorization page
await sendRedirect(event, redirectUrl);
});
```
The `createOAuth2Token` method redirects the user to the OAuth2 provider, and then the OAuth2 provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
The `createOAuth2Token` method redirects the user to the OAuth provider, and then the OAuth provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
Handle the callback and create a session for the user. Create a new server route at `server/routes/api/oauth2.get.js`.
@@ -53,7 +53,7 @@ export default defineEventHandler(async (event) => {
// Extract the userId and secret from the URL query parameters
const { userId, secret } = getQuery(event);
if (!userId || !secret) {
return sendRedirect(event, "/signin");
return sendRedirect(event, "/signup");
}
// Create the Appwrite client

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

@@ -4,6 +4,7 @@ title: Initialize SDK
description: Add authentication to a SvelteKit project using Appwrite.
step: 3
---
Before you can use Appwrite, you need to create the Appwrite `Client` and set the project ID and endpoint.
The client is then used to create services like `Databases` and `Account`, so they all point to the same Appwrite project.
@@ -21,14 +22,14 @@ Doing so could create security vulnerabilities.
// src/lib/server/appwrite.js
import { Client, Account } from 'node-appwrite';
import { APPWRITE_KEY } from '$env/static/private';
import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_ID } from '$env/static/public';
import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT } from '$env/static/public';
export const SESSION_COOKIE = 'my-custom-session';
export function createAdminClient() {
const client = new Client()
.setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
.setProject(PUBLIC_APPWRITE_PROJECT_ID)
.setProject(PUBLIC_APPWRITE_PROJECT)
.setKey(APPWRITE_KEY); // Set the Appwrite API key!
// Return the services we want to use.
@@ -42,11 +43,15 @@ export function createAdminClient() {
export function createSessionClient(event) {
const client = new Client()
.setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
.setProject(PUBLIC_APPWRITE_PROJECT_ID);
.setProject(PUBLIC_APPWRITE_PROJECT);
// Extract our custom domain's session cookie from the request
const session = event.cookies.get(SESSION_COOKIE);
if (session) client.setSession(session);
if (!session) {
throw new Error('Session cookie not found');
}
client.setSession(session);
// Return the services we want to use.
return {
@@ -57,15 +62,21 @@ export function createSessionClient(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).
For example, your `.env` might look something similar to this.
You can get the values for these variables from the Appwrite console.
```text
APPWRITE_KEY=<YOUR_API_KEY>
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT=<YOUR_PROJECT_ID>
```
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 %}
@@ -75,20 +86,13 @@ The `APPWRITE_KEY` is an Appwrite API key with the necessary permissions to read
For this tutorial you'll need an API key with the following scopes:
| Category {% width=120 %} | Required scopes | Purpose |
|-----------|---------------------|---------|
| ------------------------------------------------------ | ------------------------------------------------------ | ------------------------------------------------------ |
| Sessions | `sessions.write` | Allows API key to create, update, and delete sessions. |
{% 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_API_KEY>
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT=<YOUR_PROJECT_ID>
```

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

@@ -13,12 +13,12 @@ Create a new file in the `src/hooks` directory called `server.js`:
import { createSessionClient } from '$lib/server/appwrite';
export async function handle({ event, resolve }) {
try {
// Use our helper function to create the Appwrite client.
const { account } = createSessionClient(event);
// Let's store the current logged in user in locals,
// Store the current logged in user in locals,
// for easy access in our other routes.
try {
event.locals.user = await account.get();
} catch {}
@@ -57,8 +57,8 @@ import { redirect } from '@sveltejs/kit';
export async function load({ locals }) {
// Access our user from locals.
if (!locals.user) {
// If no user is logged in, redirect to the sign in page.
throw redirect(301, '/signin');
// If no user is logged in, redirect to the sign up page.
throw redirect(301, '/signup');
}
// If the user is logged in, redirect to the account page.
@@ -66,4 +66,4 @@ export async function load({ locals }) {
}
```
When a user visits the home page, they will be redirected to the sign in page if they are not logged in, or to the account page if they are logged in.
When a user visits the home page, they will be redirected to the sign up page if they are not logged in, or to the account page if they are logged in.

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

@@ -1,14 +1,14 @@
---
layout: tutorial
title: Create sign in page
title: Create sign up page
description: Add authentication to a SvelteKit project using Appwrite.
step: 5
---
We can now implement our sign in page. Create a `+page.svelte` file in the `src/routes/signin` directory:
We can now implement our sign up page. Create a `+page.svelte` file in the `src/routes/signup` directory:
```svelte
<!-- src/routes/signin/+page.svelte -->
<!-- src/routes/signup/+page.svelte -->
<form method="post">
<input id="email" placeholder="Email" type="email" />
<input id="password" placeholder="Password" type="password" />

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

@@ -5,7 +5,7 @@ description: Add authentication to a SvelteKit project using Appwrite.
step: 6
---
Now the end-user is able to sign in, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/routes/account` directory called `+page.server.js` and add the following code:
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `src/routes/account` directory called `+page.server.js` and add the following code:
```js
// src/routes/account/+page.server.js
@@ -14,7 +14,7 @@ import { redirect } from '@sveltejs/kit';
export async function load({ locals }) {
// Logged out users can't access this page.
if (!locals.user) throw redirect(301, '/signin');
if (!locals.user) throw redirect(301, '/signup');
// Pass the stored user local to the page.
return {
@@ -32,8 +32,8 @@ export const actions = {
await account.deleteSession('current');
event.cookies.delete(SESSION_COOKIE);
// Redirect to the sign in page.
throw redirect(301, '/signin');
// Redirect to the sign up page.
throw redirect(301, '/signup');
}
};
```

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

@@ -1,18 +1,18 @@
---
layout: tutorial
title: OAuth2 authentication with SSR
title: OAuth authentication with SSR
description: Add authentication to a SvelteKit project using Appwrite.
step: 7
---
To support the OAuth2 flow, we first redirect the user to the OAuth2 provider, and then handle the callback from the OAuth2 provider.
To support the OAuth flow, we first redirect the user to the OAuth provider, and then handle the callback from the OAuth provider.
To redirect, add a button to our sign in page that redirects the user to the OAuth2 provider.
To redirect, add a button to our sign up page that redirects the user to the OAuth provider.
```svelte
<!-- src/routes/signin/+page.svelte -->
<!-- src/routes/signup/+page.svelte -->
<!-- ... existing sign in form -->
<!-- ... existing sign up form -->
<form action="/oauth2" method="post">
<button type="submit">Sign in with GitHub</button>
@@ -22,7 +22,7 @@ To redirect, add a button to our sign in page that redirects the user to the OAu
Add a new server route to handle the redirect.
```js
// src/routes/signin/+page.server.js
// src/routes/signup/+page.server.js
// ... existing imports
@@ -40,7 +40,7 @@ export const actions = {
const redirectURL = account.createOAuth2Token(
OAuthProvider.Github,
`${event.url.origin}/oauth2`,
`${event.url.origin}/signin`
`${event.url.origin}/signup`
);
throw redirect(url);
@@ -48,7 +48,7 @@ export const actions = {
};
```
The `createOAuth2Token` method redirects the user to the OAuth2 provider, and then the OAuth2 provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
The `createOAuth2Token` method redirects the user to the OAuth provider, and then the OAuth provider redirects the user back to the `/oauth2` route with the `userId` and `secret` URL query parameters.
Handle the callback and create a session for the user. Create a new server route at `src/routes/oauth2/+server.js`: