From 82725fd7cdb383161b52dd3d0fd7d0f65532a938 Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Sat, 30 Sep 2023 15:34:37 +0000 Subject: [PATCH 1/3] Add Thomas's svelte auth guide --- src/routes/docs/tutorials/+page.svelte | 20 ++++- .../tutorials/sveltekit-auth/+layout.svelte | 10 +++ .../docs/tutorials/sveltekit-auth/+layout.ts | 11 +++ .../docs/tutorials/sveltekit-auth/+page.ts | 6 ++ .../sveltekit-auth/step-1/+page.markdoc | 18 ++++ .../sveltekit-auth/step-2/+page.markdoc | 52 ++++++++++++ .../sveltekit-auth/step-3/+page.markdoc | 46 ++++++++++ .../sveltekit-auth/step-4/+page.markdoc | 64 ++++++++++++++ .../sveltekit-auth/step-5/+page.markdoc | 83 +++++++++++++++++++ .../sveltekit-auth/step-6/+page.markdoc | 68 +++++++++++++++ .../sveltekit-auth/step-7/+page.markdoc | 11 +++ 11 files changed, 387 insertions(+), 2 deletions(-) create mode 100644 src/routes/docs/tutorials/sveltekit-auth/+layout.svelte create mode 100644 src/routes/docs/tutorials/sveltekit-auth/+layout.ts create mode 100644 src/routes/docs/tutorials/sveltekit-auth/+page.ts create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-1/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-2/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-3/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-5/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-6/+page.markdoc create mode 100644 src/routes/docs/tutorials/sveltekit-auth/step-7/+page.markdoc diff --git a/src/routes/docs/tutorials/+page.svelte b/src/routes/docs/tutorials/+page.svelte index 8306de8aff..730d358369 100644 --- a/src/routes/docs/tutorials/+page.svelte +++ b/src/routes/docs/tutorials/+page.svelte @@ -30,14 +30,14 @@
-

Platforms

+

Tutorials

-

Client

+

Platforms

+
+

Authentication

+ +
diff --git a/src/routes/docs/tutorials/sveltekit-auth/+layout.svelte b/src/routes/docs/tutorials/sveltekit-auth/+layout.svelte new file mode 100644 index 0000000000..fb9fb3980f --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/+layout.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/routes/docs/tutorials/sveltekit-auth/+layout.ts b/src/routes/docs/tutorials/sveltekit-auth/+layout.ts new file mode 100644 index 0000000000..562b11506f --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/+layout.ts @@ -0,0 +1,11 @@ +import type { LayoutLoad } from './$types'; + +export const load: LayoutLoad = ({ url }) => { + const tutorials = import.meta.glob('./**/*.markdoc', { + eager: true + }); + return { + tutorials, + pathname: url.pathname + }; +}; diff --git a/src/routes/docs/tutorials/sveltekit-auth/+page.ts b/src/routes/docs/tutorials/sveltekit-auth/+page.ts new file mode 100644 index 0000000000..1ad2b05f29 --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/+page.ts @@ -0,0 +1,6 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async () => { + throw redirect(303, '/docs/tutorials/sveltekit-auth/step-1'); +}; diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-1/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-1/+page.markdoc new file mode 100644 index 0000000000..2f0445231a --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-1/+page.markdoc @@ -0,0 +1,18 @@ +--- +layout: tutorial +title: Authentication with SvelteKit +description: Add Authentication to a SvelteKit project using Appwrite. +step: 1 +difficulty: beginner +readtime: 20 +--- + +Appwrite takes away your stress of building and maintaining a backend. Appwrite helps you implement authentication, databases, file storage, and respond to real-time events with **secure** APIs out of the box. +If you're a Svelte developer, examples in this guide shows you how Appwrite can help you add authentication to Svelte apps faster. + +## Before you start + +Even if you've never tried Appwrite, you will get an idea of what it'll feel like to build with Svelte and Appwrite. + +If you're inspired and wish to follow along, make sure you've followed [Start with Svelte](https://appwrite.io/docs/quick-starts/sveltekit) first. +You can also choose to clone our [Getting started](https://github.com/appwrite/getting-started-projects/tree/main/svelte) examples and follow along by looking at our example code. \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-2/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-2/+page.markdoc new file mode 100644 index 0000000000..8dad1a7364 --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-2/+page.markdoc @@ -0,0 +1,52 @@ +--- +layout: tutorial +title: Create project +description: Add Authentication to a SvelteKit project using Appwrite. +step: 2 +--- + + +You can create a Svelte project using [SvelteKit](https://kit.svelte.dev/docs/creating-a-project). + +```sh +npm create svelte@latest +``` + +The command will give you a prompt with several project types. We'll be starting with a skeleton project. + +The prompt will be something similar to this. + +```sh +create-svelte version 3.2.0 + +┌ Welcome to SvelteKit! +│ +◇ Where should we create your project? +│ my-svelte-project +│ +◇ Which Svelte app template? +│ Skeleton project +│ +◇ Add type checking with TypeScript? +│ Yes, using JavaScript with JSDoc comments +│ +◇ Select additional options (use arrow keys/space bar) +│ Add ESLint for code linting +│ +└ Your project is ready! +``` + +After the prompt is finished, you can head over to the newly create project. + +```sh +cd my-svelte-project +npm install +``` + +## Adding Appwrite to Your Svelte App + +Appwrite provides a Web SDK that can be used in your Svelte apps. You can use Appwrite by installing the Web SDK as an NPM package. + +```sh +npm install appwrite +``` \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-3/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-3/+page.markdoc new file mode 100644 index 0000000000..8b3eb0e4be --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-3/+page.markdoc @@ -0,0 +1,46 @@ +--- +layout: tutorial +title: Initialize SDK +description: Add Authentication to a SvelteKit project using Appwrite. +step: 3 +--- +Before you can use Appwrite, you need to instanciate the Appwrite `Client` class with the project ID and endpoint. +This tells the SDK where your Appwrite project is hosted and which one to connect to. + +The client is then used to initialize services like `Databases` and `Account`, so they all point to the same Appwrite project. + +You can do this by instantiating the services you need in a file like `src/lib/appwrite.js` and **exporting the instances**. + +```js +// src/lib/appwrite.js +import { + PUBLIC_APPWRITE_ENDPOINT, + PUBLIC_APPWRITE_PROJECT, +} from "$env/static/public"; +import { Databases, Account, Client } from "appwrite"; + +const client = new Client(); +client + .setEndpoint(PUBLIC_APPWRITE_ENDPOINT) + .setProject(PUBLIC_APPWRITE_PROJECT); + +const account = new Account(client); +const databases = new Databases(client); + +export const appwrite = { + client, + account, + databases, +}; +``` + +`PUBLIC_APPWRITE_ENDPOINT` and `PUBLIC_APPWRITE_PROJECT` 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. + +```text +PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1 +PUBLIC_APPWRITE_PROJECT=642sdddf85b440dc7e5bf +``` + +You can get the values for these variables from the Appwrite console's **Settings** page. \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc new file mode 100644 index 0000000000..b263612284 --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc @@ -0,0 +1,64 @@ +--- +layout: tutorial +title: Check if logged in +description: Add Authentication to a SvelteKit project using Appwrite. +step: 4 +--- + +Before taking a user to the login screen, we should check if they're already logged in. +With SvelteKit, you can use the `load` function to check if you're logged in before your app renders. + +```js +// src/routes/+layout.js +import { appwrite } from "$lib/appwrite"; + +// Turn off SSR globally, turning the project into a static site +export const ssr = false; + +export const load = async () => { + try { + return { + account: await appwrite.account.get(), + }; + } catch { + return { + account: null, + }; + } +}; +``` + +By returning the account data in the root layout, it is globally available to all pages, **before any page is displayed** to the user. +If we find the user is not logged in, we can redirect them to log in first. + +We can get the returned data in the root page by using the `data` prop: + +```html + + + +{#if loggedIn} +

