Setting Up SvelteKit with Cloudflare Pages, D1 Storage, and OAuth

Published: Aug 4, 2024

In today’s rapidly evolving web development landscape, choosing the right tools and services can significantly impact your application’s efficiency and performance. This guide will walk you through setting up a powerful and modern web application stack using SvelteKit, Cloudflare Pages, D1 storage, and OAuth authentication.

The completed code can be viewed on github.

Let’s break down the key components of our stack:

SvelteKit: A framework for building scalable web applications with a focus on speed and simplicity.
Cloudflare Pages: A JAMstack platform offering fast, secure hosting with continuous deployment from Git.
Cloudflare D1: A serverless SQL database running on Cloudflare’s global network.
OAuth: An open standard for secure authentication, which we’ll implement using GitHub as the provider.

You might be wondering, “Why should I use this particular combination?” Here are some compelling reasons:

Lightning-Fast Performance: SvelteKit’s lean approach, combined with Cloudflare’s global CDN, ensures your app loads in the blink of an eye.
Effortless Scalability: From small projects to large-scale applications, Cloudflare Pages and D1 scale without breaking a sweat.
Developer-Friendly: SvelteKit’s intuitive model and Cloudflare’s streamlined tools make development a breeze.
Rock-Solid Security: OAuth authentication and Cloudflare’s robust security features keep your app and user data safe.
Cost-Effective: Pay only for what you use, thanks to the serverless nature of this stack.

By the end of this tutorial, you’ll know how to:

Set up a SvelteKit project with Cloudflare Pages
Configure and use Cloudflare D1 for data storage
Implement OAuth authentication with GitHub
Connect authentication to D1 for user management
Deploy your application to Cloudflare Pages

Whether you’re building a personal project or a large-scale application, this stack provides a solid foundation for modern, performant web development. Let’s dive in and start building!

Before we dive into the nitty-gritty of setting up our SvelteKit application with Cloudflare Pages, D1 storage, and OAuth, let’s ensure you have everything you need to follow along smoothly.

To get started, you’ll need to set up the following accounts:

Cloudflare Account: If you don’t already have one, head over to Cloudflare’s website and sign up for a free account.
GitHub Account: We’ll be using GitHub for OAuth authentication, so make sure you have a GitHub account. If you don’t, you can create one at GitHub’s signup page.

Ensure you have the following tools installed on your local machine:

Node.js and npm: Our project relies on Node.js and npm (Node Package Manager). Install the latest LTS version from the official Node.js website.

To verify your installation, open your terminal and run:
```
node --version
npm --version
```
Wrangler CLI: Wrangler is Cloudflare’s command-line tool for managing Workers and Pages projects. Install it globally using npm:
```
npm install -g wrangler
```
After installation, verify it’s working:
```
wrangler --version
```

While not strictly necessary, we recommend using a code editor with good TypeScript and Svelte support. Some popular options include:

Visual Studio Code with the Svelte for VS Code extension
WebStorm
Sublime Text with the Svelte plugin

With these prerequisites in place, you’re all set to embark on your journey of building a modern web application with SvelteKit, Cloudflare Pages, D1 storage, and OAuth authentication. In the next section, we’ll start by setting up our SvelteKit project and configuring it for Cloudflare Pages deployment.

Remember, if you encounter any issues during setup, don’t hesitate to consult the official documentation for each tool or reach out to their respective community forums for support.

Alright, folks! It’s time to roll up our sleeves and dive into the exciting part - setting up our SvelteKit project with Cloudflare. Let’s turn those prerequisites into a real, living, breathing web application!

Let’s start by creating our SvelteKit project using Cloudflare’s CLI tool. This process might vary slightly depending on your preferences and any potential issues you might encounter.

Open your terminal and run the following command:

npm create cloudflare@latest my-svelte-app -- --framework=svelte

