DEV Community: Mukesh

Should you extend Supabase Auth with User Profiles?

Mukesh — Sat, 17 May 2025 21:43:35 +0000

Supabase Auth already has an Auth Users table.

The image might be blurry.

If you visit the project in your Supabase Account, you can check your Auth table of the project.

If you wanted to add additional data to your a User table, it's likely you've wondered 🤔

Should you create your own, separate profiles (or users) table in Supabase and link it with the Supabase Auth Users table?

Should you extend the existing Supabase Auth Users table?

Supabase’s recommended pattern is to create a separate profiles (or users) table in the public schema rather than altering the built-in auth.users table.

The auth.users table (in the auth schema) is managed internally and isn’t exposed via the auto-generated API.

Supabase maintainers explicitly advise

“It is not recommended to modify the schema of auth.users; the best way is to create a users (or profiles) table in the public schema and add any custom user-related data there.”

Linking Profiles to `auth.users`

Make your public.profiles (or public.users) table use the same UUID as primary key and reference auth.users(id)

-- Create profiles table
create table public.profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  full_name text,
  bio       text,
  avatar_url text
);

-- Enable RLS
alter table public.profiles enable row level security;

-- Policy for INSERT
create policy "Users can insert own profile"
on public.profiles for insert
with check (auth.uid() = id);

-- Policy for UPDATE
create policy "Users can update own profile"
on public.profiles for update
using (auth.uid() = id);

-- Policy for SELECT
create policy "Users can view own profile"
on public.profiles for select
using (auth.uid() = id);

Automatic Profile Creation on Signup

To automatically create a profile row when a new user signs up (via email or OAuth), use a Postgres trigger on auth.users

-- 1. Create the function
create or replace function public.handle_new_user()
returns trigger
language plpgsql security definer set search_path = public
as $$
begin
  insert into public.profiles (id) values (NEW.id);
  return NEW;
end;
$$;

-- 2. Create the trigger on the Supabase Auth table
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();

Managing Supabase Auth State Across Server & Client Components in Next.js

Mukesh — Sat, 17 May 2025 16:51:33 +0000

This article intends to save you 10+ hours of your valuable time, effort, and ‘developer’ pain, which I think is an entirely different kind of pain

In your Next.js project, you'll need a way to keep UI elements like your Navbar (a Client component) in sync with Supabase Auth state

You might be thinking - React Context to the rescue.

But wait!

Next.js Authentication Guide states:

React context is not supported in Server Components, making them only applicable to Client Components.

Your Navbar is a Client component, seems all good.

But,

Supabase Server-Side Auth recommends access to Auth User data, using only supabase.auth.getUser() in Server Components.

Example from Supabase Official Guide → Setting up Server-Side Auth for Next.js

// app/private/page.tsx

import { redirect } from 'next/navigation'

import { createClient } from '@/utils/supabase/server'

export default async function PrivatePage() {
  const supabase = await createClient()

  const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect('/login')
  }

  return <p>Hello {data.user.email}</p>
}

This creates a disconnect between how you access Auth data on the server versus the client.

So, how can your Client components (like Navbar) & Server components be in sync with the authentication state?

Let's find out.

The Flow Works Like This:

Root layout fetches the initial user state server-side
This data initializes the AuthProvider
Navbar and other client components access auth state via the context
When auth changes (login/logout), the context updates all components
Server Components independently verify auth status on each request

1. Server-Side Authentication Layer

First, create a reliable server-side authentication layer:

// utils/auth.ts
import { createClient } from '@/utils/supabase/server';
import { User } from '@supabase/supabase-js';

export async function getUser(): Promise<User | null> {
  const supabase = await createClient();
  const { data, error } = await supabase.auth.getUser();

  if (error || !data?.user) {
    return null;
  }

  return data.user;
}

2. Layout-Based Authentication Sharing

Use Next.js layouts to fetch Auth data from server side once and pass it down:

