---
layout: article
title: Start with SvelteKit
description: Learn how to use Appwrite to add authentication, user management, file storage, and more to your SvelteKit apps.
difficulty: beginner
readtime: 3
back: /docs/quick-starts
---
Learn how to setup your first SvelteKit project powered by Appwrite.

## 1. Create project

Head to the [Appwrite Console](https://cloud.appwrite.io/console).

![Create project screen](/images/docs/quick-starts/create-project.avif)

If this is your first time using Appwrite, create an account and create your first project.

Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.

**Cross-Origin Resource Sharing (CORS)**

Adding `localhost` as a platform lets your local app talk to Appwrite. For production, add your live domain to avoid CORS errors.

Learn more in our [CORS error guide](/blog/post/cors-error).

![Add a platform](/images/docs/quick-starts/add-platform.avif)

You can skip optional steps.

## 2. Create SvelteKit project

Create a SvelteKit project.

```sh
npx sv create
```

## 3. Install Appwrite

Install the JavaScript Appwrite SDK.

```sh
npm install appwrite
```

## 4. Import Appwrite

Find your project's ID in the **Settings** page.

![Project settings screen](/images/docs/quick-starts/project-id.avif)
Create a new file `src/lib/appwrite.js` and add the following code to it, replace `<PROJECT_ID>` with your project ID.

```client-web
import { Client, Account } from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';
```

## 5. Create a login page

Replace the contents of `src/routes/+page.svelte` with the following code.

```html
<script>
    import { account, ID } from '$lib/appwrite';

    let loggedInUser = null;

    async function login(email, password) {
        await account.createEmailPasswordSession({
            email,
            password
        });
        loggedInUser = await account.get();
    }

    async function register(email, password) {
        await account.create({
            userId: ID.unique(),
            email,
            password
        });
        login(email, password);
    }

    function submit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const type = e.submitter.dataset.type;

        if (type === "login") {
            login(formData.get('email'), formData.get('password'));
        } else if (type === "register") {
            register(formData.get('email'), formData.get('password'));
        }
    }

    async function logout() {
        await account.deleteSession({ sessionId: 'current' });
        loggedInUser = null;
    }
</script>

<p>
    {loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in'}
</p>

<form on:submit={submit}>
    <input type="email" placeholder="Email" name="email" required />
    <input type="password" placeholder="Password" name="password" required />

    <button type="submit" data-type="login">Login</button>
    <button type="submit" data-type="register">Register</button>
</form>

<button on:click={logout}>Logout</button>
```

## 6. All set

Run your project with `npm run dev` and open [localhost on port 5173](http://localhost:5173) in your browser.