Follow the prompts to customize your SvelteKit project. You can accept the defaults for now - we can always adjust things later.
Important note: During the setup process, you’ll be asked if you want to deploy to Cloudflare Pages.
- If you prefer to use Git integration with Cloudflare Pages (recommended for better version control), choose “No” at this prompt.
- If you choose “Yes”, the project will be directly uploaded to Cloudflare Pages and you’ll be able to skip the github/cloudflare deployment steps below.
The installation process might freeze for some users after “installing dependencies”. If this happens to you:
- Press CTRL+C to cancel the process
- Navigate to your project directory:
```
cd my-svelte-app
```
- Delete the node_modules folder:
```
rm -rf node_modules
```
- Reinstall the dependencies:
```
npm install
```
If the installation completed successfully without freezing, simply navigate to your new project directory:
```
cd my-svelte-app
```

By following these steps, you’ll have your SvelteKit project set up and ready for further development. If you chose not to deploy directly to Cloudflare Pages, you can set up Git integration later, allowing you to push your code to a Git repository and have Cloudflare Pages automatically deploy from there.

Now that we’ve got our project set up, let’s take a quick tour of what we’re working with. Here’s a bird’s-eye view of our project structure:

my-sveltekit-app/
├── src/
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.html
│   └── app.d.ts
├── static/
├── tests/
├── package.json
├── svelte.config.js
├── tsconfig.json
└── wrangler.toml

Let’s break down some key files:

src/routes/+page.svelte: This is your main page component. SvelteKit uses file-based routing, so this file represents your home page.
src/app.html: The HTML template for your entire app.
svelte.config.js: Configuration for SvelteKit and its adapter.
wrangler.toml: Configuration for Cloudflare Workers and Pages.

Now, let’s make sure our project is properly configured for Cloudflare:

Install adapter and open svelte.config.js to ensure it’s using the Cloudflare adapter:

npm install -D @sveltejs/adapter-cloudflare

 import adapter from '@sveltejs/adapter-cloudflare';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     preprocess: vitePreprocess(),

     kit: {
         adapter: adapter({
             routes: {
                 include: ['/*'],
                 exclude: ['<all>']
             }
         })
     }
 };

 export default config;

Check your wrangler.toml file. It should look something like this:
```
name = "my-sveltekit-app"
compatibility_date = "2024-08-04"
```
Don’t worry if some details are different - Cloudflare’s CLI tool should have set this up correctly for you.

Let’s make sure everything’s working as expected:

Start the development server:
```
npm run dev
```
Open your browser and navigate to http://localhost:5173. Ideally we haven’t broken anything yet and we can keep on rolling!

Before we can deploy our app, we need to log in to Wrangler:

Run the following command:
```
npx wrangler login
```
This will open a browser window. Follow the prompts to log in to your Cloudflare account.
Once logged in, you’ll see a success message in your terminal.

Let’s deploy our SvelteKit app to Cloudflare Pages using GitHub. Follow these steps:

Go to GitHub and log in to your account.
Click on the ”+” icon in the top right corner and select “New repository”.
Enter a name for your repository (e.g., your-repo-name).
Optionally, add a description and choose whether to make it public or private.
Click “Create repository”.

Now that you have a repository, you can push your SvelteKit project to it:

Open your terminal and navigate to your SvelteKit project directory.

Initialize a new Git repository and push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo-name.git
git push -u origin main

Log in to your Cloudflare account and navigate to the “Workers & Pages” section.
Click “Create” and switch to the “Pages” tab.
Select “Connect to Git” and choose GitHub as your Git provider and authorize Cloudflare to access your repositories.
Select the repository you just created for your SvelteKit app.
Configure your build settings:
- Framework preset: SvelteKit
- Build command: npm run build
- Build output directory: .svelte-kit/cloudflare
- Environment variables: Add NODE_VERSION with a value of 20.13.1 (or your preferred Node.js version).
Click “Save and Deploy”.

Cloudflare Pages will now build and deploy your application. Once the deployment is complete, you’ll receive a URL where your app is live.