Hello {data.account?.name}!

+ +{:else} + Login + Signup +{/if} +``` + +Normally, you'll want to use the `invalidate` method instead of `invalidateAll`, to avoid fetching data that you don't need to. +You can refer to the [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) for more information on invalidation. \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-5/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-5/+page.markdoc new file mode 100644 index 0000000000..a26609bc27 --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-5/+page.markdoc @@ -0,0 +1,83 @@ +--- +layout: tutorial +title: Create login page +description: Add Authentication to a SvelteKit project using Appwrite. +step: 5 +--- + +We can now implement our login page. Create a `+page.js` file in the `src/routes/login` directory: + +```js +// src/routes/login/+page.js +import { redirect } from "@sveltejs/kit"; + +export const load = async ({ parent }) => { + // Gets the data returned from the root layout + const { account } = await parent(); + if (account) { + throw redirect(303, "/"); + } +}; +``` + +You can see that we added a redirect in the login page to check if the user's already logged in, in which case we redirect them to the homepage. + +Now we just need to create a form to let the user input sign in data. + +```html + + + +
+ + + + + + {#if formError} +

{formError}

+ {/if} +
+``` + +And that's it. When the user successfully logs in, we use `invalidateAll` to re-run the relevant `load` functions. In this case, the functions inside `src/routes/login/+page.js` and `src/routes/+layout.js`. +This means that the `account` data will be updated, no longer being `null`, and so the login `load` function will redirect the user to the home page. diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-6/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-6/+page.markdoc new file mode 100644 index 0000000000..188318729c --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-6/+page.markdoc @@ -0,0 +1,68 @@ +--- +layout: tutorial +title: Create signup page +description: Add Authentication to a SvelteKit project using Appwrite. +step: 6 +--- + +For signup, you can copy the login `+page.js` and `+page.svelte` files into `src/routes/signup`, with some small changes to the `+page.svelte` file: + +```html + + + +
+ + + + + + + + {#if formError} +

{formError}

+ {/if} +
+``` +With this, you have a simple authentication system! diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-7/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-7/+page.markdoc new file mode 100644 index 0000000000..2b3ac61f5c --- /dev/null +++ b/src/routes/docs/tutorials/sveltekit-auth/step-7/+page.markdoc @@ -0,0 +1,11 @@ +--- +layout: tutorial +title: All set +description: Add Authentication to a SvelteKit project using Appwrite. +step: 7 +--- +If you want to see these authentication concepts applied in a more robust manner, you can see them in action in this [demo app](https://github.com/appwrite/getting-started-projects/tree/main/svelte/auth). + +## Other authentication methods +Appwrite also supports OAuth, passwordless login, anonymous login, and phone login. +Learn more about them in the [authentication guide](https://appwrite.io/docs/products/auth). From 609159b37596272a7ff1e4efbccd793e24ab660c Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Fri, 6 Oct 2023 21:04:01 +0000 Subject: [PATCH 2/3] Fix html -> svelte --- .../docs/tutorials/sveltekit-auth/step-4/+page.markdoc | 2 +- .../docs/tutorials/sveltekit-auth/step-5/+page.markdoc | 2 +- .../docs/tutorials/sveltekit-auth/step-6/+page.markdoc | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc b/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc index b263612284..6ffb6545f9 100644 --- a/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit-auth/step-4/+page.markdoc @@ -33,7 +33,7 @@ If we find the user is not logged in, we can redirect them to log in first. We can get the returned data in the root page by using the `data` prop: -```html +```svelte