// app/layout.tsx
import { getUser } from '@/utils/auth';
import Navbar from '@/components/Navbar';
import { AuthProvider } from '@/components/AuthProvider';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser();

  return (
    <html lang="en">
      <body>
        <AuthProvider initialUser={user}>
          <Navbar />
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

3. Client-Side Auth Provider

Create a React Context to watch for Auth change & provide Auth context to all Client components:

// components/AuthProvider.tsx
"use client";

import { createContext, useState, useEffect, useContext, ReactNode } from 'react';
import { User } from '@supabase/supabase-js';
import { createClient } from '@/utils/supabase/client';

type AuthContextType = {
  user: User | null;
  isLoading: boolean;
};

const AuthContext = createContext<AuthContextType>({
  user: null,
  isLoading: true,
});

export const useAuth = () => useContext(AuthContext);

export function AuthProvider({ 
  children,
  initialUser
}: { 
  children: ReactNode;
  initialUser: User | null;
}) {
  const [user, setUser] = useState<User | null>(initialUser);
  const [isLoading, setIsLoading] = useState(false);
  const supabase = createClient();

  useEffect(() => {
    // Initialize with SSR data
    setUser(initialUser);
    setIsLoading(false);

    // Listen for auth changes on the client
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user || null);
      }
    );

    return () => subscription.unsubscribe();
  }, [initialUser]);

  return (
    <AuthContext.Provider value={{ user, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
}

4. Client-Side Auth Synchronization

For your client components (like Navbar), in addition to consuming Auth Context from AuthProvider, create a mechanism to sync with auth changes:

// components/Navbar.tsx
"use client";

import { useAuth } from '@/components/AuthProvider';
import { signOut } from "app/auth/actions";
import Link from 'next/link';

export default function Navbar() {
  const { user } = useAuth();
  const supabase = createClient();

  const handleSignOut = async () => {
    await supabase.auth.signOut();
  };

  return (
    <nav className="p-4 flex justify-between items-center bg-gray-100">
      <Link href="/" className="font-bold text-lg">My App</Link>

      <div>
        {user ? (
          <div className="flex items-center gap-4">
            <span>Hello, {user.email}</span>
            <form action={signOut} className="w-full">
              <button
                type="submit"
                className="w-full text-left"
              >
                Logout
              </button>
            </form>
          </div>
        ) : (
          <Link 
            href="/login"
            className="px-4 py-2 bg-blue-500 text-white rounded"
          >
            Sign In
          </Link>
        )}
      </div>
    </nav>
  );
}

5. Auth State for Server Components

For your server components, use the Supabase recommended pattern. For example:

// app/profile/page.tsx
import { redirect } from 'next/navigation';
import { getUser } from '@/utils/auth';
import ProfileDetails from '@/components/ProfileDetails';

export default async function ProfilePage() {
  const user = await getUser();

  if (!user) {
    redirect('/login');
  }

  // Fetch additional user data from Supabase if needed
  // This can include profile data beyond the auth user

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Profile</h1>
      <ProfileDetails user={user} />
    </div>
  );
}

// Client Component that receives user data from parent

// components/ProfileDetails.tsx
"use client";

import { User } from '@supabase/supabase-js';

export default function ProfileDetails({ user }: { user: User }) {
  return (
    <div className="bg-white p-6 rounded shadow">
      <h2 className="text-xl mb-4">Your Profile</h2>
      <p><strong>Email:</strong> {user.email}</p>
      <p><strong>User ID:</strong> {user.id}</p>
      <p><strong>Last Sign In:</strong> {new Date(user.last_sign_in_at || '').toLocaleString()}</p>
    </div>
  );
}

Benefits of This Approach

Server Components: Can access user data directly via getUser()
Client Components: Get real-time auth state via the context hook (useAuth())
No Duplication: Auth logic is centralized and consistent
Performance: Server-side verification for protected routes
Seamless UX: UI stays in sync with auth state

This approach gives you the best of both worlds - server-side protection for routes and data access while maintaining a reactive UI that responds to authentication changes

Part 3: Protecting Routes and Security

Mukesh — Tue, 06 May 2025 10:54:17 +0000

If you haven't already, I would recommend having a quick look at the Introduction & Sequence Diagram

Welcome to the 3-part series that helps you create a scalable production-ready authentication system using pure JWT & a middleware for your SvelteKit project

Part 1 → Setup & JWT Basics
Part 2 → Authentication Flows
Part 3 → Protecting Routes & Security

You are reading Part 3

Goal: Secure the app with middleware and discuss best practices for a production-ready system.

Topics we'll cover

Server Hooks (Middleware): Use SvelteKit hooks to verify JWT and secure routes.
Security Considerations: Token storage (HTTP-only cookies), CSRF protection, token expiration, HTTPS, etc.
Conclusion & Next Steps: Recap and suggestions like refresh tokens or role-based access.

SvelteKit Server Hooks (Middleware)

Now we'll implement the authentication middleware in SvelteKit's server hooks:

// src/hooks.server.ts
import { authenticateRequest } from "$lib/auth/jwt";
import { clearAuthCookies } from "$lib/auth/cookies";
import type { Handle } from "@sveltejs/kit";
import type { JwtPayload } from "$lib/auth/jwt";

// Extend the Locals interface to include our user property
declare global {
  namespace App {
    interface Locals {
      user?: Omit<JwtPayload, "iat" | "exp">;
    }
  }
}

export const handle: Handle = async ({ event, resolve }) => {
  const { cookies, url } = event;

  // Public routes that don't require authentication
  const publicRoutes = [
    "/auth/sign-in",
    "/auth/sign-up",
    "/auth/forgot-password",
    "/auth/reset-password",
    "/auth/logout",
  ];

  // Check if the current route is public
  const isPublicRoute = publicRoutes.some(
    (route) =>
      url.pathname === route ||
      url.pathname.startsWith("/api/public/")
  );

  // First, verify the authentication status for all routes
  const authResult = authenticateRequest(cookies);

  if (authResult.success && authResult.user) {
    // User is authenticated
    event.locals.user = authResult.user;

    // Maintain backward compatibility with existing code
    if (!cookies.get("user")) {
      cookies.set("user", JSON.stringify(authResult.user), {
        path: "/",
        httpOnly: true,
      });
    }

    // If user is authenticated and trying to access public routes like sign-in
    // redirect them to the dashboard instead
    if (isPublicRoute && url.pathname !== "/auth/logout") {
      return Response.redirect(new URL("/dashboard", url));
    }
  } else {
    // User is not authenticated
    if (!isPublicRoute) {
      // Non-public route requires authentication, redirect to login
      clearAuthCookies(cookies);
      return Response.redirect(new URL("/auth/sign-in", url));
    }
  }

  return resolve(event);
};

Security Considerations

When implementing JWT authentication, consider the following security aspects:

Token Storage: Store tokens in HTTP-only cookies to prevent XSS attacks
CSRF Protection: Implement CSRF tokens for form submissions
Token Expiration: Use short-lived tokens to minimize damage from token theft
Secure Connection: Always use HTTPS in production
Environment Variables: Store your JWT secret in environment variables, not in code

Conclusion

We've built a complete authentication system using SvelteKit, TypeScript, and "pure JWT" authentication. This approach gives us the benefits of stateless authentication while still maintaining proper user management and security audit capabilities.

The key advantage of this implementation is that we don't need to query the database for each authenticated request, making our application more scalable. Instead, we rely on the cryptographic integrity of the JWT itself to validate the user's identity.

Next Steps

To further enhance this system, you might consider:

Implementing refresh tokens for longer sessions
Adding email verification for signup
Supporting password reset functionality
Implementing role-based access control
Adding two-factor authentication

I hope this tutorial helps you build secure and scalable authentication systems with SvelteKit!

Previous → Part 2: Authentication Flows

Part 2: Authentication Flows

Mukesh — Tue, 06 May 2025 10:42:26 +0000

If you haven't already, I would recommend having a quick look at the Introduction & Sequence Diagram

Welcome to the 3-part series that helps you create a scalable production-ready authentication system using pure JWT & a middleware for your SvelteKit project

You are reading Part 2

Goal: Implement user authentication flows using JWT, covering sign-up, sign-in, and logout

Topics we'll cover

Sign-Up Flow: Server-side endpoint to register users and issue JWT, with a Svelte form.
Sign-In Flow: Server-side endpoint to authenticate users and issue JWT, with a Svelte form.
Logout Flow: Server-side endpoint to clear cookies, with a simple UI.

Note:

All form validations are happening server-side, as it should be.
The forms are pretty basic. Focus on the logic, understand & then enhance the design of the forms using AI.

Sign-Up Flow

Let's implement the sign-up endpoint:

// src/routes/auth/sign-up/+page.server.ts

import { fail, redirect } from "@sveltejs/kit";
import {
  generateToken,
  setAuthCookie,
  logToken,
} from "$lib/auth/jwt";
import { createUser, getUserByEmail } from "$lib/database/db";
import bcrypt from "bcrypt";
import type { Actions } from "./$types";

export const actions = {
  signup: async ({ cookies, request }) => {
    const data = await request.formData();
    const email = data.get("email");
    const password = data.get("password");

    // Wrap all registration logic in a separate async function
    const registerUser = async () => {
      try {
        // Email validation
        if (typeof email !== "string" || !email) {
          return {
            success: false,
            error: "invalid-input",
            message: "Email is required",
          };
        }

        // Email format validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
          return {
            success: false,
            error: "invalid-input",
            message: "Please enter a valid email address",
          };
        }

        // Password validation
        if (typeof password !== "string" || password.length < 6) {
          return {
            success: false,
            error: "invalid-input",
            message: "Password must be at least 6 characters",
          };
        }

        // Check if user already exists
        const existingUser = await getUserByEmail(email);
        if (existingUser) {
          return {
            success: false,
            error: "user-exists",
            message: "An account with this email already exists",
          };
        }

        // Hash the password before storing it
        const saltRounds = 10;
        const hashedPassword = await bcrypt.hash(
          password,
          saltRounds
        );

        // Create the user in the database
        const user = await createUser(
          email,
          hashedPassword,
          "user" // Default role
        );

        console.log("User Created");

        if (!user) {
          return {
            success: false,
            error: "database-error",
            message: "Failed to create account - database error",
          };
        }

        // Create token for the new user
        const tokenPayload = {
          userId: user.USER_ID,
          email: user.EMAIL,
          role: user.ROLE,
        };

        const accessToken = generateToken(tokenPayload);

        // Set JWT cookie
        setAuthCookie(cookies, accessToken);

        // Log token to database
        if (user.USER_ID) {
          // We use a non-awaited promise to avoid blocking
          logToken(accessToken, user.USER_ID).catch((err) => {
            console.error("Failed to log token:", err);
          });
        } else {
          console.error(
            "Cannot log token: user.USER_ID is null or undefined"
          );
        }

        return { success: true };
      } catch (error) {
        console.error("Registration error:", error);
        return {
          success: false,
          error: "registration-failed",
          message: "Failed to create account",
        };
      }
    };

    // Execute the registration process
    const result = await registerUser();

    if (!result.success) {
      // Map error types to appropriate HTTP status codes and response formats
      switch (result.error) {
        case "user-exists":
          return fail(400, {
            invalid: true,
            message: result.message,
          });

        case "invalid-input":
          return fail(400, {
            invalid: true,
            message: result.message,
          });

        case "connection-error":
          return fail(503, { error: true, message: result.message });

        case "database-error":
        case "registration-failed":
        default:
          return fail(500, { error: true, message: result.message });
      }
    }
    // Registration succeeded, perform redirect
    throw redirect(302, "/dashboards/analytics");
  },
} satisfies Actions;