HELP! My build fails due to a Node.js version incompatibility error!

An example of this error is below.

npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: @eslint/[email protected]
npm ERR! notsup Not compatible with your version of node/npm: @eslint/[email protected]
npm ERR! notsup Required: {"node":"^18.18.0 || ^20.9.0 || >=21.1.0"}
npm ERR! notsup Actual:   {"npm":"9.6.7","node":"v18.17.1"}

Follow these steps to resolve it:

Click the “continue with failed deployment” button.
Go to the “Settings” page of your Cloudflare Pages project.
Scroll down to the “Environment variables” section.
Click on “Edit variables” for both “Production” and “Preview” environments.
Find the NODE_VERSION variable and update its value to a compatible version (e.g., 20.9.0 or higher).
Make sure to click the “Encrypt” checkbox next to the NODE_VERSION variable.
Save your changes.

Whenever you make changes to your project, follow these steps to update your app:

Commit and push your changes to GitHub:

git add .
git commit -m "Update app"
git push

Cloudflare Pages will automatically detect the new commit and redeploy your app.

And there you have it! Your SvelteKit app is now live on Cloudflare Pages. In the next section, we’ll set up our Cloudflare D1 database to add data persistence to our application. Keep up the great work!

Alright, data enthusiasts! It’s time to add some persistence to our SvelteKit app with Cloudflare D1. Buckle up, because we’re about to turn our application into a data-driven powerhouse!

Before we dive in, let’s quickly recap: D1 is Cloudflare’s serverless SQL database. It’s like having a turbo-charged SQLite database that lives on the edge. Cool, right?

First things first, let’s create our database:

Log into your Cloudflare dashboard (if you haven’t already).
Navigate to the “Workers & Pages” section.
Click on the “D1” tab.
Hit that “Create database” button!
Give your database a snazzy name. How about “my_sveltekit_db”?
Click “Create” and watch the magic happen!

Now comes the fun part - linking our shiny new database to our SvelteKit app.

Open your wrangler.toml file and add the following:

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "my_sveltekit_db"
database_id = "<your-database-id>"

Replace <your-database-id> with the actual ID from your Cloudflare dashboard.

Now, let’s update our src/app.d.ts to include our database type:

/// <reference types="@cloudflare/workers-types" />

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
  namespace App {
    // interface Error {}
    // interface Locals {}
    // interface PageData {}
    // interface Platform {}
    interface Platform {
      env: {
        DB: D1Database;
      };

     context: {
         waitUntil(promise: Promise<any>): void;
     };
     caches: CacheStorage & { default: Cache };    
    }
  }
}

export {};

Now that we have our database, let’s give it some structure. We’ll create a simple “users” table to store our authenticated users. If you want to run any of these commands on the remote server (non-dev) you can add the “—remote” flag to the commands.

In your terminal, run this command:

npx wrangler d1 execute my_sveltekit_db --command "CREATE TABLE IF NOT EXISTS users (email TEXT PRIMARY KEY, name TEXT, image TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)"

If all goes well, you should see a success message. Let’s verify by checking our table:
```
npx wrangler d1 execute my_sveltekit_db --command "SELECT name FROM sqlite_master WHERE type='table' AND name='users'"
```
You should see your “users” table listed. High five! ✋

Let’s make sure everything’s connected properly by creating a simple API route to fetch users.

Create a new file src/routes/api/users/+server.ts:

 import type { RequestHandler } from "@sveltejs/kit";

 /** @type {import('@sveltejs/kit').RequestHandler} */
 export async function GET({ request, platform }) {
 let result = await platform.env.DB.prepare(
     "SELECT * FROM users LIMIT 5"
 ).run();
 return new Response(JSON.stringify(result));
 }

Start your development server:
```
npm run dev
```
Visit http://localhost:5173/api/users in your browser. You should see an empty array [] (since we haven’t added any users yet), but no errors. That means we’re connected!

