Start with TanStack Start - Docs

Learn how to setup your first TanStack Start project powered by Appwrite.

Create project

Create project screen

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.

Add a platform

You can skip optional steps.

Create TanStack Start project

Create a TanStack Start project.

Shell

npm create @tanstack/start@latest my-app && cd my-app

Install Appwrite

Install the JavaScript Appwrite SDK.

Shell

npm install appwrite

Import Appwrite

Find your project's ID in the Settings page.

Project settings screen

Create a new file src/utils/appwrite.ts and add the following code to it, replace <PROJECT_ID> with your project ID.

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 };

Create a login page

Create or update src/routes/index.tsx with the following code.

React

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>
    );
}

All set

Run your project with npm run dev and open localhost on port 3000 in your browser.

Was this page helpful?

Update on GitHub

Cross-Origin Resource Sharing (CORS)

Recommended