And the sign-up form:

// src/routes/auth/sign-up/+page.svelte

<script lang="ts">
    import AuthLayout from "$lib/layouts/AuthLayout.svelte";
    import LogoBox from "$lib/components/LogoBox.svelte";
    import SignWithOptions from "../components/SignWithOptions.svelte";
    import {Button, Card, CardBody, Col, Input, Row} from "@sveltestrap/sveltestrap";
    import type { ActionData } from './$types';
    import { enhance } from '$app/forms';
    import type { SubmitFunction } from '@sveltejs/kit';
    import { goto } from '$app/navigation';

    const signInImg = '/images/sign-in.svg'

    // Get form data for error display
    let { form } = $props<{ form?: ActionData }>();
    let loading = $state(false);
    let showErrors = $state(true); // Controls visibility of error messages

    // Custom enhance function to track loading state
    const handleSubmit: SubmitFunction = () => {
        loading = true;
        showErrors = false; // Hide any previous errors on new submission

        return async ({ result, update }) => {
            if (result.type === 'redirect') {
                // Handle redirect by navigating to the specified location
                loading = false; // Make sure to reset loading before redirect
                goto(result.location);
                return;
            }

            // For other result types, update form with the result
            await update();
            loading = false;
            showErrors = true; // Only show errors if we're not redirecting
        };
    }