Alright, security squad! It’s time to add some street cred to our app with OAuth authentication. We’re going to use GitHub as our OAuth provider, because who doesn’t love a little social coding flair? Let’s dive in and make our app as secure as Fort Knox, but way cooler!

We’ll set up two sets of GitHub OAuth credentials: one for local development and another for production.

Local Development Credentials:

Go to your GitHub account and navigate to Settings > Developer settings > OAuth Apps.
Click on “New OAuth App”.
Fill in the details:
- Application name: “My SvelteKit App (Development)”
- Homepage URL: http://localhost:5173
- Authorization callback URL: http://localhost:5173/auth/callback/github
Click “Register application”.
Note down the Client ID and generate a new client secret.

Production Credentials:

Repeat the process, but use your production details:
- Application name: “My SvelteKit App (Production)”
- Homepage URL: https://your-app-name.pages.dev (your Cloudflare Pages domain)
- Authorization callback URL: https://your-app-name.pages.dev/auth/callback/github
Register the application and note down the credentials.

Install the necessary authentication packages:

npm install @auth/core @auth/sveltekit

For local development:

Create a .env file in your project root:
```
GITHUB_ID=your_local_github_client_id
GITHUB_SECRET=your_local_github_client_secret
AUTH_SECRET=your_random_secret_here
```
Replace the values with your local GitHub OAuth credentials. Generate AUTH_SECRET with openssl rand -base64 32.
Add .env to your .gitignore file.

For production deployment on Cloudflare Pages:

Open your wrangler.toml file and add the following:

[vars]
AUTH_SECRET = "your_production_auth_secret"
AUTH_TRUST_HOST = "true"
GITHUB_ID = "your_production_github_client_id"
GITHUB_SECRET = "your_production_github_client_secret"

Replace the values with your production GitHub OAuth credentials.

If your GitHub repository is public, consider setting it to private to protect your production credentials.

Alternatively, you can set these environment variables in the Cloudflare dashboard under your project’s settings for added security.

By setting up separate OAuth credentials and using different configuration methods for local and production environments, you ensure a smooth development process and a secure production deployment.

Now, let’s set up our authentication logic. We’ll start with the basic GitHub OAuth setup and then add user-saving functionality later.

Create a new file src/auth.ts:

 import { SvelteKitAuth } from "@auth/sveltekit";
 import GitHub from '@auth/sveltekit/providers/github';
 import { GITHUB_ID, GITHUB_SECRET, AUTH_SECRET } from '$env/static/private';

 export const { handle, signIn, signOut } = SvelteKitAuth(async (event) => {

     const getEnv = (key) => {
         if (event.platform?.env.CF_PAGES === 'true') {
             return event.platform?.env[key];
         } else {
             switch(key) {
                 case 'GITHUB_ID': return GITHUB_ID;
                 case 'GITHUB_SECRET': return GITHUB_SECRET;
                 case 'AUTH_SECRET': return AUTH_SECRET;
                 default: return undefined;
             }
         }
     };

     const authOptions = {
         providers: [
             GitHub({
                 clientId: getEnv('GITHUB_ID'),
                 clientSecret: getEnv('GITHUB_SECRET')
             })
         ],
         secret: getEnv('AUTH_SECRET'),
         trustHost: true,
     };

     return authOptions;
 });

This file sets up the core authentication logic using SvelteKitAuth. It configures GitHub as the OAuth provider and handles environment variables for both development and production environments.

Update src/hooks.server.ts:
```
export { handle } from "./auth";
```
This file exports the handle function from our auth configuration, which SvelteKit will use to process authentication for each request.

Create src/routes/+layout.server.ts:

 import type { LayoutServerLoad } from './$types';
 import { dev } from '$app/environment';
 import { GITHUB_ID } from '$env/static/private';

 export const load: LayoutServerLoad = async (event) => {
     return {
         session: await event.locals.auth(),
         authProviders: {
             github: {
                 clientId: dev ? GITHUB_ID : event.platform?.env?.GITHUB_ID
             }
         }
     };
 };

