feat: ssr update svelte dx

This commit is contained in:
loks0n
2024-02-22 17:05:03 +00:00
parent bdf6fa8d82
commit fd6d9c8760
5 changed files with 28 additions and 25 deletions

View File

@@ -25,25 +25,30 @@ import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_ID } from '$env/stati
export const SESSION_COOKIE = 'my-custom-session';
export function createAppwriteClient(event) {
// Build the Appwrite client
export function createAdminClient() {
const client = new Client()
.setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
.setProject(PUBLIC_APPWRITE_PROJECT_ID)
.setKey(APPWRITE_KEY); // Set the Appwrite API key!
// Return the services we want to use.
return {
get account() {
return new Account(client);
}
};
}
export function createSessionClient(event) {
const client = new Client()
.setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
.setProject(PUBLIC_APPWRITE_PROJECT_ID);
// Set the API key for the client
client.setKey(APPWRITE_KEY);
// Extract our custom domain's session cookie from the request
const session = event.cookies.get(SESSION_COOKIE);
if (session) client.setSession(session);
// Return the services we want to use.
// This allows us to use syntax like:
// import { createAppwriteClient } from '$lib/server/appwrite';
//
// const { account } = createAppwriteClient(event);
// const user = await account.get();
return {
get account() {
return new Account(client);

View File

@@ -10,18 +10,17 @@ SvelteKit hooks which are functions that run on the server before a page is disp
Create a new file in the `src/hooks` directory called `server.js`:
```js
// src/hooks.server.js
import { createAppwriteClient } from '$lib/server/appwrite';
import { createSessionClient } from '$lib/server/appwrite';
export async function handle({ event, resolve }) {
// Use our helper function to create the Appwrite client.
const { account } = createAppwriteClient(event);
const { account } = createSessionClient(event);
// Let's store the current logged in user in locals,
// for easy access in our other routes.
try {
const user = await account.get();
event.locals.user = user;
} catch (error) {}
event.locals.user = await account.get();
} catch {}
// Continue with the request.
return resolve(event);
@@ -40,7 +39,7 @@ declare global {
namespace App {
// interface Error {}
interface Locals {
user: Models.User<Preferences> | null;
user: Models.User<Preferences> | undefined;
}
// interface PageData {}
// interface Platform {}
@@ -53,7 +52,6 @@ export {};
Now, use the `locals` object in the home page to redirect based on the user's login status. Create a new file in the `src/routes` directory called `+page.server.js`:
```js
import { createAppwriteClient } from '$lib/server/appwrite.js';
import { redirect } from '@sveltejs/kit';
export async function load({ locals }) {

View File

@@ -19,7 +19,7 @@ We can now implement our sign in page. Create a `+page.svelte` file in the `src/
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 SvelteKit form actions we create a `+page.server.js` file in the same directory:
```javascript
import { SESSION_COOKIE, createAppwriteClient } from '$lib/server/appwrite.js';
import { SESSION_COOKIE, createAdminClient } from '$lib/server/appwrite.js';
import { redirect } from '@sveltejs/kit';
export const actions = {
@@ -30,7 +30,7 @@ export const actions = {
const password = form.get('password') as string;
// Create the Appwrite client.
const { account } = createAppwriteClient(event);
const { account } = createAdminClient();
// Create the session using the client
const session = await account.createEmailPasswordSession(email, password);

View File

@@ -9,7 +9,7 @@ Now the end-user is able to sign in, we can create the account page. This page w
```js
// src/routes/account/+page.server.js
import { SESSION_COOKIE, createAppwriteClient } from '$lib/server/appwrite.js';
import { SESSION_COOKIE, createSessionClient } from '$lib/server/appwrite.js';
import { redirect } from '@sveltejs/kit';
export async function load({ locals }) {
@@ -26,7 +26,7 @@ export async function load({ locals }) {
export const actions = {
default: async (event) => {
// Create the Appwrite client.
const { account } = createAppwriteClient(event);
const { account } = createSessionClient(event);
// Delete the session on Appwrite, and delete the session cookie.
await account.deleteSession('current');

View File

@@ -28,7 +28,7 @@ Add a new server route to handle the redirect.
// ... existing imports
import { SESSION_COOKIE, createAppwriteClient } from '$lib/server/appwrite.js';
import { SESSION_COOKIE, createAdminClient } from '$lib/server/appwrite';
import { redirect } from '@sveltejs/kit';
export const actions = {
@@ -38,7 +38,7 @@ export const actions = {
const formData = await event.request.formData();
const provider = formData.get('provider') ?? 'github';
const { account } = createAppwriteClient();
const { account } = createAdminClient();
const redirectURL = account.createOAuth2Token(
provider,
'<YOUR_WEBSITE_DOMAIN>/oauth2',
@@ -57,7 +57,7 @@ Handle the callback and create a session for the user. Create a new server route
```js
// src/routes/oauth2/+server.js
import { SESSION_COOKIE, createAppwriteClient } from '$lib/server/appwrite';
import { SESSION_COOKIE, createAdminClient } from '$lib/server/appwrite';
export async function GET(event) {
// We should have a `userId` and `secret` query parameters in the URL
@@ -65,7 +65,7 @@ export async function GET(event) {
const secret = event.url.searchParams.get('secret') as string;
// Exchange the token `userId` and `secret` for a session
const { account } = createAppwriteClient(event);
const { account } = createAdminClient();
const session = await account.createSession(userId, secret);
// Redirect to the account page, and set the session cookie