---
layout: article
title: Start with TanStack Start
description: Learn how to use Appwrite to add authentication, user management, file storage, and more to your TanStack Start apps.
difficulty: beginner
readtime: 3
back: /docs/quick-starts
---
Learn how to setup your first TanStack Start project powered by Appwrite.
{% section #step-1 step=1 title="Create project" %}
Head to the [Appwrite Console](https://cloud.appwrite.io/console).

{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.avif)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.avif)
{% /only_light %}

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`.

{% info title="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).
{% /info %}


{% only_dark %}
![Add a platform](/images/docs/quick-starts/dark/add-platform.avif)
{% /only_dark %}
{% only_light %}
![Add a platform](/images/docs/quick-starts/add-platform.avif)
{% /only_light %}

You can skip optional steps.

{% /section %}
{% section #step-2 step=2 title="Create TanStack Start project" %}
Create a TanStack Start project.

```sh
npm create @tanstack/start@latest my-app && cd my-app
```
{% /section %}
{% section #step-3 step=3 title="Install Appwrite" %}

Install the JavaScript Appwrite SDK.

```sh
npm install appwrite
```
{% /section %}
{% section #step-4 step=4 title="Import Appwrite" %}
Find your project's ID in the **Settings** page.

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

```client-web
import { Client, Account, ID, Models } 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 };
export type { Models };
```
{% /section %}
{% section #step-5 step=5 title="Create a login page" %}
Create or update `src/routes/index.tsx` with the following code.

```tsx
import { useState } from 'react';
import { createFileRoute } from '@tanstack/react-router';
import { account, ID, type Models } from '../utils/appwrite';

export const Route = createFileRoute('/')({
    component: Index,
});

function Index() {
    const [loggedInUser, setLoggedInUser] = useState<Models.User<Models.Preferences> | null>(null);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');

    async function login(email: string, password: string) {
        await account.createEmailPasswordSession({
            email,
            password,
        });
        setLoggedInUser(await account.get());
    }

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

    async function logout() {
        await account.deleteSession({ sessionId: 'current' });
        setLoggedInUser(null);
    }

    if (loggedInUser) {
        return (
            <div>
                <p>Logged in as {loggedInUser.name}</p>
                <button type="button" onClick={logout}>
                    Logout
                </button>
            </div>
        );
    }

    return (
        <div>
            <p>Not logged in</p>
            <form>
                <input
                    type="email"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <input
                    type="text"
                    placeholder="Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <button type="button" onClick={() => login(email, password)}>
                    Login
                </button>
                <button type="button" onClick={register}>
                    Register
                </button>
            </form>
        </div>
    );
}
```
{% /section %}

{% section #step-6 step=6 title="All set" %}
Run your project with `npm run dev` and open [localhost on port 3000](http://localhost:3000) in your browser.
{% /section %}