This layout server load function provides the session data and GitHub client ID to all routes in your app. It ensures that authentication state is available throughout your application.

Update src/routes/+layout.svelte to include login/logout buttons:

<script lang="ts">import { signIn, signOut } from "@auth/sveltekit/client";
import { page } from "$app/stores";
$: ({ session, authProviders } = $page.data);
</script>

<nav>
  {#if session}
    <span>Welcome, {session.user?.name}!</span>
    <button on:click={() => signOut()}>Sign out</button>
  {:else}
    <button on:click={() => signIn("github")}>Sign in with GitHub</button>
  {/if}
</nav>

<slot />

This layout component provides a simple UI for signing in and out. It displays a welcome message and sign-out button when the user is authenticated, or a sign-in button when they’re not.

To make our development process smoother, let’s add a custom script to our package.json file:

Open your package.json file and add the following script:
```
{
  "scripts": {
    // ... other scripts ...
    "dev:full": "npm run build && wrangler pages dev .svelte-kit/cloudflare --port 5173"
  }
}
```
This script combines the build process and starts the Wrangler Pages development server, making it easier to test our app with Cloudflare’s environment.
Now, let’s test our GitHub authentication:

Start your development server using the new script:
```
npm run dev:full
```
Visit http://localhost:5173 in your browser and try logging in with GitHub. You should be able to authenticate successfully.
After logging in, you should see your GitHub name displayed and a sign-out button.
We can also push our file changes to github to test the production environment.

By using this dev:full script, we’ve simplified the process of starting our development server with Cloudflare’s environment. This makes it easier to test features like authentication that might behave differently in a Cloudflare Pages context.

Remember, this setup uses your local development GitHub OAuth credentials. When you deploy to production, Cloudflare Pages will use the production credentials we set up earlier.

Let’s create a profile page to display the user’s information:

Create src/routes/profile/+page.server.ts:

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
    const session = await event.locals.auth();
    return { user: session.user };
};

And src/routes/profile/+page.svelte:

<script lang="ts">export let data;
const { user } = data;
</script>

<h1>User Profile</h1>
<img src={user.image} alt={user.name} style="width: 100px; height: 100px; border-radius: 50%;" />
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>

Start your development server:
```
npm run dev:full
```
Visit http://localhost:5173 and log in with GitHub.
After logging in, visit http://localhost:5173/profile. You should see your profile information, including the last login time.

Want to keep some pages for authenticated users only? No problemo!

Create src/routes/profile/+page.server.ts:

import { redirect } from '@sveltejs/kit'; // import this
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  const session = await event.locals.auth();
  if (!session?.user) throw redirect(303, '/'); // and add this line
  return { user: session.user };
};

Or if we wanted to protect our src/routes/api/users/+server.ts route:

import type { RequestHandler } from '@sveltejs/kit';
import { error, json } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ locals, platform }) => {
    const session = await locals.auth();
    
    if (!session?.user) {
        throw error(401, 'Unauthorized');
    }

    try {
        const result = await platform.env.DB.prepare('SELECT * FROM users LIMIT 100').run();
        return json(result);
    } catch (err) {
        console.error('Database query error:', err);
        throw error(500, 'Internal Server Error');
    }
};

Let’s dive into the nitty-gritty of saving our authenticated users to our D1 database. This is where the magic of persistence meets the power of authentication! Let’s go through the setup:

Install @auth/d1-adapter:
```
npm install next-auth @auth/d1-adapter
```
Update src/auth.ts:

// ... previous imports ...
import { D1Adapter } from "@auth/d1-adapter";

