├── .eslintignore
├── .eslintrc.cjs
├── .gitattributes
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── docs
    ├── screenshot1.png
    ├── screenshot2.png
    └── screenshot3.png
├── package-lock.json
├── package.json
├── src
    ├── app.css
    ├── app.d.ts
    ├── app.html
    ├── lib
    │   └── AppwriteService.ts
    └── routes
    │   ├── +layout.svelte
    │   ├── +page.server.ts
    │   ├── +page.svelte
    │   ├── Card.svelte
    │   └── login
    │       └── +page.server.ts
├── static
    ├── cover.png
    ├── favicon.png
    ├── logo.svg
    ├── matej.webp
    └── matus.webp
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts


/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Matúš Ferčák
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![Almost Cover](static/cover.png)
  2 | 
  3 | # Almost SSR - Svelte Kit
  4 | 
  5 | > Demo application with authorized server-side and client-side rendering.
  6 | 
  7 | ## 👀 Looking for Different Framework?
  8 | 
  9 | * [🔦 Next.js](https://github.com/Meldiron/appwrite-ssr-next-js) | [next-js.ssr.almostapps.eu](https://next-js.ssr.almostapps.eu/)
 10 | * [🔦 Nuxt](https://github.com/Meldiron/appwrite-ssr-nuxt) | [nuxt.ssr.almostapps.eu](https://nuxt.ssr.almostapps.eu/)
 11 | * [🔦 Astro](https://github.com/Meldiron/appwrite-ssr-astro) | [astro.ssr.almostapps.eu](https://astro.ssr.almostapps.eu/)
 12 | * [🔦 Qwik](https://github.com/Meldiron/appwrite-ssr-qwik) | [qwik.ssr.almostapps.eu](https://qwik.ssr.almostapps.eu/)
 13 | * [🔦 Remix](https://github.com/Meldiron/appwrite-ssr-remix) | [remix.ssr.almostapps.eu](https://remix.ssr.almostapps.eu/)
 14 | 
 15 | ## 💭 So How Does It Work?
 16 | 
 17 | Appwrite uses 1st party secure cookies for authorization. For legacy reasons, there are two such cookies. They are both very similar, but one's name ends with `_legacy` and is configured a tiny bit differently. It's also possible to use a fallback cookie, but that is not secure for production, and we will not be using that.
 18 | 
 19 | To ensure server-side rendering works, we need to set those cookies on our SSR server hostname instead of the Appwrite hostname. Let's say our Appwrite instance is on `cloud.appwrite.io`, and our app is on `myapp.com`. SSR server on domain `myapp.com` won't receive `appwrite.io` cookies. This is expected behavior, as browsers keep 1st party cookies securely scoped to specific domains.
 20 | 
 21 | To set those cookies on the SSR server, we need a special API endpoint in our SSR server. This endpoint will send a request to create a session, proxying email/password or other credentials. This endpoint next parses the response `set-cookie` header, replaces domain configuration on the cookies, and set's it's own `set-cookie` on the response to the client.
 22 | 
 23 | When a client calls this endpoint, the cookie will now be set on the SSR server hostname instead of the Appwrite hostname.
 24 | 
 25 | This makes server-side rendering work, but now client-side rendering is broken. Since `set-cookie` coming to the browser only includes a cookie for the SSR server, talking to the Appwrite server directly won't have a proper cookie - there is no auth cookie on the Appwrite hostname. To overcome this problem, we ensure the Appwrite hostname is a subdomain of the SSR hostname. For example, if our SSR server runs on `myapp.com`, Appwrite needs a custom domain configured on `appwrite.myapp.com`. With this setup, all requests to the Appwrite server will include auth cookies, and the user will be properly authorized. This is possible thanks to Appwrite prefixing the cookie domain with `.`, meaning all subdomains can also access the cookie.
 26 | 
 27 | ## 🧰 Tech Stack
 28 | 
 29 | - [Appwrite](https://appwrite.io/)
 30 | - [Svelte Kit](https://kit.svelte.dev/)
 31 | - [Pink Design](https://pink.appwrite.io/)
 32 | - [TypeScript](https://www.typescriptlang.org/)
 33 | 
 34 | ## 🛠️ Setup Server
 35 | 
 36 | 1. Setup Appwrite server
 37 | 2. Create project `almostSsr`
 38 | 
 39 | ## 👀 Setup Client
 40 | 
 41 | 1. Install libarries `npm install`
 42 | 2. Update `AppwriteEndpoint` in `src/lib/AppwriteService.ts`
 43 | 3. Start server `npm run dev`
 44 | 
 45 | ## 🚀 Deployment
 46 | 
 47 | 1. Deploy the frontend on your production domain. For example, `myapp.com`.
 48 | 2. Add the frontend domain as a trusted platform in your Appwrite project.
 49 | 3. Add a custom domain to your Appwrite project, which is a subdomain of your frontend. For example, `appwrite.myapp.com`.
 50 | 4. Update `SsrHostname` and `AppwriteHostname` in `src/lib/AppwriteService.ts` with proper domains.
 51 | 
 52 | ## 🤝 Contributing
 53 | 
 54 | To contribute to frontend, make sure to use the [Pink Design](https://pink.appwrite.io/) design system. Ensure both dark and light theme work properly, as well as responsivity on mobile, tablet and desktop.
 55 | 
 56 | When contributing with static files, ensure all images are in WEBP or SVG format.
 57 | 
 58 | ## 🖼️ Screenshots
 59 | 
 60 | ![Screenshot](docs/screenshot1.png)
 61 | ![Screenshot](docs/screenshot2.png)
 62 | ![Screenshot](docs/screenshot3.png)
 63 | 
 64 | ## 🤖 Auto-generated documentation
 65 | 
 66 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 67 | 
 68 | ## Creating a project
 69 | 
 70 | If you're seeing this, you've probably already done this step. Congrats!
 71 | 
 72 | ```bash
 73 | # create a new project in the current directory
 74 | npm create svelte@latest
 75 | 
 76 | # create a new project in my-app
 77 | npm create svelte@latest my-app
 78 | ```
 79 | 
 80 | ## Developing
 81 | 
 82 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 83 | 
 84 | ```bash
 85 | npm run dev
 86 | 
 87 | # or start the server and open the app in a new browser tab
 88 | npm run dev -- --open
 89 | ```
 90 | 
 91 | ## Building
 92 | 
 93 | To create a production version of your app:
 94 | 
 95 | ```bash
 96 | npm run build
 97 | ```
 98 | 
 99 | You can preview the production build with `npm run preview`.
100 | 
101 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
102 | 


--------------------------------------------------------------------------------
/docs/screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/docs/screenshot1.png


--------------------------------------------------------------------------------
/docs/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/docs/screenshot2.png


--------------------------------------------------------------------------------
/docs/screenshot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/docs/screenshot3.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "appwrite-ssr-svelte-kit",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
12 | 		"format": "prettier --plugin-search-dir . --write ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-auto": "^2.0.0",
16 | 		"@sveltejs/kit": "^1.5.0",
17 | 		"@types/set-cookie-parser": "^2.4.2",
18 | 		"@typescript-eslint/eslint-plugin": "^5.45.0",
19 | 		"@typescript-eslint/parser": "^5.45.0",
20 | 		"eslint": "^8.28.0",
21 | 		"eslint-config-prettier": "^8.5.0",
22 | 		"eslint-plugin-svelte3": "^4.0.0",
23 | 		"prettier": "^2.8.0",
24 | 		"prettier-plugin-svelte": "^2.8.1",
25 | 		"sass": "^1.62.0",
26 | 		"svelte": "^3.54.0",
27 | 		"svelte-check": "^3.0.1",
28 | 		"tslib": "^2.4.1",
29 | 		"typescript": "^5.0.0",
30 | 		"vite": "^4.2.0"
31 | 	},
32 | 	"type": "module",
33 | 	"dependencies": {
34 | 		"@appwrite.io/pink": "^0.0.6-rc.10",
35 | 		"appwrite": "^11.0.0",
36 | 		"set-cookie-parser": "^2.6.0"
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | .gradient-border {
 2 | 	border-radius: var(--card-border-radius, var(--border-radius-medium));
 3 | 	padding: 0.0625rem;
 4 | 	background-color: hsl(var(--color-border));
 5 | 	background: linear-gradient(
 6 | 		180deg,
 7 | 		hsl(var(--color-border)) 0%,
 8 | 		hsl(var(--p-body-bg-color)) 100%
 9 | 	);
10 | }
11 | 
12 | .theme-dark .card-is-failed {
13 | 	box-shadow: 0 1px 1px hsl(var(--color-danger-200)), 0 0 0 hsl(var(--color-danger-200)),
14 | 		inset 0 0.5px 0 0.5px hsl(var(--color-danger-120)),
15 | 		inset 0 -3px 0 -2px hsl(var(--color-danger-120)), 0 0 15px hsl(var(--color-danger-200)) !important;
16 | 
17 | 	border: none !important;
18 | }
19 | 
20 | .card-is-failed {
21 | 	box-shadow: 0 1px 1px hsl(var(--color-danger-50)), 0 0 0 hsl(var(--color-danger-50)),
22 | 		inset 0 0.5px 0 0.5px hsl(var(--color-danger-100)),
23 | 		inset 0 -3px 0 -2px hsl(var(--color-danger-100)), 0 0 15px hsl(var(--color-danger-50)) !important;
24 | 
25 | 	border: none !important;
26 | }
27 | 
28 | .theme-dark .card-is-pending {
29 | 	box-shadow: 0 1px 1px hsl(var(--color-warning-200)), 0 0 0 hsl(var(--color-warning-200)),
30 | 		inset 0 0.5px 0 0.5px hsl(var(--color-warning-120)),
31 | 		inset 0 -3px 0 -2px hsl(var(--color-warning-120)), 0 0 15px hsl(var(--color-warning-200)) !important;
32 | 
33 | 	border: none !important;
34 | }
35 | 
36 | .card-is-pending {
37 | 	box-shadow: 0 1px 1px hsl(var(--color-warning-50)), 0 0 0 hsl(var(--color-warning-50)),
38 | 		inset 0 0.5px 0 0.5px hsl(var(--color-warning-100)),
39 | 		inset 0 -3px 0 -2px hsl(var(--color-warning-100)), 0 0 15px hsl(var(--color-warning-50)) !important;
40 | 
41 | 	border: none !important;
42 | }
43 | 
44 | .theme-dark .card-is-complete {
45 | 	box-shadow: 0 1px 1px hsl(var(--color-success-200)), 0 0 0 hsl(var(--color-success-200)),
46 | 		inset 0 0.5px 0 0.5px hsl(var(--color-success-120)),
47 | 		inset 0 -3px 0 -2px hsl(var(--color-success-120)), 0 0 15px hsl(var(--color-success-200)) !important;
48 | 
49 | 	border: none !important;
50 | }
51 | 
52 | .card-is-complete {
53 | 	box-shadow: 0 1px 1px hsl(var(--color-success-50)), 0 0 0 hsl(var(--color-success-50)),
54 | 		inset 0 0.5px 0 0.5px hsl(var(--color-success-100)),
55 | 		inset 0 -3px 0 -2px hsl(var(--color-success-100)), 0 0 15px hsl(var(--color-success-50)) !important;
56 | 
57 | 	border: none !important;
58 | }
59 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface Platform {}
 9 | 	}
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		%sveltekit.head%
 8 | 
 9 | 		<!-- HTML Meta Tags -->
10 | 		<title>Almost SSR | Svelte Kit</title>
11 | 		<meta
12 | 			name="description"
13 | 			content="Appwrite Loves Svelte Kit! Demo application with authorized server-side and client-side rendering."
14 | 		/>
15 | 
16 | 		<!-- Facebook Meta Tags -->
17 | 		<meta property="og:url" content="https://svelte-kit.ssr.almostapps.eu/" />
18 | 		<meta property="og:type" content="website" />
19 | 		<meta property="og:title" content="Almost SSR | Svelte Kit" />
20 | 		<meta
21 | 			property="og:description"
22 | 			content="Appwrite Loves Svelte Kit! Demo application with authorized server-side and client-side rendering."
23 | 		/>
24 | 		<meta property="og:image" content="https://svelte-kit.ssr.almostapps.eu/cover.png" />
25 | 
26 | 		<!-- Twitter Meta Tags -->
27 | 		<meta name="twitter:card" content="summary_large_image" />
28 | 		<meta property="twitter:domain" content="svelte-kit.ssr.almostapps.eu" />
29 | 		<meta property="twitter:url" content="https://svelte-kit.ssr.almostapps.eu/" />
30 | 		<meta name="twitter:title" content="Almost SSR | Svelte Kit" />
31 | 		<meta
32 | 			name="twitter:description"
33 | 			content="Appwrite Loves Svelte Kit! Demo application with authorized server-side and client-side rendering."
34 | 		/>
35 | 		<meta name="twitter:image" content="https://svelte-kit.ssr.almostapps.eu/cover.png" />
36 | 
37 | 		<!-- Meta Tags Generated via https://www.opengraph.xyz -->
38 | 	</head>
39 | 	<body data-sveltekit-preload-data="hover" class="theme-dark">
40 | 		<div style="display: contents">%sveltekit.body%</div>
41 | 	</body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/lib/AppwriteService.ts:
--------------------------------------------------------------------------------
 1 | import { Account, Avatars, Client } from 'appwrite';
 2 | 
 3 | export const SsrHostname: string = 'svelte-kit.ssr.almostapps.eu';
 4 | export const AppwriteHostname: string = 'appwrite.svelte-kit.ssr.almostapps.eu';
 5 | 
 6 | export const AppwriteEndpoint = 'https://appwrite.svelte-kit.ssr.almostapps.eu/v1';
 7 | export const AppwriteProject = 'almostSsr';
 8 | 
 9 | const client = new Client();
10 | client.setEndpoint(AppwriteEndpoint).setProject(AppwriteProject);
11 | 
12 | const account = new Account(client);
13 | const avatars = new Avatars(client);
14 | 
15 | export const AppwriteService = {
16 | 	signOut: async () => {
17 | 		await account.deleteSession('current');
18 | 	},
19 | 	getAccount: async () => {
20 | 		return await account.get<any>();
21 | 	},
22 | 	getAccountPicture: (name: string) => {
23 | 		return avatars.getInitials(name.split("").reverse().join(""), 256, 256).toString();
24 | 	},
25 | 	setSession: (hash: string) => {
26 | 		const authCookies: any = {};
27 | 		authCookies['a_session_' + AppwriteProject] = hash;
28 | 		client.headers['X-Fallback-Cookies'] = JSON.stringify(authCookies);
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import '../app.css';
  3 | 	import '@appwrite.io/pink';
  4 | 	import '@appwrite.io/pink-icons';
  5 | 
  6 | 	let isDark = true;
  7 | 	let isMenuOpened: null | boolean = null;
  8 | 
  9 | 	function toggleTheme() {
 10 | 		if (isDark) {
 11 | 			document.body.classList.remove('theme-dark');
 12 | 		} else {
 13 | 			document.body.classList.add('theme-dark');
 14 | 		}
 15 | 
 16 | 		isDark = document.body.classList.contains('theme-dark');
 17 | 	}
 18 | 
 19 | 	function toggleMenu() {
 20 | 		if (isMenuOpened === null) {
 21 | 			isMenuOpened = true;
 22 | 		} else {
 23 | 			isMenuOpened = !isMenuOpened;
 24 | 		}
 25 | 	}
 26 | </script>
 27 | 
 28 | <div class="grid-with-side">
 29 | 	<header class="main-header u-padding-inline-end-0">
 30 | 		<button
 31 | 			on:click={toggleMenu}
 32 | 			class="button is-text is-only-icon is-not-desktop nav-btn"
 33 | 			aria-label="Open Menu"
 34 | 		>
 35 | 			<span aria-hidden="true" class="icon-menu" />
 36 | 		</button>
 37 | 		<a class="logo" href="/">
 38 | 			<img src="/logo.svg" alt="Logo" />
 39 | 		</a>
 40 | 		<div class="main-header-end u-margin-inline-end-16">
 41 | 			<ul class="buttons-list is-with-padding">
 42 | 				<li class="buttons-list-item">
 43 | 					<a
 44 | 						href="https://github.com/Meldiron/appwrite-ssr-svelte-kit"
 45 | 						target="_blank"
 46 | 						class="button is-secondary is-not-mobile"
 47 | 					>
 48 | 						<span class="text">View on GitHub</span>
 49 | 					</a>
 50 | 					<a
 51 | 						href="https://github.com/Meldiron/appwrite-ssr-svelte-kit"
 52 | 						target="_blank"
 53 | 						class="button is-secondary is-only-mobile"
 54 | 					>
 55 | 						<svg
 56 | 							width="16"
 57 | 							height="16"
 58 | 							role="img"
 59 | 							viewBox="0 0 24 24"
 60 | 							xmlns="http://www.w3.org/2000/svg"
 61 | 							><title>GitHub</title><path
 62 | 								d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
 63 | 								fill="currentColor"
 64 | 							/></svg
 65 | 						>
 66 | 					</a>
 67 | 				</li>
 68 | 				<li class="buttons-list-item u-padding-inline-0">
 69 | 					<div>
 70 | 						{#if isDark}
 71 | 							<div>
 72 | 								<button
 73 | 									on:click={toggleTheme}
 74 | 									class="button is-only-icon is-text"
 75 | 									aria-label="Replace to Dark Mode Theme"
 76 | 								>
 77 | 									<span class="icon-sun" aria-hidden="true" />
 78 | 								</button>
 79 | 							</div>
 80 | 						{:else}
 81 | 							<button
 82 | 								on:click={toggleTheme}
 83 | 								class="button is-only-icon is-text"
 84 | 								aria-label="Replace to Light Mode Theme"
 85 | 							>
 86 | 								<span class="icon-moon" aria-hidden="true" />
 87 | 							</button>
 88 | 						{/if}
 89 | 					</div>
 90 | 				</li>
 91 | 			</ul>
 92 | 		</div>
 93 | 	</header>
 94 | 	<aside
 95 | 		class="main-side"
 96 | 		style:display={isMenuOpened === null ? undefined : isMenuOpened ? 'block' : 'none'}
 97 | 	>
 98 | 		<div class="side-nav">
 99 | 			<div class="side-nav-main">
100 | 				<section class="drop-section">
101 | 					<ul class="drop-list">
102 | 						<li class="drop-list-item">
103 | 							<a class="drop-button u-cross-center is-selected" href="https://svelte-kit.ssr.almostapps.eu/">
104 | 								<svg role="img" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
105 | 									><title>Svelte</title><path
106 | 										d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"
107 | 										fill="currentColor"
108 | 									/></svg
109 | 								>
110 | 								<span class="text">Svelte Kit</span>
111 | 							</a>
112 | 						</li>
113 | 						<li class="drop-list-item">
114 | 							<a class="drop-button u-cross-center" href="https://next-js.ssr.almostapps.eu/">
115 | 								<svg role="img" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
116 | 									><title>Next.js</title><path
117 | 										d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z"
118 | 										fill="currentColor"
119 | 									/></svg
120 | 								>
121 | 								<span class="text">Next.js </span>
122 | 							</a>
123 | 						</li>
124 | 						<li class="drop-list-item">
125 | 							<a class="drop-button u-cross-center" href="https://remix.ssr.almostapps.eu/">
126 | 								<svg role="img" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
127 | 									><title>Remix</title><path
128 | 										d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z"
129 | 										fill="currentColor"
130 | 									/></svg
131 | 								>
132 | 								<span class="text">Remix</span>
133 | 							</a>
134 | 						</li>
135 | 						 <li class="drop-list-item">
136 |                     <a
137 |                       class="drop-button u-cross-center"
138 |                       href="https://qwik.ssr.almostapps.eu/"
139 |                     >
140 |                       <svg
141 |                         width="16"
142 |                         viewBox="0 0 164 164"
143 |                         fill="none"
144 |                         xmlns="http://www.w3.org/2000/svg"
145 |                       >
146 |                         <path
147 |                           d="M140.301 163.741L110.951 134.541L110.531 134.611L116.001 130.201L48.1213 72.5711L63.5313 57.7211L54.0013 2.20117L11.5813 58.9911C4.30128 66.3511 2.90128 78.3811 8.18128 87.2011L34.9813 131.691C39.0813 138.511 45.5213 142.891 54.5113 142.571C73.5413 141.901 81.9113 141.901 81.9113 141.901L140.281 163.711L140.301 163.731V163.741Z"
148 |                           fill="currentColor"
149 |                         />
150 |                         <path
151 |                           d="M154.801 81.9212C159.031 73.2012 160.541 65.5712 156.371 57.9212L150.441 47.0012L147.361 41.4012L146.161 39.2012L146.061 39.3412L129.911 11.3412C127.915 7.86085 125.028 4.97549 121.546 2.98228C118.064 0.989063 114.113 -0.0399603 110.101 0.00118734L95.9413 0.401189L53.6913 0.511188C49.7687 0.539401 45.9206 1.58541 42.5236 3.54688C39.1265 5.50835 36.2968 8.31809 34.3113 11.7012L8.6413 62.6812L54.5813 5.53119L114.851 71.8012L104.051 82.7312L110.501 134.571L110.591 134.471V134.611H110.491L110.631 134.741L115.651 139.641L139.951 163.381C140.981 164.361 142.631 163.181 141.951 161.961L126.931 132.391"
152 |                           fill="currentColor"
153 |                         />
154 |                       </svg>
155 | 
156 |                       <span class="text">Qwik</span>
157 |                     </a>
158 |                   </li>
159 | 
160 | 						<li class="drop-list-item">
161 | 							<a class="drop-button u-cross-center" href="https://nuxt.ssr.almostapps.eu/">
162 | 								<svg role="img" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
163 | 									><title>Nuxt.js</title><path
164 | 										d="M13.4642 19.8295h8.9218c.2834 0 .5618-.0723.8072-.2098a1.5899 1.5899 0 0 0 .5908-.5732 1.5293 1.5293 0 0 0 .216-.783 1.529 1.529 0 0 0-.2167-.7828L17.7916 7.4142a1.5904 1.5904 0 0 0-.5907-.573 1.6524 1.6524 0 0 0-.807-.2099c-.2833 0-.5616.0724-.807.2098a1.5904 1.5904 0 0 0-.5907.5731L13.4642 9.99l-2.9954-5.0366a1.5913 1.5913 0 0 0-.591-.573 1.6533 1.6533 0 0 0-.8071-.2098c-.2834 0-.5617.0723-.8072.2097a1.5913 1.5913 0 0 0-.591.573L.2168 17.4808A1.5292 1.5292 0 0 0 0 18.2635c-.0001.2749.0744.545.216.783a1.59 1.59 0 0 0 .5908.5732c.2454.1375.5238.2098.8072.2098h5.6003c2.219 0 3.8554-.9454 4.9813-2.7899l2.7337-4.5922L16.3935 9.99l4.3944 7.382h-5.8586ZM7.123 17.3694l-3.9083-.0009 5.8586-9.8421 2.9232 4.921-1.9572 3.2892c-.7478 1.1967-1.5972 1.6328-2.9163 1.6328z"
165 | 										fill="currentColor"
166 | 									/></svg
167 | 								>
168 | 								<span class="text">Nuxt</span>
169 | 							</a>
170 | 						</li>
171 | 						<li class="drop-list-item">
172 | 							<a class="drop-button u-cross-center" href="https://astro.ssr.almostapps.eu/">
173 | 								<svg role="img" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
174 | 									><title>Astro</title><path
175 | 										d="M16.074 16.86c-.72.616-2.157 1.035-3.812 1.035-2.032 0-3.735-.632-4.187-1.483-.161.488-.198 1.046-.198 1.402 0 0-.106 1.75 1.111 2.968 0-.632.513-1.145 1.145-1.145 1.083 0 1.082.945 1.081 1.712v.069c0 1.164.711 2.161 1.723 2.582a2.347 2.347 0 0 1-.236-1.029c0-1.11.652-1.523 1.41-2.003.602-.383 1.272-.807 1.733-1.66a3.129 3.129 0 0 0 .378-1.494 3.14 3.14 0 0 0-.148-.954zM15.551.6c.196.244.296.572.496 1.229l4.368 14.347a18.18 18.18 0 0 0-5.222-1.768L12.35 4.8a.37.37 0 0 0-.71.002l-2.81 9.603a18.175 18.175 0 0 0-5.245 1.771L7.974 1.827c.2-.656.3-.984.497-1.227a1.613 1.613 0 0 1 .654-.484C9.415 0 9.757 0 10.443 0h3.135c.686 0 1.03 0 1.32.117A1.614 1.614 0 0 1 15.55.6z"
176 | 										fill="currentColor"
177 | 									/></svg
178 | 								>
179 | 								<span class="text">Astro</span>
180 | 							</a>
181 | 						</li>
182 | 						<li class="drop-list-item">
183 | 							<a class="drop-button u-cross-center" href="/">
184 | 								<svg width="16" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
185 | 									><title>Angular</title><path
186 | 										d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z"
187 | 										fill="currentColor"
188 | 									/></svg
189 | 								>
190 | 								<span class="text">Analog</span>
191 | 								<code class=" inline-code">WIP</code>
192 | 							</a>
193 | 						</li>
194 | 					</ul>
195 | 				</section>
196 | 				<div style="border-top: 1px solid hsl(var(--color-border)); padding: 1rem">
197 | 					<div class="u-flex u-cross-center u-flex-vertical u-gap-8">
198 | 						<p>
199 | 							Made with <span
200 | 								style="color: hsl(var(
201 | 							--color-primary-200))">❤️</span
202 | 							> by
203 | 						</p>
204 | 
205 | 						<div>
206 | 							<ul class="avatars-group">
207 | 								<li class="avatars-group-item">
208 | 									<a
209 | 										href="https://github.com/matusfercak"
210 | 										target="_blank"
211 | 										class="avatar is-size-small is-color-blue"
212 | 									>
213 | 										<img
214 | 											style="border-radius: 50%;"
215 | 											src="/matus.webp"
216 | 											width="36"
217 | 											height="36"
218 | 											alt="Author"
219 | 										/>
220 | 									</a>
221 | 								</li>
222 | 								<li class="avatars-group-item">
223 | 									<a
224 | 										href="https://github.com/meldiron"
225 | 										target="_blank"
226 | 										class="avatar is-size-small is-color-blue"
227 | 									>
228 | 										<img
229 | 											style="border-radius: 50%;"
230 | 											src="/matej.webp"
231 | 											width="36"
232 | 											height="36"
233 | 											alt="Author"
234 | 										/>
235 | 									</a>
236 | 								</li>
237 | 							</ul>
238 | 						</div>
239 | 					</div>
240 | 				</div>
241 | 			</div>
242 | 		</div>
243 | 	</aside>
244 | 	<slot />
245 | </div>
246 | 


--------------------------------------------------------------------------------
/src/routes/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { AppwriteProject, AppwriteService } from '$lib/AppwriteService';
 2 | import type { PageServerLoad } from './$types';
 3 | 
 4 | export const load = (async ({ cookies }) => {
 5 | 	const sessionNames = [
 6 | 		'a_session_' + AppwriteProject.toLowerCase(),
 7 | 		'a_session_' + AppwriteProject.toLowerCase() + '_legacy'
 8 | 	];
 9 | 
10 | 	const hash = cookies.get(sessionNames[0]) ?? cookies.get(sessionNames[1]) ?? '';
11 | 	AppwriteService.setSession(hash);
12 | 
13 | 	let account;
14 | 	try {
15 | 		account = await AppwriteService.getAccount();
16 | 	} catch (err) {
17 | 		account = null;
18 | 	}
19 | 
20 | 	return {
21 | 		account
22 | 	};
23 | }) satisfies PageServerLoad;
24 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { browser } from '$app/environment';
  3 | 	import Card from './Card.svelte';
  4 | 
  5 | 	import type { PageData } from './$types';
  6 | 	import { AppwriteService } from '$lib/AppwriteService';
  7 | 
  8 | 	export let data: PageData;
  9 | 
 10 | 	let isLoading = false;
 11 | 
 12 | 	let modalMessage = '';
 13 | 	let modalType = '';
 14 | 	const dialog: any = browser ? document.getElementById('dialog') : null;
 15 | 
 16 | 	async function onCreateSession() {
 17 | 		isLoading = true;
 18 | 		try {
 19 | 			const res = await fetch('/login', {
 20 | 				method: 'POST',
 21 | 				body: ''
 22 | 			});
 23 | 
 24 | 			modalType = 'success';
 25 | 			modalMessage =
 26 | 				'Session created! Refresh page to run SSR check, or re-fetch to run CSR cehck.';
 27 | 			dialog.showModal();
 28 | 		} catch (err: any) {
 29 | 			modalType = 'error';
 30 | 			modalMessage = err.message;
 31 | 			dialog.showModal();
 32 | 		} finally {
 33 | 			isLoading = false;
 34 | 		}
 35 | 	}
 36 | 
 37 | 	async function onDeleteSession() {
 38 | 		isLoading = true;
 39 | 		try {
 40 | 			await AppwriteService.signOut();
 41 | 
 42 | 			modalType = 'success';
 43 | 			modalMessage =
 44 | 				'Session deleted! Refresh page to run SSR check, or re-fetch to run CSR cehck.';
 45 | 			dialog.showModal();
 46 | 		} catch (err: any) {
 47 | 			modalType = 'error';
 48 | 			modalMessage = err.message;
 49 | 			dialog.showModal();
 50 | 		} finally {
 51 | 			isLoading = false;
 52 | 		}
 53 | 	}
 54 | </script>
 55 | 
 56 | <main class="main-content">
 57 | 	<div class="top-cover u-padding-block-end-56">
 58 | 		<div class="container">
 59 | 			<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
 60 | 				<h1 class="heading-level-1">Appwrite Loves Svelte Kit</h1>
 61 | 				<code class="u-un-break-text" />
 62 | 			</div>
 63 | 			<p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem;">
 64 | 				This is demo application. Use button below to create account. Notice both server-side
 65 | 				rendering, and client-side requests are authorized. The whole process uses 1st party secure
 66 | 				cookies.
 67 | 			</p>
 68 | 		</div>
 69 | 	</div>
 70 | 	<div class="container u-margin-block-start-negative-56">
 71 | 		<ul
 72 | 			class="grid-box"
 73 | 			style="--grid-gap:2rem; --grid-item-size:24rem; --grid-item-size-small-screens:16rem;"
 74 | 		>
 75 | 			<li>
 76 | 				<Card isCsr={false} account={data.account} />
 77 | 			</li>
 78 | 			<li>
 79 | 				<Card isCsr={true} />
 80 | 			</li>
 81 | 		</ul>
 82 | 	</div>
 83 | 	<div class="container">
 84 | 		<div class="gradient-border">
 85 | 			<article
 86 | 				class="card u-grid u-cross-center u-width-full-line common-section"
 87 | 				style="
 88 |     background: linear-gradient(180deg, hsl(var(--p-card-bg-color)) 0%, hsl(var(--p-card-bg-color)) 12%, hsl(var(--p-body-bg-color)) 100%);
 89 |     border: none;
 90 | "
 91 | 			>
 92 | 				<div
 93 | 					class="u-flex u-flex-vertical u-cross-center u-gap-32 u-margin-block-start-40 u-padding-block-end-56"
 94 | 				>
 95 | 					<div class="u-text-center">
 96 | 						<h2 class="heading-level-3">Manage Authorization</h2>
 97 | 						<p class="body-text-2 u-bold u-margin-block-start-8">
 98 | 							This component is not aware of auth status.
 99 | 						</p>
100 | 					</div>
101 | 					<div class="u-flex u-gap-16 u-main-center u-flex-vertical-mobile u-cross-center">
102 | 						{#if isLoading}
103 | 							<div class="loader" />
104 | 						{:else}
105 | 							<form on:submit|preventDefault={onCreateSession}>
106 | 								<button class="button" type="submit">Create Anonymous Account</button>
107 | 							</form>
108 | 
109 | 							<form on:submit|preventDefault={onDeleteSession}>
110 | 								<button class="button is-secondary" type="submit">Sign Out</button>
111 | 							</form>
112 | 						{/if}
113 | 					</div>
114 | 				</div>
115 | 			</article>
116 | 		</div>
117 | 		<div class="u-margin-block-end-50" />
118 | 	</div>
119 | </main>
120 | 
121 | <div>
122 | 	<dialog class="modal is-small" id="dialog">
123 | 		<form class="modal-form" method="dialog">
124 | 			<header class="modal-header u-flex u-gap-12 u-cross-center" style="flex-direction: row;">
125 | 				{#if modalType === 'error'}
126 | 					<div class="avatar is-color-orange is-medium">
127 | 						<span class="icon-exclamation" aria-hidden="true" />
128 | 					</div>
129 | 					<h4 class="modal-title heading-level-5">Error 🚨</h4>
130 | 				{:else}
131 | 					<div class="avatar is-color-green is-medium">
132 | 						<span class="icon-check" aria-hidden="true" />
133 | 					</div>
134 | 					<h4 class="modal-title heading-level-5">Success 🎉</h4>
135 | 				{/if}
136 | 			</header>
137 | 			<div class="modal-content u-small">{modalMessage}</div>
138 | 			<div class="modal-footer">
139 | 				<div class="u-flex u-main-end u-gap-16">
140 | 					<button
141 | 						on:click={() => {
142 | 							modalMessage = '';
143 | 							modalType = '';
144 | 							dialog.close();
145 | 						}}
146 | 						class="button is-secondary"
147 | 					>
148 | 						<span class="text">Close</span>
149 | 					</button>
150 | 				</div>
151 | 			</div>
152 | 		</form>
153 | 	</dialog>
154 | </div>
155 | 


--------------------------------------------------------------------------------
/src/routes/Card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AppwriteService } from '$lib/AppwriteService';
 3 | 	import type { Models } from 'appwrite';
 4 | 	export let account: undefined | null | true | Models.User<any> = undefined;
 5 | 	export let isCsr = false;
 6 | 
 7 | 	async function fetchAccount() {
 8 | 		account = true;
 9 | 
10 | 		try {
11 | 			account = await AppwriteService.getAccount();
12 | 		} catch (err: any) {
13 | 			account = null;
14 | 		}
15 | 	}
16 | </script>
17 | 
18 | <div
19 | 	class={`card ${
20 | 		account === undefined || account === true
21 | 			? 'card-is-pending'
22 | 			: account === null
23 | 			? 'card-is-failed'
24 | 			: 'card-is-complete'
25 | 	}`}
26 | >
27 | 	<div class="u-flex u-main-space-between u-cross-center">
28 | 		<div class="">
29 | 			<div class="eyebrow-heading-3">{isCsr ? 'Client' : 'Server'} Side</div>
30 | 		</div>
31 | 
32 | 		<div style:opacity={isCsr ? '100%' : '0%'}>
33 | 			<div class="status">
34 | 				<button on:click={fetchAccount} class="tag">
35 | 					<span class="text">Fetch</span>
36 | 				</button>
37 | 			</div>
38 | 		</div>
39 | 	</div>
40 | 
41 | 	<h2 class="heading-level-6 u-margin-block-start-2">
42 | 		{#if account === undefined}
43 | 			Not Fetched Yet.
44 | 		{:else if account === null}
45 | 			You are not signed in.
46 | 		{:else if account === true}
47 | 			Fetching Account...
48 | 		{:else}
49 | 			Welcome <code class="u-un-break-text inline-code">{account.$id}</code>
50 | 		{/if}
51 | 	</h2>
52 | 
53 | 	<div class="u-flex u-main-space-between u-cross-end u-margin-block-start-40">
54 | 		{#if account === undefined || account === true || account === null}
55 | 			<div
56 | 				style="--p-avatar-border-color: var(--color-neutral-120)"
57 | 				class="avatar is-color-empty"
58 | 			/>
59 | 		{:else}
60 | 			<div class="avatar">
61 | 				<img src={AppwriteService.getAccountPicture(account.$id)} alt="Avatar" />
62 | 			</div>
63 | 		{/if}
64 | 		<div
65 | 			class={`status ${
66 | 				account === undefined || account === true
67 | 					? 'is-pending'
68 | 					: account === null
69 | 					? 'is-failed'
70 | 					: 'is-complete'
71 | 			}`}
72 | 		>
73 | 			<span class="status-icon" />
74 | 		</div>
75 | 	</div>
76 | </div>
77 | 


--------------------------------------------------------------------------------
/src/routes/login/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail } from '@sveltejs/kit';
 2 | import {
 3 | 	AppwriteEndpoint,
 4 | 	AppwriteProject,
 5 | 	SsrHostname,
 6 | 	AppwriteHostname
 7 | } from '$lib/AppwriteService';
 8 | import type { Actions } from './$types';
 9 | import * as setCookie from 'set-cookie-parser';
10 | 
11 | export const actions = {
12 | 	default: async ({ fetch, cookies }) => {
13 | 		try {
14 | 			const response = await fetch(`${AppwriteEndpoint}/account/sessions/anonymous`, {
15 | 				method: 'POST',
16 | 				headers: {
17 | 					'x-appwrite-project': AppwriteProject
18 | 				}
19 | 			});
20 | 
21 | 			const json = await response.json();
22 | 
23 | 			if (json.code >= 400) {
24 | 				return fail(400, { message: json.message });
25 | 			}
26 | 
27 | 			const ssrHostname = SsrHostname === 'localhost' ? SsrHostname : '.' + SsrHostname;
28 | 			const appwriteHostname =
29 | 				AppwriteHostname === 'localhost' ? AppwriteHostname : '.' + AppwriteHostname;
30 | 
31 | 			const cookiesStr = (response.headers.get('set-cookie') ?? '')
32 | 				.split(appwriteHostname)
33 | 				.join(ssrHostname);
34 | 
35 | 			const cookiesArray = setCookie.splitCookiesString(cookiesStr);
36 | 			const cookiesParsed = cookiesArray.map((cookie) => setCookie.parseString(cookie));
37 | 
38 | 			for (const cookie of cookiesParsed) {
39 | 				cookies.set(cookie.name, cookie.value, {
40 | 					domain: cookie.domain,
41 | 					secure: cookie.secure,
42 | 					sameSite: cookie.sameSite as any,
43 | 					path: cookie.path,
44 | 					maxAge: cookie.maxAge,
45 | 					httpOnly: cookie.httpOnly,
46 | 					expires: cookie.expires
47 | 				});
48 | 			}
49 | 
50 | 			return json;
51 | 		} catch (err: any) {
52 | 			return fail(400, { message: err.message });
53 | 		}
54 | 	}
55 | } satisfies Actions;
56 | 


--------------------------------------------------------------------------------
/static/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/static/cover.png


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/static/favicon.png


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="130" height="30" viewBox="0 0 130 30" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M25.3353 16.2281C25.3353 20.7653 21.6569 24.4434 17.1192 24.4434C15.0115 24.4434 13.0894 23.6497 11.6349 22.3453C13.9649 21.2964 15.5869 18.9546 15.5869 16.2341C15.5869 13.5099 13.9608 11.1657 11.626 10.1188C13.0817 8.80967 15.0072 8.01288 17.1192 8.01288C21.6569 8.01288 25.3353 11.691 25.3353 16.2281Z" fill="#F02E65"/>
3 | <path d="M13.8348 9.67066C8.78894 5.85779 1.50716 8.93631 0.727781 15.2122C0.365606 18.129 1.58925 21.017 3.93662 22.7858C8.98529 26.5953 16.2649 23.5114 17.04 17.2349C17.3996 14.3218 16.1778 11.4385 13.8348 9.67058V9.67066ZM12.921 10.8812C17.0376 13.9873 16.2476 20.3843 11.499 22.396C9.29541 23.3296 6.76084 23.0167 4.85039 21.5751C0.733969 18.469 1.52382 12.0719 6.27236 10.0604C8.47602 9.12687 11.0106 9.43968 12.921 10.8812Z" fill="#F02E65"/>
4 | <path d="M9.10575 13.3858C9.09601 13.41 8.9702 13.9034 8.83515 14.4887C8.69465 15.0739 8.47215 15.9977 8.34658 16.5441C8.10461 17.5453 7.95949 18.2031 7.95949 18.29C7.95949 18.3141 8.10956 18.3337 8.29312 18.3337H8.62708L8.77682 17.6661C8.86402 17.3035 9.05765 16.4715 9.21225 15.8186C9.36711 15.1657 9.55554 14.3725 9.62822 14.0531C9.70074 13.7339 9.77334 13.444 9.78786 13.41C9.80238 13.3665 9.72004 13.3522 9.4685 13.3522C9.27982 13.3522 9.11532 13.3665 9.10575 13.3858ZM6.5084 15.4799L6.06348 15.9637L6.19424 16.1185C6.26659 16.2054 6.46517 16.4232 6.63429 16.6023L6.94392 16.9309H7.82427L7.40814 16.4812C7.18069 16.2396 6.9921 16.0072 6.9921 15.9783C6.9921 15.9444 7.16625 15.7269 7.37927 15.4946C7.59195 15.2578 7.76611 15.0544 7.76611 15.0303C7.76611 15.0108 7.58238 14.9964 7.35996 14.9964H6.95844L6.5084 15.4799ZM9.89403 15.0254C9.89403 15.04 9.97637 15.1317 10.0778 15.2333C10.4554 15.6106 10.7213 15.93 10.7067 15.9926C10.6972 16.0267 10.5132 16.2539 10.2908 16.4908L9.88941 16.9309H10.3391L10.7889 16.9262L11.1998 16.4763C11.4275 16.225 11.6112 16.0022 11.6112 15.9734C11.6112 15.9493 11.4177 15.7219 11.1758 15.4657L10.7408 14.9964H10.3197C10.0827 14.9964 9.89403 15.0108 9.89403 15.0254Z" fill="#F02E65"/>
5 | <path d="M30.195 16.48C30.195 15.36 30.4216 14.38 30.875 13.54C31.3283 12.6867 31.9483 12.0267 32.735 11.56C33.535 11.0933 34.4216 10.86 35.395 10.86C36.355 10.86 37.1883 11.0667 37.895 11.48C38.6016 11.8933 39.1283 12.4133 39.475 13.04V11.04H41.315V22H39.475V19.96C39.115 20.6 38.575 21.1333 37.855 21.56C37.1483 21.9733 36.3216 22.18 35.375 22.18C34.4016 22.18 33.5216 21.94 32.735 21.46C31.9483 20.98 31.3283 20.3067 30.875 19.44C30.4216 18.5733 30.195 17.5867 30.195 16.48ZM39.475 16.5C39.475 15.6733 39.3083 14.9533 38.975 14.34C38.6416 13.7267 38.1883 13.26 37.615 12.94C37.055 12.6067 36.435 12.44 35.755 12.44C35.075 12.44 34.455 12.6 33.895 12.92C33.335 13.24 32.8883 13.7067 32.555 14.32C32.2216 14.9333 32.055 15.6533 32.055 16.48C32.055 17.32 32.2216 18.0533 32.555 18.68C32.8883 19.2933 33.335 19.7667 33.895 20.1C34.455 20.42 35.075 20.58 35.755 20.58C36.435 20.58 37.055 20.42 37.615 20.1C38.1883 19.7667 38.6416 19.2933 38.975 18.68C39.3083 18.0533 39.475 17.3267 39.475 16.5ZM46.2106 7.2V22H44.3906V7.2H46.2106ZM62.4925 10.84C63.3458 10.84 64.1058 11.02 64.7725 11.38C65.4391 11.7267 65.9658 12.2533 66.3525 12.96C66.7391 13.6667 66.9325 14.5267 66.9325 15.54V22H65.1325V15.8C65.1325 14.7067 64.8591 13.8733 64.3125 13.3C63.7791 12.7133 63.0525 12.42 62.1325 12.42C61.1858 12.42 60.4325 12.7267 59.8725 13.34C59.3125 13.94 59.0325 14.8133 59.0325 15.96V22H57.2325V15.8C57.2325 14.7067 56.9591 13.8733 56.4125 13.3C55.8791 12.7133 55.1525 12.42 54.2325 12.42C53.2858 12.42 52.5325 12.7267 51.9725 13.34C51.4125 13.94 51.1325 14.8133 51.1325 15.96V22H49.3125V11.04H51.1325V12.62C51.4925 12.0467 51.9725 11.6067 52.5725 11.3C53.1858 10.9933 53.8591 10.84 54.5925 10.84C55.5125 10.84 56.3258 11.0467 57.0325 11.46C57.7391 11.8733 58.2658 12.48 58.6125 13.28C58.9191 12.5067 59.4258 11.9067 60.1325 11.48C60.8391 11.0533 61.6258 10.84 62.4925 10.84ZM74.6979 22.18C73.6713 22.18 72.7379 21.9467 71.8979 21.48C71.0713 21.0133 70.4179 20.3533 69.9379 19.5C69.4713 18.6333 69.2379 17.6333 69.2379 16.5C69.2379 15.38 69.4779 14.3933 69.9579 13.54C70.4513 12.6733 71.1179 12.0133 71.9579 11.56C72.7979 11.0933 73.7379 10.86 74.7779 10.86C75.8179 10.86 76.7579 11.0933 77.5979 11.56C78.4379 12.0133 79.0979 12.6667 79.5779 13.52C80.0713 14.3733 80.3179 15.3667 80.3179 16.5C80.3179 17.6333 80.0646 18.6333 79.5579 19.5C79.0646 20.3533 78.3913 21.0133 77.5379 21.48C76.6846 21.9467 75.7379 22.18 74.6979 22.18ZM74.6979 20.58C75.3513 20.58 75.9646 20.4267 76.5379 20.12C77.1113 19.8133 77.5713 19.3533 77.9179 18.74C78.2779 18.1267 78.4579 17.38 78.4579 16.5C78.4579 15.62 78.2846 14.8733 77.9379 14.26C77.5913 13.6467 77.1379 13.1933 76.5779 12.9C76.0179 12.5933 75.4113 12.44 74.7579 12.44C74.0913 12.44 73.4779 12.5933 72.9179 12.9C72.3713 13.1933 71.9313 13.6467 71.5979 14.26C71.2646 14.8733 71.0979 15.62 71.0979 16.5C71.0979 17.3933 71.2579 18.1467 71.5779 18.76C71.9113 19.3733 72.3513 19.8333 72.8979 20.14C73.4446 20.4333 74.0446 20.58 74.6979 20.58ZM86.5909 22.18C85.7509 22.18 84.9976 22.04 84.3309 21.76C83.6642 21.4667 83.1376 21.0667 82.7509 20.56C82.3642 20.04 82.1509 19.4467 82.1109 18.78H83.9909C84.0442 19.3267 84.2976 19.7733 84.7509 20.12C85.2176 20.4667 85.8242 20.64 86.5709 20.64C87.2642 20.64 87.8109 20.4867 88.2109 20.18C88.6109 19.8733 88.8109 19.4867 88.8109 19.02C88.8109 18.54 88.5976 18.1867 88.1709 17.96C87.7442 17.72 87.0842 17.4867 86.1909 17.26C85.3776 17.0467 84.7109 16.8333 84.1909 16.62C83.6842 16.3933 83.2442 16.0667 82.8709 15.64C82.5109 15.2 82.3309 14.6267 82.3309 13.92C82.3309 13.36 82.4976 12.8467 82.8309 12.38C83.1642 11.9133 83.6376 11.5467 84.2509 11.28C84.8642 11 85.5642 10.86 86.3509 10.86C87.5642 10.86 88.5442 11.1667 89.2909 11.78C90.0376 12.3933 90.4376 13.2333 90.4909 14.3H88.6709C88.6309 13.7267 88.3976 13.2667 87.9709 12.92C87.5576 12.5733 86.9976 12.4 86.2909 12.4C85.6376 12.4 85.1176 12.54 84.7309 12.82C84.3442 13.1 84.1509 13.4667 84.1509 13.92C84.1509 14.28 84.2642 14.58 84.4909 14.82C84.7309 15.0467 85.0242 15.2333 85.3709 15.38C85.7309 15.5133 86.2242 15.6667 86.8509 15.84C87.6376 16.0533 88.2776 16.2667 88.7709 16.48C89.2642 16.68 89.6842 16.9867 90.0309 17.4C90.3909 17.8133 90.5776 18.3533 90.5909 19.02C90.5909 19.62 90.4242 20.16 90.0909 20.64C89.7576 21.12 89.2842 21.5 88.6709 21.78C88.0709 22.0467 87.3776 22.18 86.5909 22.18ZM95.3801 12.54V19C95.3801 19.5333 95.4935 19.9133 95.7201 20.14C95.9468 20.3533 96.3401 20.46 96.9001 20.46H98.2401V22H96.6001C95.5868 22 94.8268 21.7667 94.3201 21.3C93.8135 20.8333 93.5601 20.0667 93.5601 19V12.54H92.1401V11.04H93.5601V8.28H95.3801V11.04H98.2401V12.54H95.3801ZM104.525 22.18C103.619 22.18 102.805 22.02 102.085 21.7C101.365 21.3667 100.792 20.92 100.365 20.36C99.9519 19.8 99.7253 19.18 99.6853 18.5H102.505C102.559 18.9267 102.765 19.28 103.125 19.56C103.499 19.84 103.959 19.98 104.505 19.98C105.039 19.98 105.452 19.8733 105.745 19.66C106.052 19.4467 106.205 19.1733 106.205 18.84C106.205 18.48 106.019 18.2133 105.645 18.04C105.285 17.8533 104.705 17.6533 103.905 17.44C103.079 17.24 102.399 17.0333 101.865 16.82C101.345 16.6067 100.892 16.28 100.505 15.84C100.132 15.4 99.9453 14.8067 99.9453 14.06C99.9453 13.4467 100.119 12.8867 100.465 12.38C100.825 11.8733 101.332 11.4733 101.985 11.18C102.652 10.8867 103.432 10.74 104.325 10.74C105.645 10.74 106.699 11.0733 107.485 11.74C108.272 12.3933 108.705 13.28 108.785 14.4H106.105C106.065 13.96 105.879 13.6133 105.545 13.36C105.225 13.0933 104.792 12.96 104.245 12.96C103.739 12.96 103.345 13.0533 103.065 13.24C102.799 13.4267 102.665 13.6867 102.665 14.02C102.665 14.3933 102.852 14.68 103.225 14.88C103.599 15.0667 104.179 15.26 104.965 15.46C105.765 15.66 106.425 15.8667 106.945 16.08C107.465 16.2933 107.912 16.6267 108.285 17.08C108.672 17.52 108.872 18.1067 108.885 18.84C108.885 19.48 108.705 20.0533 108.345 20.56C107.999 21.0667 107.492 21.4667 106.825 21.76C106.172 22.04 105.405 22.18 104.525 22.18ZM115.424 22.18C114.517 22.18 113.704 22.02 112.984 21.7C112.264 21.3667 111.69 20.92 111.264 20.36C110.85 19.8 110.624 19.18 110.584 18.5H113.404C113.457 18.9267 113.664 19.28 114.024 19.56C114.397 19.84 114.857 19.98 115.404 19.98C115.937 19.98 116.35 19.8733 116.644 19.66C116.95 19.4467 117.104 19.1733 117.104 18.84C117.104 18.48 116.917 18.2133 116.544 18.04C116.184 17.8533 115.604 17.6533 114.804 17.44C113.977 17.24 113.297 17.0333 112.764 16.82C112.244 16.6067 111.79 16.28 111.404 15.84C111.03 15.4 110.844 14.8067 110.844 14.06C110.844 13.4467 111.017 12.8867 111.364 12.38C111.724 11.8733 112.23 11.4733 112.884 11.18C113.55 10.8867 114.33 10.74 115.224 10.74C116.544 10.74 117.597 11.0733 118.384 11.74C119.17 12.3933 119.604 13.28 119.684 14.4H117.004C116.964 13.96 116.777 13.6133 116.444 13.36C116.124 13.0933 115.69 12.96 115.144 12.96C114.637 12.96 114.244 13.0533 113.964 13.24C113.697 13.4267 113.564 13.6867 113.564 14.02C113.564 14.3933 113.75 14.68 114.124 14.88C114.497 15.0667 115.077 15.26 115.864 15.46C116.664 15.66 117.324 15.8667 117.844 16.08C118.364 16.2933 118.81 16.6267 119.184 17.08C119.57 17.52 119.77 18.1067 119.784 18.84C119.784 19.48 119.604 20.0533 119.244 20.56C118.897 21.0667 118.39 21.4667 117.724 21.76C117.07 22.04 116.304 22.18 115.424 22.18ZM124.882 12.64C125.242 12.0533 125.709 11.5933 126.282 11.26C126.869 10.9267 127.535 10.76 128.282 10.76V13.7H127.542C126.662 13.7 125.995 13.9067 125.542 14.32C125.102 14.7333 124.882 15.4533 124.882 16.48V22H122.082V10.92H124.882V12.64Z" fill="#F02E65"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/static/matej.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/static/matej.webp


--------------------------------------------------------------------------------
/static/matus.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meldiron/appwrite-ssr-svelte-kit/efde3d0cd9c3b52d5233bce27a20e3346f15aead/static/matus.webp


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/kit/vite';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------