</script>

<h2>Sign Up</h2>

<form method="POST" action="?/signup" use:enhance={handleSubmit}>

        <!-- Show loading spinner and form status -->
        {#if loading}
              <div>Loading...</div>
              <p>Creating your account...</p>

        {:else if showErrors}

                <!-- Display validation errors -->
                {#if form?.invalid}
                    <div>{form.message || 'Please check your input.'}</div>
                {/if}

                {#if form?.error}
                    <div>{form.message || 'An error occurred.'}</div>
                {/if}

        {/if}

    <label class="form-label" for="email">Email</label>
    <Input type="email" 
                   id="email" 
                   name="email" 
                   class={showErrors && form?.invalid && form?.message?.includes('email') ? 'is-invalid' : ''} 
           placeholder="Enter your email"
           disabled={loading}
     >

     <label class="form-label" for="password">Password</label>
       <Input 
        type="password" 
        id="password" 
        name="password"
        class={showErrors && form?.invalid && form?.message?.includes('assword') ? 'is-invalid' : ''}
        placeholder="Enter your password"
        disabled={loading}
      />


      <Button color="primary" type="submit" disabled={loading}>
          {loading ? 'Signing Up...' : 'Sign Up'}
      </Button>

</form>

<p > Already have an account?
    <a href="/auth/sign-in">Sign In</a>
</p>

Sign-In Flow

Now for the sign-in endpoint:

// src/routes/auth/sign-in/+page.server.ts

import { fail, redirect } from "@sveltejs/kit";
import { generateToken, logToken } from "$lib/auth/jwt";
import { setAuthCookie } from "$lib/auth/cookies";
import { validateUserCredentials } from "$lib/database/db";
import type { Actions } from "./$types";

// Error response types
type AuthError = {
  success: false;
  error:
    | "invalid-input"
    | "invalid-credentials"
    | "connection-error"
    | "database-error"
    | "login-failed";
  message: string;
};

// Success response type
type AuthSuccess = {
  success: true;
};

// Combined result type
type AuthResult = AuthError | AuthSuccess;

export const actions = {
  login: async ({ cookies, request }) => {
    const data = await request.formData();
    const email = data.get("email")?.toString() || "";
    const password = data.get("password")?.toString() || "";

    // Wrap all login logic in a separate async function
    const authenticateUser = async (): Promise<AuthResult> => {
      try {
        // Validate input fields
        if (!email || !password) {
          return {
            success: false,
            error: "invalid-input",
            message: "Email and password are required",
          };
        }

        // Validate user credentials against database
        const user = await validateUserCredentials(email, password);

        // If authentication failed
        if (!user) {
          return {
            success: false,
            error: "invalid-credentials",
            message: "Invalid email or password",
          };
        }

        // User authenticated - create JWT token
        const tokenPayload = {
          userId: user.USER_ID,
          email: user.EMAIL,
          role: user.ROLE,
        };

        const accessToken = generateToken(tokenPayload);

        // Set JWT cookie
        setAuthCookie(cookies, accessToken);

        // Log token to database (non-blocking)
        if (user.USER_ID) {
          logToken(accessToken, user.USER_ID).catch((err) => {
            console.error("Failed to log token:", err);
          });
        }

        return { success: true };
      } catch (error) {
        console.error("Login error:", error);

        // Get error message from any type of error
        const errorMessage =
          error instanceof Error ? error.message : String(error);

        // Simple error classification based on key terms
        let errorType: AuthError["error"] = "login-failed";
        let errorMsg = "An unexpected error occurred";

        // Simple keyword-based error detection
        if (
          errorMessage.includes("network") ||
          errorMessage.includes("connect")
        ) {
          errorType = "connection-error";
          errorMsg =
            "Unable to connect to the service. Please try again later.";
        } else if (
          errorMessage.includes("database") ||
          errorMessage.includes("query")
        ) {
          errorType = "database-error";
          errorMsg = "Database error. Please try again later.";
        }

        return {
          success: false,
          error: errorType,
          message: errorMsg,
        };
      }
    };

    // Execute the authentication process
    const result = await authenticateUser();

    if (!result.success) {
      return handleError(result);
    }

    // Login succeeded, perform redirect
    console.log("Login successful, redirecting to dashboard");
    throw redirect(302, "/dashboard");
  },
} satisfies Actions;

// Helper function to handle errors - returns consistent error format
function handleError(result: AuthError): ReturnType<typeof fail> {
  // Simple mapping of error types to status codes
  let statusCode = 500;

  // Define possible response shapes
  type ErrorResponse = { error: boolean; message: string };
  type CredentialsResponse = {
    credentials: boolean;
    message: string;
  };
  type InvalidResponse = { invalid: boolean; message: string };

  // Start with default error response
  let responseData:
    | ErrorResponse
    | CredentialsResponse
    | InvalidResponse = { error: true, message: result.message };

  if (result.error === "invalid-credentials") {
    statusCode = 400;
    responseData = { credentials: true, message: result.message };
  } else if (result.error === "invalid-input") {
    statusCode = 400;
    responseData = { invalid: true, message: result.message };
  } else if (result.error === "connection-error") {
    statusCode = 503;
  }

  return fail(statusCode, responseData);
}

And the sign-in form:

// src/routes/auth/sign-in/+page.svelte

<script lang="ts">
    import AuthLayout from "$lib/layouts/AuthLayout.svelte";
    import LogoBox from "$lib/components/LogoBox.svelte";
    import {Button, Card, CardBody, Col, Input, Row} from "@sveltestrap/sveltestrap";
    import SignWithOptions from "../components/SignWithOptions.svelte";
    import type { ActionData } from './$types';
    import { enhance } from '$app/forms';
    import type { SubmitFunction } from '@sveltejs/kit';
    import { goto } from '$app/navigation';

    const signInImg = '/images/sign-in.svg'

    let { form } = $props<{ form?: ActionData }>();
    let loading = $state(false);
    let showErrors = $state(true); // Controls visibility of error messages

    // Custom enhance function to track loading state
    const handleSubmit: SubmitFunction = () => {
        loading = true;
        showErrors = false; // Hide any previous errors on new submission

        return async ({ result, update }) => {
            if (result.type === 'redirect') {
                // Handle redirect by navigating to the specified location
                loading = false; // Make sure to reset loading before redirect
                goto(result.location);
                return;
            }

            // For other result types, update form with the result
            await update();
            loading = false;
            showErrors = true; // Only show errors if we're not redirecting
        };
    }
</script>

<h2>Sign In</h2>

<!-- Using a native form with the enhance action -->
<form method="POST" action="?/login" class="authentication-form" use:enhance={handleSubmit}>
    {#if loading}

        <span class="visually-hidden">Loading...</span>
        <p class="mt-2 text-muted">Signing in...</p>

    {:else if showErrors}

        {#if form?.invalid}
            <div>{form.message || 'Email and password are required.'}</div>
        {/if}

        {#if form?.credentials}
            <div>{form.message || 'You have entered wrong credentials.'}</div>
        {/if}

        {#if form?.error}
            <div>{form.message || 'An unexpected error occurred.'}</div>
        {/if}

    {/if}


        <label class="form-label" for="email">Email</label>
    <Input type="email" 
           id="email" 
           name="email"
           class={showErrors && form?.invalid ? 'is-invalid' : ''}
           placeholder="Enter your email" 
           value="user@demo.com"
           disabled={loading}
     />


    <a href="/auth/reset-password"> Reset password</a>
    <label for="password">Password</label>
    <Input 
        type="password" 
        id="password" 
        name="password"
        class={showErrors && (form?.invalid || form?.credentials) ? 'is-invalid' : ''}
        placeholder="Enter your password" 
        value="123456"
        disabled={loading}
     />


      <Button color="primary" type="submit" disabled={loading}>
          {loading ? 'Signing In...' : 'Sign In'}
      </Button>

</form>                    

<p>
    Don't have an account?
    <a href="/auth/sign-up" >Sign Up</a>
</p>

Logout Flow

Finally, the logout endpoint:

// src/routes/auth/logout/+page.server.ts
import { json, redirect } from '@sveltejs/kit';

export async function POST({ cookies }) {
  // [INSERT YOUR LOGOUT ENDPOINT CODE HERE]
}

And the logout UI:

// src/routes/auth/logout/+page.svelte

<svelte:head>
    <title>Logging out...</title>
</svelte:head>

<span >Loading...</span>
<p>Logging you out...</p>

Next → Part 3: Protecting Routes & Security
Previous → Part 1: Setup & JWT Basics

Part 1: Setup & JWT Basics

Mukesh — Tue, 06 May 2025 10:35:01 +0000

If you haven't already, I would recommend having a quick look at the Introduction & Sequence Diagram

Welcome to the 3-part series that helps you create a scalable production-ready authentication system using pure JWT & a middleware for your SvelteKit project

You are reading Part 1

Goal: Set up the project and core components for JWT authentication

Topics we'll cover

Tech Stack & Prerequisites: SvelteKit, TypeScript, database (e.g., PostgreSQL), bcrypt, jsonwebtoken
Setup: Create a SvelteKit project & install dependencies
Database Schema: users and jwt_token_logs tables
Database Interface: Functions like createUser, getUserByEmail, logJwtToken
JWT Utilities: Implement generateToken, verifyToken, logToken, and authenticateRequest functions along with cookie module

Tech Stack & Prerequisites

Our implementation uses:

SvelteKit
TypeScript
YOUR_DATABASE_CHOICE (PostgreSQL, MySQL, etc.)
bcrypt (for password hashing)
jsonwebtoken (for JWT handling)

Setup

First, let's create a new SvelteKit project and install the necessary dependencies:

# Create a new SvelteKit project
npm create svelte@latest my-auth-app
cd my-auth-app

# Install dependencies
npm install bcrypt jsonwebtoken
npm install --save-dev @types/bcrypt @types/jsonwebtoken

# Install database driver
npm install [YOUR_DATABASE_DRIVER]

If the above code doesn't work, don't worry!

You have two alternatives.

Create a project from SvelteKit official documentation
Ask ChatGPT how to create a Sveltekit project with a database & follow the steps

Database Schema

We'll need two tables:

users - Stores user information
jwt_token_logs - Logs JWT issuance for audit purposes (not for validation)

Users Table

-- users.sql
CREATE TABLE USERS (
    USER_ID VARCHAR(100) PRIMARY KEY,
    EMAIL VARCHAR(255) NOT NULL UNIQUE,
    PASSWORD VARCHAR(255) NOT NULL,
    ROLE VARCHAR(50) NOT NULL DEFAULT 'user',
    CREATED_AT DATETIME DEFAULT GETDATE(),
    LAST_LOGIN DATETIME NULL
);

JWT Token Logs Table

-- jwt_token_logs.sql
CREATE TABLE JWT_TOKEN_LOGS (
    LOG_ID UNIQUEIDENTIFIER PRIMARY KEY DEFAULT NEWID(), -- Unique ID for the log entry
    USER_ID VARCHAR(100) NOT NULL, -- User the token was issued to
    TOKEN_VALUE TEXT NOT NULL, -- The JWT itself. Consider security implications of logging the full token.
    ISSUED_AT DATETIME NOT NULL, -- Timestamp from within the JWT 'iat' claim
    EXPIRES_AT DATETIME NOT NULL, -- Timestamp from within the JWT 'exp' claim
    LOGGED_AT DATETIME DEFAULT GETDATE(), -- Timestamp when this log entry was created
    ADDITIONAL_DATA TEXT -- Optional: Store context like IP address, user agent, etc.
);

Database Interface

Create a database interface to interact with our tables:

// src/database/db.ts

import crypto from "crypto";
import bcrypt from "bcrypt";

// [INSERT YOUR DATABASE CONNECTION SETUP CODE HERE]
...

export async function createUser(
  email: string,
  password: string,
  role: string = "user"
): Promise<any> {
  try {
    const userId = crypto.randomUUID();

    // Start a transaction to ensure atomicity
    ...

    try {
      // Step 1: Insert the user in database
      ...

      // Step 2: Get the inserted user from database
      ...

      // Commit the transaction
      ...

            // Return user
      return user;
    } catch (error) {
      // If any error occurs, roll back the transaction
      await transaction.rollback();
      throw error;
    }
  } catch (error) {
    console.error("Error creating user:", error);
    return null;
  }
}

export async function getUserByEmail(email: string): Promise<any> {
  try {

      // Fetch the user by email from database
    const result = await ...

        // Return user
    return result.recordset[0] || null;
  } catch (error) {
    console.error("Error fetching user:", error);
    return null;
  }
}

export async function validateUserCredentials(
  email: string,
  password: string
): Promise<any> {
  try {
    // Get user by email from database
    const user = await getUserByEmail(email);

    // If no user found with this email
    if (!user) {
      return null;
    }

    // Compare provided password with stored hash
    const isPasswordValid = await bcrypt.compare(
      password,
      user.PASSWORD
    );

    if (!isPasswordValid) {
      return null;
    }

    // Update last login time of the user in database
    await updateLastLogin(user.USER_ID);

    // Return user without password
    const { PASSWORD, ...userWithoutPassword } = user;
    return userWithoutPassword;
  } catch (error) {
    console.error("Error validating credentials:", error);
    return null;
  }
}

export async function updateLastLogin(
  userId: string
): Promise<boolean> {
  try {

    // Update last login based on userId in database
    ...

    return true;
  } catch (error) {
    console.error("Error updating last login:", error);
    return false;
  }
}

export async function logJwtToken(
  userId: string,
  tokenValue: string,
  issuedAt: Date,
  expiresAt: Date
): Promise<void> {
  try {

    // log JWT token in database
    ...

  } catch (error) {
    console.error("Error logging JWT token:", error);
  }
}

JWT Utilities

Create a JWT utility module:

// src/lib/auth/jwt.ts

import jwt from "jsonwebtoken";
import type { Cookies } from "@sveltejs/kit";
import { dev } from "$app/environment";
import { logJwtToken } from "$lib/database/db";
import { getAuthToken } from "./cookies";

// Re-export cookie functions for backward compatibility
export { setAuthCookie, clearAuthCookies } from "./cookies";

// Types
export interface JwtPayload {
  userId: string;
  email: string;
  role?: string;
  iat?: number;
  exp?: number;
}

interface TokenResponse {
  success: boolean;
  message?: string;
  user?: Omit<JwtPayload, "iat" | "exp">;
  error?: any;
}

// Configuration
const JWT_SECRET =
  process.env.JWT_SECRET ||
  "your-fallback-secret-key-change-in-production";
const ACCESS_TOKEN_EXPIRY = "1h"; // 1 hour

/**
 * Generate a JWT token for a user
 */
export const generateToken = (
  payload: Omit<JwtPayload, "iat" | "exp">
): string => {
  return jwt.sign(payload, JWT_SECRET, {
    expiresIn: ACCESS_TOKEN_EXPIRY,
  });
};

/**
 * Verify the validity of a JWT token
 */
export const verifyToken = (token: string): TokenResponse => {
  try {
    const decoded = jwt.verify(token, JWT_SECRET) as JwtPayload;
    return {
      success: true,
      user: {
        userId: decoded.userId,
        email: decoded.email,
        role: decoded.role,
      },
    };
  } catch (error) {
    return {
      success: false,
      message:
        error instanceof Error ? error.message : "Invalid token",
      error,
    };
  }
};

/**
 * Log JWT token issuance to database
 */
export const logToken = async (
  token: string,
  userId: string
): Promise<void> => {
  try {
    // Decode token to get claims without verification
    const decoded = jwt.decode(token) as JwtPayload;
    const issuedAt = new Date((decoded.iat || 0) * 1000);
    const expiresAt = new Date((decoded.exp || 0) * 1000);

    // Use the database function to log the token
    await logJwtToken(userId, token, issuedAt, expiresAt);
  } catch (error) {
    console.error("Error logging token:", error);
    // Don't throw, as token logging failure shouldn't break authentication
  }
};

/**
 * Handle token-based authentication
 * Returns user info if authenticated or null if not
 */
export const authenticateRequest = (
  cookies: Cookies
): TokenResponse => {
  const accessToken = getAuthToken(cookies);

  if (!accessToken) {
    return {
      success: false,
      message: "No authentication token found",
    };
  }

  return verifyToken(accessToken);
};

Create a cookie module.

// src/lib/auth/cookies.ts

import type { Cookies } from "@sveltejs/kit";
import { dev } from "$app/environment";

// Configuration for authentication cookies
export const COOKIE_OPTIONS = {
  path: "/",
  httpOnly: true,
  secure: !dev, // Only use secure in production
  sameSite: "strict" as const,
  maxAge: 60 * 60, // 1 hour in seconds
};

/**
 * Set authentication cookie in the response
 */
export const setAuthCookie = (
  cookies: Cookies,
  accessToken: string
): void => {
  cookies.set("access_token", accessToken, COOKIE_OPTIONS);
};

/**
 * Clear authentication cookies
 */
export const clearAuthCookies = (cookies: Cookies): void => {
  cookies.delete("access_token", { path: "/" });
  cookies.delete("user", { path: "/" }); // Clear the existing user cookie as well
};

/**
 * Get authentication token from cookies
 */
export const getAuthToken = (
  cookies: Cookies
): string | undefined => {
  return cookies.get("access_token");
};

Next → Part 2: Authentication Flows

Previous → Introduction & Sequence Diagram

SvelteKit JWT Authentication with Middleware: A Complete Implementation

Mukesh — Tue, 06 May 2025 10:34:07 +0000

Introduction

While there are many approaches to handling authentication, using JSON Web Tokens (JWT) without storing session data in a database provides a scalable and efficient solution that's perfect for distributed systems.

In this tutorial, I'll show you how to build a complete authentication system using SvelteKit (with TypeScript) that implements "pure JWT" authentication.

By "pure JWT," I mean we won't be querying the database to validate tokens on each request - instead, we'll rely on cryptographic verification of the JWT itself.

We'll still use a database to

store user information and
log JWT issuance for audit purposes

But the actual authentication will happen without database lookups, making our system more scalable and performant.

Sequence Diagram

This diagram is important, but you don't have to understand everything in the beginning.

If you only care about implementation & making it work quickly, you can skip this section.

Feel free to come back to this as and when you need to enhance your understanding.

Here's how our authentication flow works:

Now, let's dive in

DEV Community: Mukesh

Should you extend Supabase Auth with User Profiles?

Linking Profiles to auth.users

Automatic Profile Creation on Signup

Managing Supabase Auth State Across Server & Client Components in Next.js

The Flow Works Like This:

1. Server-Side Authentication Layer

2. Layout-Based Authentication Sharing

3. Client-Side Auth Provider

4. Client-Side Auth Synchronization

5. Auth State for Server Components

Benefits of This Approach

Part 3: Protecting Routes and Security

SvelteKit Server Hooks (Middleware)

Security Considerations

Conclusion

Next Steps

Part 2: Authentication Flows

Sign-Up Flow

Sign-In Flow

Logout Flow

Part 1: Setup & JWT Basics

Tech Stack & Prerequisites

Setup

Database Schema

Users Table

JWT Token Logs Table

Database Interface

JWT Utilities

SvelteKit JWT Authentication with Middleware: A Complete Implementation

Introduction

Sequence Diagram

Linking Profiles to `auth.users`