export const { handle, signIn, signOut } = SvelteKitAuth(async (event) => {

    const getEnv = (key) => {
        // ... remains the same ...
    };

    const authOptions = {
        providers: [
            GitHub({
                clientId: getEnv('GITHUB_ID'),
                clientSecret: getEnv('GITHUB_SECRET')
            })
        ],
        secret: getEnv('AUTH_SECRET'),
        trustHost: true,
        adapter: D1Adapter(event.platform?.env.DB),
        session: {
            strategy: 'database',
            maxAge: 30 * 24 * 60 * 60, // 30 days
            updateAge: 24 * 60 * 60 // update session age every 24 hours
        },
        callbacks: {
            async signIn({ user, account, profile }) { // optionally define allowed email domains or specific email addresses
                
                const allowedEmails = ['@yahoo.com', '@company.com', '[email protected]'];
                
                const isAllowedEmail = allowedEmails.some(email => 
                    user.email.endsWith(email) || user.email === email
                );

                if (isAllowedEmail) {
                    return true; // Allow sign-in
                } else {
                    return false; // Deny sign-in
                }
            },
            async session({ session, token }) {
                // Include the user ID (sub) in the session
                if (token?.sub) {
                    session.user.id = token.sub;
                }
                return session;
            }
        }
    };

    return authOptions;
});

This updated configuration uses the D1Adapter to directly interact with your database for storing authentication information. It also sets up database sessions and includes a callback to add the user ID to the session information.

Initialize the database schema:

DROP TABLE IF EXISTS accounts;
DROP TABLE IF EXISTS "sessions";
DROP TABLE IF EXISTS users;
DROP TABLE IF EXISTS verification_tokens;

CREATE TABLE IF NOT EXISTS "accounts" (
  "id" TEXT NOT NULL,
  "userId" TEXT NOT NULL DEFAULT NULL,
  "type" TEXT NOT NULL DEFAULT NULL,
  "provider" TEXT NOT NULL DEFAULT NULL,
  "providerAccountId" TEXT NOT NULL DEFAULT NULL,
  "refresh_token" TEXT DEFAULT NULL,
  "access_token" TEXT DEFAULT NULL,
  "expires_at" INTEGER DEFAULT NULL,
  "token_type" TEXT DEFAULT NULL,
  "scope" TEXT DEFAULT NULL,
  "id_token" TEXT DEFAULT NULL,
  "session_state" TEXT DEFAULT NULL,
  "oauth_token_secret" TEXT DEFAULT NULL,
  "oauth_token" TEXT DEFAULT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE IF NOT EXISTS "sessions" (
  "id" TEXT NOT NULL,
  "sessionToken" TEXT NOT NULL,
  "userId" TEXT NOT NULL DEFAULT NULL,
  "expires" DATETIME NOT NULL DEFAULT NULL, 
  PRIMARY KEY (sessionToken)
);

CREATE TABLE IF NOT EXISTS "users" (
  "id" TEXT NOT NULL DEFAULT '',
  "name" TEXT DEFAULT NULL,
  "email" TEXT DEFAULT NULL,
  "emailVerified" DATETIME DEFAULT NULL,
  "image" TEXT DEFAULT NULL, 
  PRIMARY KEY (id)
);

CREATE TABLE IF NOT EXISTS "verification_tokens" (
  "identifier" TEXT NOT NULL,
  "token" TEXT NOT NULL DEFAULT NULL,
  "expires" DATETIME NOT NULL DEFAULT NULL, 
  PRIMARY KEY (token)
);

Before using this new method, you need to set up the required tables in your database. Save these commands to a file named “update_users_schema.sql” and then run the following command using Wrangler to execute the SQL file:

npx wrangler d1 execute my_sveltekit_db --file update_users_schema.sql

These SQL commands create the necessary tables for storing authentication data, including user accounts, sessions, and verification tokens.

With these updates, your application will now store OAuth information directly in your database using the @auth/d1-adapter. This approach simplifies the authentication process and eliminates the need for a custom user-saving function.

Start your development server:
```
npm run dev:full
```
Visit http://localhost:5173 and try logging in with GitHub.

After logging in, check your D1 database:

npx wrangler d1 execute my_sveltekit_db --command "SELECT * FROM users"

To further verify, navigate to localhost:5173/api/users in your browser.
You should see your user information displayed, confirming that the data was successfully saved to the database.

You should see your user info stored in the database. How cool is that?

Well, folks, we’ve been on quite the journey together! From setting up our SvelteKit project to implementing OAuth, and wrangling our D1 database. Let’s take a moment to bask in the glory of what we’ve accomplished:

We’ve set up a blazing-fast SvelteKit application
Implemented secure OAuth authentication with GitHub
Stored and managed user data with Cloudflare’s D1 database

The sky’s the limit! Here are some ideas to take your app to the next level:

Implement additional OAuth providers (Google, Facebook, Twitter, etc.)
Create a user dashboard with personalized content
Add more real-time features like live chat or collaborative editing
Implement server-side rendering (SSR) for improved SEO
Optimize your app’s performance using Cloudflare’s analytics

Building modern web applications doesn’t have to be a headache. With SvelteKit, D1, and Cloudflare Pages, we’ve created a powerful, scalable, and real-time capable application without breaking a sweat (okay, maybe a little sweat, but it was worth it!).

Remember, the best apps are those that continue to evolve. Keep learning, keep experimenting, and most importantly, keep having fun with it!

You’ve now got a solid foundation in some of the most exciting web technologies out there. So go forth and build amazing things! Who knows? Your next project could be the next big thing on the web.

To help you continue your journey and dive deeper into the technologies we’ve used, here are some valuable resources:

SvelteKit Documentation: The official docs are your best friend for all things SvelteKit.
Cloudflare Pages Documentation: Learn more about deploying and optimizing your sites on Cloudflare Pages.
Cloudflare D1 Documentation: Dive deeper into D1’s capabilities and advanced querying techniques.
Durable Objects Documentation: Explore more ways to leverage Durable Objects for stateful applications.
Auth.js Documentation: Discover more authentication providers and advanced configurations.
Svelte Society: Join the Svelte community, find resources, and stay updated with the latest in Svelte ecosystem.
Cloudflare Workers Discord: Connect with other developers and get help with Cloudflare-specific questions.

Help Improve This Page

Spot an error or have a suggestion? This page is a Markdown file, making it easy to contribute:

Click the "Edit on GitHub" button below
Look for the pencil icon in the GitHub interface
Make your changes and submit a pull request

Edit on GitHub

Can't edit directly? Share your feedback or report issues in the comments below. We appreciate your input!

Setting Up SvelteKit with Cloudflare Pages, D1 Storage, and OAuth

Introduction

The Tech Stack

Why This Stack?

What You’ll Learn

Prerequisites

Required Accounts

Essential Tools

Development Environment

Ready to Go!

Setting up the SvelteKit Project with Cloudflare

Creating the Project

Project Structure Deep Dive

Cloudflare Configuration

Taking It for a Spin

Logging into Wrangler

Deploying Your SvelteKit App to Cloudflare Pages

Step 1: Create a GitHub Repository

Step 2: Push Your Project to GitHub

Step 3: Deploy to Cloudflare Pages

Step 4: Update Your App

Configuring Cloudflare D1 Database

What’s D1, Anyway?

Creating Our D1 Database

Connecting D1 to Our SvelteKit Project

Setting Up Tables

Testing Our Database Connection

Implementing OAuth Authentication

Setting Up GitHub OAuth

Local Development Credentials:

Production Credentials:

Installing the Auth Packages

Setting Up Environment Variables

Configuring Authentication

Testing GitHub Authentication

Adding a User Profile Page

Testing Our User Functionality

Protecting Routes

Saving Authenticated Users in the Database

Testing Our Authentication

Conclusion: Your SvelteKit App is Ready to Conquer the Web!

What’s Next?

Final Thoughts

Additional Resources

Share this post

Help Improve This Page