Merge pull request #47 from jcreek/11-add-the-description-and-fetching-the-images-from-stripe-on-checkout-success-page

feat(#11): Add the description and fetching the images from Stripe on checkout success page

.env.example

@@ -1,3 +1,6 @@
 PUBLIC_SUPABASE_URL=""
 PUBLIC_SUPABASE_ANON_KEY=""
-PUBLIC_STRIPE_SECRET_KEY=""
+SUPABASE_SERVICE_ROLE_KEY=""
+STRIPE_SECRET_KEY=""
+STRIPE_ENDPOINT_SECRET=""
+VITE_PRODUCT_ID_EXAMPLEPRODUCT=""

README.md

@@ -17,6 +17,13 @@ npm run dev -- --open
 
 An example `.env` file is provided in the repository. You will need to copy `.env.example` to `.env` and fill in the values with your own credentials.
 
+If you want a fully local development environment (other than stripe) then you can follow the instructions in the [database setup](/docs/database-setup.md) document and make use of the local supabase instance and a local email service.
+
+- [Local DB Url](http://localhost:54323/)
+- [Local Email Monitoring Url](http://localhost:54324/)
+
+For stripe, you can forward the events to your local server using `stripe listen --forward-to localhost:5173/api/webhook/stripe --skip-verify` in a separate terminal window.
+
 ## Building
 
 To create a production version:
@@ -48,3 +55,7 @@ Please see the Issues tab for `enhancement` tagged issues.
 ## [Database setup](/docs/database-setup.md)
 
 ## [Stripe webhook event listening](/docs/stripe-setup.md)
+
+## Testing the example credits management system
+
+There is an example system in this project for being able to manage credits that are sold to users. To test this system you can visit the `http://localhost:5173/test/test-credits` route. This will allow you to add credits to a user and then spend them by clicking the buttons on the page, and will show the user's credit balance updating in real time.

docs/database-setup.md

@@ -4,169 +4,14 @@ Databases are stored in Supabase. The auth table for signing up and logging in u
 
 ## Initial Setup
 
-To add the tables for recording their active subscriptions and bought products, as well as products and prices, you can use the following SQL script in the Supabase SQL Editor.
+To add the tables for recording their active subscriptions and bought products, as well as products and prices, you can use the SQL scripts from the `supabase/migrations` folder in the Supabase SQL Editor.
 
-```sql
-/**
-* USERS
-* Note: This table contains user data. Users should only be able to view and update their own data.
-*/
-create table users (
-  -- UUID from auth.users
-  id uuid references auth.users not null primary key,
-  full_name text,
-  avatar_url text,
-  -- The customer's billing address, stored in JSON format.
-  billing_address jsonb,
-  -- Stores your customer's payment instruments.
-  payment_method jsonb
-);
-alter table users
-  enable row level security;
-create policy "Can view own user data." on users
-  for select using ((select auth.uid()) = id);
-create policy "Can update own user data." on users
-  for update using ((select auth.uid()) = id);
+## Common commands for local development
 
-/**
-* This trigger automatically creates a user entry when a new user signs up via Supabase Auth.
-*/
-create function public.handle_new_user()
-returns trigger as
-$$
-  begin
-    insert into public.users (id, full_name, avatar_url)
-    values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
-    return new;
-  end;
-$$
-language plpgsql security definer;
-
-create trigger on_auth_user_created
-  after insert on auth.users
-  for each row
-    execute procedure public.handle_new_user();
-
-/**
-* CUSTOMERS
-* Note: this is a private table that contains a mapping of user IDs to Stripe customer IDs.
-*/
-create table customers (
-  -- UUID from auth.users
-  id uuid references auth.users not null primary key,
-  -- The user's customer ID in Stripe. User must not be able to update this.
-  stripe_customer_id text
-);
-alter table customers enable row level security;
--- No policies as this is a private table that the user must not have access to.
-
-/**
-* PRODUCTS
-* Note: products are created and managed in Stripe and synced to our DB via Stripe webhooks.
-*/
-create table products (
-  -- Product ID from Stripe, e.g. prod_1234.
-  id text primary key,
-  -- Whether the product is currently available for purchase.
-  active boolean,
-  -- The product's name, meant to be displayable to the customer. Whenever this product is sold via a subscription, name will show up on associated invoice line item descriptions.
-  name text,
-  -- The product's description, meant to be displayable to the customer. Use this field to optionally store a long form explanation of the product being sold for your own rendering purposes.
-  description text,
-  -- A URL of the product image in Stripe, meant to be displayable to the customer.
-  image text,
-  -- Set of key-value pairs, used to store additional information about the object in a structured format.
-  metadata jsonb
-);
-alter table products
-  enable row level security;
-create policy "Allow public read-only access." on products
-  for select using (true);
-
-/**
-* PRICES
-* Note: prices are created and managed in Stripe and synced to our DB via Stripe webhooks.
-*/
-create type pricing_type as enum ('one_time', 'recurring');
-create type pricing_plan_interval as enum ('day', 'week', 'month', 'year');
-create table prices (
-  -- Price ID from Stripe, e.g. price_1234.
-  id text primary key,
-  -- The ID of the prduct that this price belongs to.
-  product_id text references products,
-  -- Whether the price can be used for new purchases.
-  active boolean,
-  -- A brief description of the price.
-  description text,
-  -- The unit amount as a positive integer in the smallest currency unit (e.g., 100 cents for US$1.00 or 100 for ¥100, a zero-decimal currency).
-  unit_amount bigint,
-  -- Three-letter ISO currency code, in lowercase.
-  currency text check (char_length(currency) = 3),
-  -- One of `one_time` or `recurring` depending on whether the price is for a one-time purchase or a recurring (subscription) purchase.
-  type pricing_type,
-  -- The frequency at which a subscription is billed. One of `day`, `week`, `month` or `year`.
-  interval pricing_plan_interval,
-  -- The number of intervals (specified in the `interval` attribute) between subscription billings. For example, `interval=month` and `interval_count=3` bills every 3 months.
-  interval_count integer,
-  -- Default number of trial days when subscribing a customer to this price using [`trial_from_plan=true`](https://stripe.com/docs/api#create_subscription-trial_from_plan).
-  trial_period_days integer,
-  -- Set of key-value pairs, used to store additional information about the object in a structured format.
-  metadata jsonb
-);
-alter table prices
-  enable row level security;
-create policy "Allow public read-only access." on prices
-  for select using (true);
-
-/**
-* SUBSCRIPTIONS
-* Note: subscriptions are created and managed in Stripe and synced to our DB via Stripe webhooks.
-*/
-create type subscription_status as enum ('trialing', 'active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'unpaid');
-create table subscriptions (
-  -- Subscription ID from Stripe, e.g. sub_1234.
-  id text primary key,
-  user_id uuid references auth.users not null,
-  -- The status of the subscription object, one of subscription_status type above.
-  status subscription_status,
-  -- Set of key-value pairs, used to store additional information about the object in a structured format.
-  metadata jsonb,
-  -- ID of the price that created this subscription.
-  price_id text references prices,
-  -- Quantity multiplied by the unit amount of the price creates the amount of the subscription. Can be used to charge multiple seats.
-  quantity integer,
-  -- If true the subscription has been canceled by the user and will be deleted at the end of the billing period.
-  cancel_at_period_end boolean,
-  -- Time at which the subscription was created.
-  created timestamp with time zone default timezone('utc'::text, now()) not null,
-  -- Start of the current period that the subscription has been invoiced for.
-  current_period_start timestamp with time zone default timezone('utc'::text, now()) not null,
-  -- End of the current period that the subscription has been invoiced for. At the end of this period, a new invoice will be created.
-  current_period_end timestamp with time zone default timezone('utc'::text, now()) not null,
-  -- If the subscription has ended, the timestamp of the date the subscription ended.
-  ended_at timestamp with time zone default timezone('utc'::text, now()),
-  -- A date in the future at which the subscription will automatically get canceled.
-  cancel_at timestamp with time zone default timezone('utc'::text, now()),
-  -- If the subscription has been canceled, the date of that cancellation. If the subscription was canceled with `cancel_at_period_end`, `canceled_at` will still reflect the date of the initial cancellation request, not the end of the subscription period when the subscription is automatically moved to a canceled state.
-  canceled_at timestamp with time zone default timezone('utc'::text, now()),
-  -- If the subscription has a trial, the beginning of that trial.
-  trial_start timestamp with time zone default timezone('utc'::text, now()),
-  -- If the subscription has a trial, the end of that trial.
-  trial_end timestamp with time zone default timezone('utc'::text, now())
-);
-alter table subscriptions
-  enable row level security;
-create policy "Can only view own subs data." on subscriptions
-  for select using ((select auth.uid()) = user_id);
-
-/**
- * REALTIME SUBSCRIPTIONS
- * Only allow realtime listening on public tables.
- */
-drop publication if exists supabase_realtime;
-create publication supabase_realtime
-  for table products, prices;
-```
+- `npx supabase start` - Start the local Supabase instance
+- `npx supabase stop` - Stop the local Supabase instance
+- `npx supabase db reset` - Reset the local database
+- `npx supabase gen types typescript --local > src/lib/types/supabase.d.ts` - Generate types for the local database
 
 ## Generating Types
 
@@ -178,11 +23,11 @@ To get the types for the tables, you can follow these instructions taken from [h
 
 `npx supabase init`
 
-Replace `$PROJECT_REF` with your project reference:
-`npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts`
+Replace `$PROJECT_REF` with your project reference and replace `types/supabase.d.ts` with whatever file you want your types in:
+`npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > src/lib/types/supabase.d.ts`
 
-Replace `types/supabase.d.ts` with whatever file you want your types in:
-`npx supabase gen types typescript --local > types/supabase.d.ts`
+If you are using a local Supabase instance, you can use the following command to generate the types:
+`npx supabase gen types typescript --local > src/lib/types/supabase.d.ts`
 
 ## Local DB Development
 
@@ -196,6 +41,8 @@ npx supabase start
 npx supabase stop
 ```
 
+This will start the local DB and email monitoring services. You can access the web interfaces for the local DB at [http://localhost:54323/](http://localhost:54323/) and the email monitoring at [http://localhost:54324/](http://localhost:54324/).It will also give you the API URL, anon key and service_role key to put in your `.env` file for local development.
+
 ## Migrations
 
 There are two options to create a migration file:
@@ -237,3 +84,28 @@ Reset database in cloud
 > Prerequisite login using `npx supabase login`
 
 `npx supabase db reset --linked`
+
+## Enabling sending emails with Brevo
+
+1. Go to the Project Settings in Supabase, then Authentication, then SMTP Settings. You should end up at `https://supabase.com/dashboard/project/[your-project-here]/settings/auth`
+2. Enable custom SMTP and fill in the required fields with your Brevo credentials.
+
+- You need to have an email address that you can send stuff from
+- You need to have a Brevo account
+- sender email as noreply@yourdomain.com
+
+3. `https://app.brevo.com/senders/list` to add senders
+4. Add a sender for noreply@yourdomain.com
+5. Verify your email domain via DKIM or DMARC
+6. In Brevo go to `https://app.brevo.com/settings/keys/smtp` to see your SMTP credentials.
+7. Fill in the SMTP credentials in Supabase.
+8. Go to `https://supabase.com/dashboard/project/[your-project-here]/auth/url-configuration`
+9. Add these redirect URLs:
+
+- `http://localhost:3000`
+- `http://localhost:3000/**`
+- `https://www.your-domain.com`
+- `https://your-domain.com`
+- `http://localhost:5173`
+- `http://localhost:5173/**`
+- Add your netlify.app domain here with **-- at the start, e.g. `http://**--your-netlify-app.netlify.app`

docs/stripe-setup.md

@@ -16,9 +16,9 @@ stripe listen
 
 Add the secret key to to your .env(.local):
 
-`PUBLIC_STRIPE_ENDPOINT_SECRET`
+`STRIPE_ENDPOINT_SECRET`
 
-### Testing the webhook locally
+## Testing the webhook locally
 
 You can use the [Stripe CLI to forward events to your local server](https://docs.stripe.com/webhooks):
 
@@ -32,4 +32,8 @@ To disable HTTPS certificate verification, use the --skip-verify optional flag.
 stripe listen --forward-to localhost:5173/api/webhook/stripe --skip-verify
 ```
 
-TODO - Add instructions for what else to do to get the webhook working locally.
+## Purchaseable products
+
+As well as subscriptions you can also create purchaseable products in Stripe. These can be used for one-off payments or for products that are not subscription based. To add these to the application you can follow the example product's pattern.
+
+There is a config value `VITE_PRODUCT_ID_EXAMPLEPRODUCT` that is used to identify the product in the Stripe checkout session. This is the product code from Stripe. The actual 'product' that users are getting access to is at the `src/routes/tools/exampleproduct` path.

package.json

@@ -9,7 +9,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"generate": "supabase gen types typescript --local > src/lib/types/supabase.d.ts && prettier --write src/lib/types/supabase.d.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -40,15 +41,19 @@
 		"svelte-check": "^3.6.2",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
-		"typescript": "^5.3.3"
+		"typescript": "^5.3.3",
+		"vite": "^5.4.6",
+		"vite-plugin-tailwind-purgecss": "^0.3.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@supabase/ssr": "^0.4.0",
 		"@supabase/supabase-js": "^2.44.2",
-		"stripe": "^15.4.0"
+		"stripe": "^15.4.0",
+		"ts-debounce": "^4.0.0"
 	},
 	"engines": {
 		"node": ">=18.13.0"
-	}
+	},
+	"packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }

postcss.config.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
-};

src/app.d.ts

@@ -2,10 +2,14 @@
 // for information about these interfaces
 // and what to do when importing types
 import { SupabaseClient, Session, User } from '@supabase/supabase-js';
-import type { Database } from '$types/supabase';
+import type { Database } from '$lib/types/supabase';
 declare global {
 	const __DATE__: string;
 	const __RELOAD_SW__: boolean;
+
+	// Enable images with query params
+	declare module '*&img';
+
 	namespace App {
 		// interface Error {}
 		interface Locals {

src/app.pcss

@@ -1 +0,0 @@
-/* Write your global styles here, in PostCSS syntax */

src/hooks.server.ts

@@ -1,23 +1,28 @@
 import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
 import { createServerClient } from '@supabase/ssr';
 import type { Handle } from '@sveltejs/kit';
+import type { Database } from '$lib/types/supabase';
 
 export const handle: Handle = async ({ event, resolve }) => {
-	event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
-		cookies: {
-			getAll: () => event.cookies.getAll(),
-			/**
-			 * SvelteKit's cookies API requires `path` to be explicitly set in
-			 * the cookie options. Setting `path` to `/` replicates previous/
-			 * standard behavior.
-			 */
-			setAll: (cookiesToSet) => {
-				cookiesToSet.forEach(({ name, value, options }) => {
-					event.cookies.set(name, value, { ...options, path: '/' });
-				});
+	event.locals.supabase = createServerClient<Database>(
+		PUBLIC_SUPABASE_URL,
+		PUBLIC_SUPABASE_ANON_KEY,
+		{
+			cookies: {
+				getAll: () => event.cookies.getAll(),
+				/**
+				 * SvelteKit's cookies API requires `path` to be explicitly set in
+				 * the cookie options. Setting `path` to `/` replicates previous/
+				 * standard behavior.
+				 */
+				setAll: (cookiesToSet) => {
+					cookiesToSet.forEach(({ name, value, options }) => {
+						event.cookies.set(name, value, { ...options, path: '/' });
+					});
+				}
 			}
 		}
-	});
+	);
 
 	/**
 	 * Unlike `supabase.auth.getSession()`, which returns the session _without_

src/lib/components/CookieConsent.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import { isBrowser } from '@supabase/ssr';
+	import { onMount } from 'svelte';
 
 	export let cookiesAccepted;
-	let showBanner = !cookiesAccepted;
-	$: showBanner = !cookiesAccepted;
+	let showBanner = false;
+
+	onMount(() => {
+		if (!cookiesAccepted) {
+			const storedValue = localStorage.getItem('cookiesAccepted');
+			showBanner = storedValue !== 'true';
+		}
+	});
 
 	const acceptCookies = () => {
-		if (isBrowser()) {
-			localStorage.setItem('cookiesAccepted', 'true');
-			showBanner = false;
-		}
+		localStorage.setItem('cookiesAccepted', 'true');
+		showBanner = false;
 	};
-
 </script>
 
 {#if showBanner}

src/lib/components/MagicLink.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	export let supabase: any;
+
+	let error = '',
+		message = '',
+		loading = false,
+		email = '';
+
+	async function submit() {
+		error = '';
+		message = '';
+		loading = true;
+
+		const { error: err } = await supabase.auth.signInWithOtp({ email });
+
+		if (err) error = err.message;
+		else message = 'Check your email for the magic link.';
+
+		loading = false;
+	}
+</script>
+
+<div class="p-4">
+	<div class="component">
+		<div class="container">
+			<form on:submit|preventDefault={submit}>
+				<label class="input input-bordered flex items-center gap-2">
+					Email
+					<input
+						type="text"
+						name="email"
+						class="grow"
+						placeholder="Your email address"
+						bind:value={email}
+					/>
+				</label>
+				<button class="btn btn-active btn-primary w-full" on:click disabled={loading}
+					>Send magic link</button
+				>
+
+				{#if message}
+					<div class="text-success">
+						{message}
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="text-error">
+						{error}
+					</div>
+				{/if}
+			</form>
+		</div>
+	</div>
+</div>
+
+<style>
+	.component {
+		width: 100%;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/lib/components/NavLinks.svelte

@@ -8,7 +8,7 @@
 		<div tabindex="0" role="button" class="">Parent</div>
 	{:else}
 		<details>
-			<summary>Parent</summary>
+			<summary class="flex items-center"><span class="mr-1">&#x25BC;</span>Parent </summary>
 		</details>
 	{/if}
 	<ul
@@ -20,4 +20,4 @@
 		<li><a href="/">Submenu 2</a></li>
 	</ul>
 </li>
-<li><a href="/">Item 3</a></li>
+<li><a href="/tools/exampleproduct">Example Product</a></li>

src/lib/components/SignUp.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import stripe from 'stripe';
-	import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
 
 	let email = '';
 	let password = '';
@@ -8,8 +6,6 @@
 	// Access the supabase client from the layout data
 	export let supabase: any;
 
-	const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
-
 	async function signUpNewUser() {
 		try {
 			const { data, error } = await supabase.auth.signUp({
@@ -25,21 +21,6 @@
 				throw error;
 			}
 
-			const customer = await stripeClient.customers.create({
-				email
-			});
-
-			const response = await supabase
-				.from('user')
-				.update({
-					customer_id: customer.id
-				})
-				.match({
-					id: data.user.id
-				});
-
-			console.log(response);
-
 			// Handle success (optional)
 		} catch (error: any) {
 			console.error('Sign up error:', error.message);

src/lib/components/checkout/OrderConfirmationItem.svelte

@@ -2,7 +2,7 @@
 	import { formatCurrency } from '$lib/utils/currency';
 	export let imgAlt = '';
 	export let imgSrc = '';
-	// export let itemCategoryDescription = '';
+	export let itemCategoryDescription = '';
 	export let itemName = '';
 	export let price = 0;
 	export let quantity = 0;
@@ -20,11 +20,11 @@
 			<h5 class="font-semibold text-xl leading-8 text-black max-[550px]:text-center">
 				{itemName}
 			</h5>
-			<!-- <p
+			<p
 				class="font-normal text-lg leading-8 text-gray-500 my-2 min-[550px]:my-3 max-[550px]:text-center"
 			>
 				{itemCategoryDescription}
-			</p> -->
+			</p>
 
 			<div class="flex items-center">
 				<h6

src/lib/components/products/ProductsListItem.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	export let product;
+
+	const defaultPrice = product.prices[0];
+	const isSubscription = defaultPrice.type === 'recurring';
 </script>
 
 <a href="/products/{product.id}" class="max-w-[384px] mx-auto">
@@ -13,7 +16,7 @@
 	<div class="mt-5 flex items-center justify-between">
 		<div class="">
 			<h6 class="font-medium text-xl leading-8 text-black mb-2">{product.name}</h6>
-			<h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice}</h6>
+			<h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice} {isSubscription ? `/ ${defaultPrice.interval}` : ''}</h6>
 		</div>
 		<button
 			class="p-2 min-[400px]:p-4 rounded-full bg-white border border-gray-300 flex items-center justify-center group shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200 hover:border-gray-400 hover:bg-gray-50"

src/lib/types/Products/ProductInfo.ts

@@ -0,0 +1,7 @@
+import Stripe from 'stripe';
+
+export type ProductInfo  = {
+  product: Stripe.Product;
+  price: Stripe.Price;
+  isSubscription: boolean;
+};

src/lib/types/supabase.d.ts

@@ -34,6 +34,38 @@ export type Database = {
   }
   public: {
     Tables: {
+      credit_transactions: {
+        Row: {
+          created_at: string
+          credits_change: number
+          description: string | null
+          id: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          credits_change: number
+          description?: string | null
+          id?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          credits_change?: number
+          description?: string | null
+          id?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "credit_transactions_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       customers: {
         Row: {
           id: string
@@ -66,7 +98,7 @@ export type Database = {
           interval: Database["public"]["Enums"]["pricing_plan_interval"] | null
           interval_count: number | null
           metadata: Json | null
-          product_id: string | null
+          product_id: string
           trial_period_days: number | null
           type: Database["public"]["Enums"]["pricing_type"] | null
           unit_amount: number | null
@@ -79,7 +111,7 @@ export type Database = {
           interval?: Database["public"]["Enums"]["pricing_plan_interval"] | null
           interval_count?: number | null
           metadata?: Json | null
-          product_id?: string | null
+          product_id: string
           trial_period_days?: number | null
           type?: Database["public"]["Enums"]["pricing_type"] | null
           unit_amount?: number | null
@@ -92,7 +124,7 @@ export type Database = {
           interval?: Database["public"]["Enums"]["pricing_plan_interval"] | null
           interval_count?: number | null
           metadata?: Json | null
-          product_id?: string | null
+          product_id?: string
           trial_period_days?: number | null
           type?: Database["public"]["Enums"]["pricing_type"] | null
           unit_amount?: number | null
@@ -110,30 +142,85 @@ export type Database = {
       products: {
         Row: {
           active: boolean | null
+          created_at: string
           description: string | null
+          features: string[] | null
           id: string
-          image: string | null
+          images: string[] | null
           metadata: Json | null
           name: string | null
+          updated_at: string
         }
         Insert: {
           active?: boolean | null
+          created_at?: string
           description?: string | null
+          features?: string[] | null
           id: string
-          image?: string | null
+          images?: string[] | null
           metadata?: Json | null
           name?: string | null
+          updated_at?: string
         }
         Update: {
           active?: boolean | null
+          created_at?: string
           description?: string | null
+          features?: string[] | null
           id?: string
-          image?: string | null
+          images?: string[] | null
           metadata?: Json | null
           name?: string | null
+          updated_at?: string
         }
         Relationships: []
       }
+      purchases: {
+        Row: {
+          id: string
+          price_id: string
+          product_id: string
+          purchased_at: string
+          user_id: string
+        }
+        Insert: {
+          id?: string
+          price_id: string
+          product_id: string
+          purchased_at?: string
+          user_id: string
+        }
+        Update: {
+          id?: string
+          price_id?: string
+          product_id?: string
+          purchased_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "purchases_price_id_fkey"
+            columns: ["price_id"]
+            isOneToOne: false
+            referencedRelation: "prices"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "purchases_product_id_fkey"
+            columns: ["product_id"]
+            isOneToOne: false
+            referencedRelation: "products"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "purchases_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       subscriptions: {
         Row: {
           cancel_at: string | null
@@ -146,6 +233,7 @@ export type Database = {
           id: string
           metadata: Json | null
           price_id: string | null
+          product_id: string
           quantity: number | null
           status: Database["public"]["Enums"]["subscription_status"] | null
           trial_end: string | null
@@ -163,6 +251,7 @@ export type Database = {
           id: string
           metadata?: Json | null
           price_id?: string | null
+          product_id: string
           quantity?: number | null
           status?: Database["public"]["Enums"]["subscription_status"] | null
           trial_end?: string | null
@@ -180,6 +269,7 @@ export type Database = {
           id?: string
           metadata?: Json | null
           price_id?: string | null
+          product_id?: string
           quantity?: number | null
           status?: Database["public"]["Enums"]["subscription_status"] | null
           trial_end?: string | null
@@ -194,6 +284,13 @@ export type Database = {
             referencedRelation: "prices"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "subscriptions_product_id_fkey"
+            columns: ["product_id"]
+            isOneToOne: false
+            referencedRelation: "products"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "subscriptions_user_id_fkey"
             columns: ["user_id"]
@@ -203,27 +300,44 @@ export type Database = {
           },
         ]
       }
-      users: {
+      user_credits: {
         Row: {
-          avatar_url: string | null
-          billing_address: Json | null
-          full_name: string | null
-          id: string
-          payment_method: Json | null
+          credits_remaining: number
+          last_updated: string
+          user_id: string
         }
         Insert: {
-          avatar_url?: string | null
-          billing_address?: Json | null
-          full_name?: string | null
-          id: string
-          payment_method?: Json | null
+          credits_remaining?: number
+          last_updated?: string
+          user_id: string
+        }
+        Update: {
+          credits_remaining?: number
+          last_updated?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "user_credits_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: true
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      users: {
+        Row: {
+          id: string
+          name: string | null
+        }
+        Insert: {
+          id: string
+          name?: string | null
         }
         Update: {
-          avatar_url?: string | null
-          billing_address?: Json | null
-          full_name?: string | null
           id?: string
-          payment_method?: Json | null
+          name?: string | null
         }
         Relationships: [
           {
@@ -253,315 +367,7 @@ export type Database = {
         | "incomplete_expired"
         | "past_due"
         | "unpaid"
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-  storage: {
-    Tables: {
-      buckets: {
-        Row: {
-          allowed_mime_types: string[] | null
-          avif_autodetection: boolean | null
-          created_at: string | null
-          file_size_limit: number | null
-          id: string
-          name: string
-          owner: string | null
-          owner_id: string | null
-          public: boolean | null
-          updated_at: string | null
-        }
-        Insert: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id: string
-          name: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
-        Update: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id?: string
-          name?: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
-      migrations: {
-        Row: {
-          executed_at: string | null
-          hash: string
-          id: number
-          name: string
-        }
-        Insert: {
-          executed_at?: string | null
-          hash: string
-          id: number
-          name: string
-        }
-        Update: {
-          executed_at?: string | null
-          hash?: string
-          id?: number
-          name?: string
-        }
-        Relationships: []
-      }
-      objects: {
-        Row: {
-          bucket_id: string | null
-          created_at: string | null
-          id: string
-          last_accessed_at: string | null
-          metadata: Json | null
-          name: string | null
-          owner: string | null
-          owner_id: string | null
-          path_tokens: string[] | null
-          updated_at: string | null
-          version: string | null
-        }
-        Insert: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          version?: string | null
-        }
-        Update: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          version?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "objects_bucketId_fkey"
-            columns: ["bucket_id"]
-            isOneToOne: false
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      s3_multipart_uploads: {
-        Row: {
-          bucket_id: string
-          created_at: string
-          id: string
-          in_progress_size: number
-          key: string
-          owner_id: string | null
-          upload_signature: string
-          version: string
-        }
-        Insert: {
-          bucket_id: string
-          created_at?: string
-          id: string
-          in_progress_size?: number
-          key: string
-          owner_id?: string | null
-          upload_signature: string
-          version: string
-        }
-        Update: {
-          bucket_id?: string
-          created_at?: string
-          id?: string
-          in_progress_size?: number
-          key?: string
-          owner_id?: string | null
-          upload_signature?: string
-          version?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "s3_multipart_uploads_bucket_id_fkey"
-            columns: ["bucket_id"]
-            isOneToOne: false
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      s3_multipart_uploads_parts: {
-        Row: {
-          bucket_id: string
-          created_at: string
-          etag: string
-          id: string
-          key: string
-          owner_id: string | null
-          part_number: number
-          size: number
-          upload_id: string
-          version: string
-        }
-        Insert: {
-          bucket_id: string
-          created_at?: string
-          etag: string
-          id?: string
-          key: string
-          owner_id?: string | null
-          part_number: number
-          size?: number
-          upload_id: string
-          version: string
-        }
-        Update: {
-          bucket_id?: string
-          created_at?: string
-          etag?: string
-          id?: string
-          key?: string
-          owner_id?: string | null
-          part_number?: number
-          size?: number
-          upload_id?: string
-          version?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "s3_multipart_uploads_parts_bucket_id_fkey"
-            columns: ["bucket_id"]
-            isOneToOne: false
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "s3_multipart_uploads_parts_upload_id_fkey"
-            columns: ["upload_id"]
-            isOneToOne: false
-            referencedRelation: "s3_multipart_uploads"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-    }
-    Views: {
-      [_ in never]: never
-    }
-    Functions: {
-      can_insert_object: {
-        Args: {
-          bucketid: string
-          name: string
-          owner: string
-          metadata: Json
-        }
-        Returns: undefined
-      }
-      extension: {
-        Args: {
-          name: string
-        }
-        Returns: string
-      }
-      filename: {
-        Args: {
-          name: string
-        }
-        Returns: string
-      }
-      foldername: {
-        Args: {
-          name: string
-        }
-        Returns: string[]
-      }
-      get_size_by_bucket: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          size: number
-          bucket_id: string
-        }[]
-      }
-      list_multipart_uploads_with_delimiter: {
-        Args: {
-          bucket_id: string
-          prefix_param: string
-          delimiter_param: string
-          max_keys?: number
-          next_key_token?: string
-          next_upload_token?: string
-        }
-        Returns: {
-          key: string
-          id: string
-          created_at: string
-        }[]
-      }
-      list_objects_with_delimiter: {
-        Args: {
-          bucket_id: string
-          prefix_param: string
-          delimiter_param: string
-          max_keys?: number
-          start_after?: string
-          next_token?: string
-        }
-        Returns: {
-          name: string
-          id: string
-          metadata: Json
-          updated_at: string
-        }[]
-      }
-      operation: {
-        Args: Record<PropertyKey, never>
-        Returns: string
-      }
-      search: {
-        Args: {
-          prefix: string
-          bucketname: string
-          limits?: number
-          levels?: number
-          offsets?: number
-          search?: string
-          sortcolumn?: string
-          sortorder?: string
-        }
-        Returns: {
-          name: string
-          id: string
-          updated_at: string
-          created_at: string
-          last_accessed_at: string
-          metadata: Json
-        }[]
-      }
-    }
-    Enums: {
-      [_ in never]: never
+        | "paused"
     }
     CompositeTypes: {
       [_ in never]: never

src/lib/utils/stripe.ts

@@ -0,0 +1,4 @@
+import Stripe from 'stripe'
+import { STRIPE_SECRET_KEY } from '$env/static/private'
+
+export const stripe = new Stripe(STRIPE_SECRET_KEY)

src/lib/utils/supabase/admin.ts

@@ -1,8 +1,9 @@
 import { createClient } from '@supabase/supabase-js';
 import stripe from 'stripe';
-import type { Database, Tables, TablesInsert } from '$types/supabase';
-import { PUBLIC_SUPABASE_URL, PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
+import type { Database, Tables, TablesInsert } from '$lib/types/supabase';
+import { PUBLIC_SUPABASE_URL } from '$env/static/public';
 import { SUPABASE_SERVICE_ROLE_KEY } from '$env/static/private';
+import { stripe as stripeClient } from '$lib/utils/stripe';
 
 const toDateTime = (secs: number) => {
 	const t = new Date(+0); // Unix epoch start.
@@ -10,8 +11,6 @@ const toDateTime = (secs: number) => {
 	return t;
 };
 
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
-
 type Product = Tables<'products'>;
 type Price = Tables<'prices'>;
 
@@ -31,8 +30,11 @@ const upsertProductRecord = async (product: stripe.Product) => {
 		active: product.active,
 		name: product.name,
 		description: product.description ?? null,
-		image: product.images?.[0] ?? null,
-		metadata: product.metadata
+		features: product.marketing_features.map(({ name }) => name || '').filter((name) => !!name),
+		images: product.images ?? null,
+		metadata: product.metadata,
+		created_at: new Date(product.created * 1000).toISOString(),
+		updated_at: new Date(product.updated * 1000).toISOString()
 	};
 
 	const { error: upsertError } = await supabaseAdmin.from('products').upsert([productData]);
@@ -46,6 +48,8 @@ const upsertPriceRecord = async (price: stripe.Price, retryCount = 0, maxRetries
 		product_id: typeof price.product === 'string' ? price.product : '',
 		active: price.active,
 		currency: price.currency,
+		description: price.nickname ?? null,
+		metadata: price.metadata,
 		type: price.type,
 		unit_amount: price.unit_amount ?? null,
 		interval: price.recurring?.interval ?? null,
@@ -106,6 +110,31 @@ const createCustomerInStripe = async (uuid: string, email: string) => {
 	return newCustomer.id;
 };
 
+const getStripeCustomerId = async (email: string, uuid: string) => {
+	const { data: existingSupabaseCustomer, error: queryError } = await supabaseAdmin
+		.from('customers')
+		.select('*')
+		.eq('id', uuid)
+		.maybeSingle();
+
+	if (queryError) {
+		throw new Error(`Supabase customer lookup failed: ${queryError.message}`);
+	}
+
+	let stripeCustomerId: string | undefined;
+	if (existingSupabaseCustomer?.stripe_customer_id) {
+		const existingStripeCustomer = await stripeClient.customers.retrieve(
+			existingSupabaseCustomer.stripe_customer_id
+		);
+		stripeCustomerId = existingStripeCustomer.id;
+	} else {
+		const stripeCustomers = await stripeClient.customers.list({ email: email });
+		stripeCustomerId = stripeCustomers.data.length > 0 ? stripeCustomers.data[0].id : undefined;
+	}
+
+	return stripeCustomerId;
+};
+
 const createOrRetrieveCustomer = async ({ email, uuid }: { email: string; uuid: string }) => {
 	// Check if the customer already exists in Supabase
 	const { data: existingSupabaseCustomer, error: queryError } = await supabaseAdmin
@@ -207,10 +236,9 @@ const manageSubscriptionStatusChange = async (
 		user_id: uuid,
 		metadata: subscription.metadata,
 		status: subscription.status,
+		product_id: subscription.items.data[0].price.product as string,
 		price_id: subscription.items.data[0].price.id,
-		//TODO check quantity on subscription
-
-		quantity: subscription.quantity,
+		quantity: 1, //subscription.quantity,
 		cancel_at_period_end: subscription.cancel_at_period_end,
 		cancel_at: subscription.cancel_at ? toDateTime(subscription.cancel_at).toISOString() : null,
 		canceled_at: subscription.canceled_at
@@ -232,13 +260,224 @@ const manageSubscriptionStatusChange = async (
 	if (upsertError) throw new Error(`Subscription insert/update failed: ${upsertError.message}`);
 	console.log(`Inserted/updated subscription [${subscription.id}] for user [${uuid}]`);
 
-	// For a new subscription copy the billing details to the customer object.
-	// NOTE: This is a costly operation and should happen at the very end.
-	if (createAction && subscription.default_payment_method && uuid)
-		await copyBillingDetailsToCustomer(
-			uuid,
-			subscription.default_payment_method as stripe.PaymentMethod
-		);
+	// // For a new subscription copy the billing details to the customer object.
+	// // NOTE: This is a costly operation and should happen at the very end.
+	// if (createAction && subscription.default_payment_method && uuid) {
+	// 	await copyBillingDetailsToCustomer(
+	// 		uuid,
+	// 		subscription.default_payment_method as stripe.PaymentMethod
+	// 	);
+	// }
+};
+
+const recordProductPurchase = async (userId: string, productId: string, priceId: string) => {
+	console.log(
+		`Recording product purchase for user [${userId}] and product [${productId}] with price [${priceId}]`
+	);
+
+	try {
+		const { error } = await supabaseAdmin
+			.from('purchases')
+			.insert([{ user_id: userId, product_id: productId, price_id: priceId }]);
+
+		if (error) {
+			throw new Error(`Failed to record product purchase: ${error.message}`);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+
+	console.log(`Product purchased recorded for user [${userId}] and product [${productId}]`);
+};
+
+const hasProductAccess = async (userId: string, productId: string) => {
+	// Check if user has purchased the product
+	const { data: purchases, error: purchaseError } = await supabaseAdmin
+		.from('purchases')
+		.select('*')
+		.eq('user_id', userId)
+		.eq('product_id', productId);
+
+	if (purchaseError) throw new Error(purchaseError.message);
+
+	if (purchases && purchases.length > 0) {
+		// User has purchased the product
+		return true;
+	}
+
+	// Check if user has an active subscription for the product
+	const { data: subscriptions, error: subError } = await supabaseAdmin
+		.from('subscriptions')
+		.select('*')
+		.eq('user_id', userId)
+		.eq('product_id', productId)
+		.in('status', ['active', 'trialing']);
+
+	if (subError) throw new Error(subError.message);
+
+	if (subscriptions && subscriptions.length > 0) {
+		// User has an active subscription
+		return true;
+	}
+
+	return false;
+};
+
+const validateInput = (userId: string, credits: number, description: string) => {
+	if (!userId) throw new Error('User ID is required');
+	if (credits <= 0) throw new Error('Credits must be greater than zero');
+	if (!description) throw new Error('Description is required');
+};
+
+const logCreditTransaction = async (userId: string, creditsChange: number, description: string) => {
+	const { error } = await supabaseAdmin.from('credit_transactions').insert({
+		user_id: userId,
+		credits_change: creditsChange,
+		description,
+		created_at: new Date().toISOString()
+	});
+
+	if (error) {
+		throw new Error(`Error logging credit transaction: ${error.message}`);
+	}
+};
+
+const updateUserCredits = async (userId: string, creditsChange: number, description: string) => {
+	validateInput(userId, Math.abs(creditsChange), description);
+
+	const { data: creditData, error: fetchError } = await supabaseAdmin
+		.from('user_credits')
+		.select('credits_remaining, last_updated')
+		.eq('user_id', userId)
+		.single();
+
+	if (fetchError) {
+		throw new Error(`Error fetching credits: ${fetchError.message}`);
+	}
+
+	const newCreditTotal = (creditData?.credits_remaining || 0) + creditsChange;
+
+	if (newCreditTotal < 0) {
+		throw new Error('Insufficient credits');
+	}
+
+	const { error: upsertError } = await supabaseAdmin
+		.from('user_credits')
+		.upsert(
+			{
+				user_id: userId,
+				credits_remaining: newCreditTotal,
+				last_updated: new Date().toISOString()
+			},
+			{
+				onConflict: 'user_id'
+			}
+		)
+		.eq('last_updated', creditData?.last_updated); // Optimistic concurrency control
+
+	if (upsertError) {
+		throw new Error(`Error updating credits: ${upsertError.message}`);
+	}
+
+	await logCreditTransaction(userId, creditsChange, description);
+
+	console.log(
+		`${creditsChange > 0 ? 'Added' : 'Deducted'} ${Math.abs(creditsChange)} credits to user [${userId}]`
+	);
+};
+
+const addCredits = async (userId: string, creditsToAdd: number, description: string) => {
+	try {
+		await updateUserCredits(userId, creditsToAdd, description);
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+const deductCredits = async (userId: string, creditsToDeduct: number, description: string) => {
+	try {
+		await updateUserCredits(userId, -creditsToDeduct, description);
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+const getUserCredits = async (userId: string) => {
+	if (!userId) throw new Error('User ID is required');
+
+	// Fetch the user's credits from the user_credits table
+	const { data: creditData, error } = await supabaseAdmin
+		.from('user_credits')
+		.select('credits_remaining')
+		.eq('user_id', userId)
+		.single();
+
+	if (error && error.code !== 'PGRST116') {
+		// Code 'PGRST116' represents no rows found
+		throw new Error(`Error fetching credits: ${error.message}`);
+	}
+
+	if (!creditData) {
+		// If no row exists in the user_credits table, insert a new row for the user
+		const { error: insertError } = await supabaseAdmin.from('user_credits').insert({
+			user_id: userId,
+			credits_remaining: 0
+		});
+
+		if (insertError) {
+			throw new Error(`Error creating user credits: ${insertError.message}`);
+		}
+
+		return 0;
+	}
+
+	return creditData.credits_remaining;
+};
+
+type ProductWithPrices = Product & {
+	prices: Price[];
+	actualPrice?: number;
+};
+
+const getActiveProductsWithPrices = async (limit = 10, offset = 0) => {
+	const {
+		data: products,
+		error,
+		count
+	} = await supabaseAdmin
+		.from('products')
+		.select('*, prices(*)', { count: 'exact' })
+		.eq('active', true)
+		.order('name', { ascending: true })
+		.range(offset, offset + limit - 1);
+
+	if (error) {
+		throw new Error(`Error fetching products: ${error.message}`);
+	}
+
+	for (const product of products as ProductWithPrices[]) {
+		if (product.prices && product.prices.length > 0) {
+			// Assuming the default price is the first one
+			const defaultPrice = product.prices[0];
+			product.actualPrice = defaultPrice.unit_amount! / 100;
+		}
+	}
+
+	return { products: products as ProductWithPrices[], count };
+};
+
+const getProductById = async (productId: string) => {
+	const { data: product, error } = await supabaseAdmin
+		.from('products')
+		.select('*')
+		.eq('id', productId)
+		.single();
+
+	if (error) {
+		throw new Error(`Error fetching product: ${error.message}`);
+	}
+
+	return product as Product;
 };
 
 export {
@@ -247,5 +486,14 @@ export {
 	deleteProductRecord,
 	deletePriceRecord,
 	createOrRetrieveCustomer,
-	manageSubscriptionStatusChange
+	manageSubscriptionStatusChange,
+	recordProductPurchase,
+	hasProductAccess,
+	addCredits,
+	deductCredits,
+	getUserCredits,
+	getActiveProductsWithPrices,
+	getProductById,
+	upsertCustomerToSupabase,
+	getStripeCustomerId
 };

src/routes/+layout.svelte

@@ -5,10 +5,10 @@
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 	import { invalidate } from '$app/navigation';
-	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
 	import CookieConsent from '$lib/components/CookieConsent.svelte';
 	import NavLinks from '$lib/components/NavLinks.svelte';
+	import MagicLink from '$lib/components/MagicLink.svelte';
 
 	export let data;
 	let { supabase, session } = data;
@@ -47,6 +47,12 @@
 
 		return () => data.subscription.unsubscribe();
 	});
+
+	let isMobileMenuOpen = false;
+
+	function toggleMobileMenu() {
+		isMobileMenuOpen = !isMobileMenuOpen;
+	}
 </script>
 
 <svelte:head>
@@ -63,95 +69,108 @@
 </svelte:head>
 
 <header>
-	<nav class="navbar bg-primary text-primary-content">
-		<div class="navbar-start">
-			<div class="dropdown">
-				<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						><path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h8m-8 6h16"
-						/></svg
-					>
-				</div>
-				<ul
-					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
+	<nav class="bg-primary text-primary-content p-4">
+		<div class="container mx-auto flex justify-between items-center">
+			<a href="/" class="text-white font-bold text-xl">SvelteKit SaaS Boilerplate</a>
+
+			<!-- Hamburger Menu Button (Mobile) -->
+			<button on:click={toggleMobileMenu} class="block md:hidden text-white focus:outline-none">
+				<svg
+					class="w-6 h-6"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
 				>
-					<NavLinks isMobile={true} />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h8m-8 6h16"
+					></path>
+				</svg>
+			</button>
+
+			<!-- Navbar Links (hidden on mobile, visible on larger screens) -->
+			<div class="hidden md:flex space-x-4">
+				<ul class="flex flex-col md:flex-row md:space-x-4">
+					<NavLinks isMobile={false} />
 				</ul>
 			</div>
-			<a href="/" class="btn btn-ghost text-xl">SvelteKit SaaS Boilerplate</a>
-		</div>
-		<div class="navbar-center hidden lg:flex">
-			<ul class="menu menu-horizontal px-1">
-				<NavLinks isMobile={false} />
-			</ul>
-		</div>
-		<div class="navbar-end">
-			<a href="/checkout" class="btn btn-ghost btn-circle">
-				<div class="indicator">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						><path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-						/></svg
-					>
-					<span class="badge badge-sm indicator-item">{localBasket.items.length}</span>
-				</div>
-			</a>
-			<div class="dropdown dropdown-end">
-				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
-					<div class="w-10 rounded-full">
-						{#if session?.user}
-							<div class="user-circle text-primary-content border-primary-content">
-								{session?.user.email[0].toUpperCase()}
-							</div>
-						{:else}
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{/if}
-					</div>
-				</div>
 
-				{#if session?.user}
-					<ul
-						tabindex="-1"
-						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
-					>
-						<li>
-							<a href="/account"> Account </a>
-						</li>
-						<li><a href="/settings">Settings</a></li>
-						<li><SignOut {supabase} /></li>
-					</ul>
-				{:else}
-					<div
-						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
-					>
-						<SignIn {supabase} />
+			<!-- Right Side: Basket & User Account -->
+			<div class="flex items-center space-x-4">
+				<!-- Basket/Checkout Icon -->
+				<a href="/checkout" class="btn btn-ghost btn-circle">
+					<div class="indicator">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+						<span class="badge badge-sm indicator-item">{localBasket.items.length}</span>
 					</div>
-				{/if}
+				</a>
+
+				<!-- User Account Dropdown -->
+				<details class="dropdown dropdown-end">
+					<summary tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+						<div class="w-10 rounded-full">
+							{#if session?.user}
+								<div class="user-circle text-primary-content border-primary-content">
+									{session?.user.email[0].toUpperCase()}
+								</div>
+							{:else}
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+									<path
+										fill-rule="evenodd"
+										d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{/if}
+						</div>
+					</summary>
+
+					{#if session?.user}
+						<ul
+							tabindex="-1"
+							class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
+						>
+							<li><a href="/account">Account</a></li>
+							<li><a href="/settings">Settings</a></li>
+							<li><SignOut {supabase} /></li>
+						</ul>
+					{:else}
+						<div
+							class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
+						>
+							<MagicLink {supabase} />
+						</div>
+					{/if}
+				</details>
 			</div>
 		</div>
+
+		<!-- Mobile Menu -->
+		<div
+			class="bg-base-100 text-base-content shadow rounded-box p-4 transition duration-300 ease-in-out md:hidden"
+			class:block={isMobileMenuOpen}
+			class:hidden={!isMobileMenuOpen}
+		>
+			<ul class="flex flex-col space-y-4">
+				<NavLinks isMobile={true} />
+			</ul>
+		</div>
 	</nav>
 </header>
 
@@ -277,4 +296,8 @@
 		align-items: center;
 		font-size: 20px; /* Adjust font size as needed */
 	}
+
+	main {
+		min-height: calc(100dvh - 68px - 68px);
+	}
 </style>

src/routes/+page.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
-	import SignUp from '$lib/components/SignUp.svelte';
+	import MagicLink from '$lib/components/MagicLink.svelte';
 
 	export let data;
 	let { supabase, session } = data;
 	$: ({ supabase, session } = data);
 </script>
 
-<div class="hero bg-base-100 my-36">
-	<div class="hero-content flex-col lg:flex-row-reverse">
-		<div class="text-center lg:text-left">
-			<h1 class="text-5xl font-bold">Sign up for this amazing SaaS right now - don't miss out!</h1>
-		</div>
-		<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
-			<SignUp {supabase} />
+{#if session !== null}
+	<div class="hero bg-base-100 my-36">
+		Welcome back {session.user.email}
+	</div>
+{:else}
+	<div class="hero bg-base-100 my-36">
+		<div class="hero-content flex-col lg:flex-row-reverse">
+			<div class="text-center lg:text-left">
+				<h1 class="text-5xl font-bold">
+					Sign up for this amazing SaaS right now - don't miss out!
+				</h1>
+			</div>
+			<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
+				<MagicLink {supabase} />
+			</div>
 		</div>
 	</div>
-</div>
+{/if}
 
 <div
 	class="md:container md:mx-auto justify-self-center flex justify-center items-center h-full flex-col mb-10"

src/routes/account/+page.server.ts

@@ -8,41 +8,39 @@ export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession
 		redirect(303, '/');
 	}
 
-	const { data: profile } = await supabase
-		.from('profiles')
-		.select(`username, full_name`)
+	const { data: user } = await supabase
+		.from('users')
+		.select(`name`)
 		.eq('id', session.user.id)
 		.single();
 
-	return { session, profile };
+	return { session, user };
 };
 
 export const actions: Actions = {
 	update: async ({ request, locals: { supabase, safeGetSession } }) => {
 		const formData = await request.formData();
-		const fullName = formData.get('fullName') as string;
+		const name = formData.get('name') as string;
 
 		const { session } = await safeGetSession();
 
-		const { error } = await supabase.from('profiles').upsert({
-			id: session?.user.id,
-			full_name: fullName,
-			username: session?.user.email,
-			updated_at: new Date()
-		});
+		if (!session) {
+			return fail(401, { name });
+		}
+		const { error } = await supabase.from('users').update({
+			name: name,
+		}).eq('id', session?.user.id);
 
 		console.error(error);
 
 		if (error) {
 			return fail(500, {
-				fullName,
-				username: session?.user.email
+				name,
 			});
 		}
 
 		return {
-			fullName,
-			username: session?.user.email
+			name,
 		};
 	},
 	signout: async ({ locals: { supabase, safeGetSession } }) => {

src/routes/account/+page.svelte

@@ -5,12 +5,12 @@
 	export let data;
 	export let form;
 
-	let { session, supabase, profile } = data;
-	$: ({ session, supabase, profile } = data);
+	let { session, supabase, user } = data;
+	$: ({ session, supabase, user } = data);
 
 	let profileForm: HTMLFormElement;
 	let loading = false;
-	let fullName: string = profile?.full_name ?? '';
+	let name: string = user?.name ?? '';
 
 	const handleSubmit: SubmitFunction = () => {
 		loading = true;
@@ -37,13 +37,8 @@
 		bind:this={profileForm}
 	>
 		<div>
-			<label for="email">Username</label>
-			<input id="email" type="text" value={session.user.email} disabled />
-		</div>
-
-		<div>
-			<label for="fullName">Full Name</label>
-			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />
+			<label for="name">Name</label>
+			<input id="name" name="name" type="text" value={form?.name ?? name} />
 		</div>
 
 		<div>

src/routes/api/checkout/+server.ts

@@ -1,11 +1,20 @@
 import { type RequestHandler, redirect } from '@sveltejs/kit';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import stripe from 'stripe';
-
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+import { stripe as stripeClient } from '$lib/utils/stripe';
+import { getStripeCustomerId } from '$lib/utils/supabase/admin';
+import type Stripe from 'stripe';
 
 // Create a checkout session
-export const POST: RequestHandler = async ({ request, cookies }) => {
+export const POST: RequestHandler = async ({ request, cookies, locals: { safeGetSession } }) => {
+	const { session } = await safeGetSession();
+
+	if (!session) {
+		// If no session is found, the user isn't authenticated, so block the action
+		return new Response('Unauthorized', { status: 401 });
+	}
+
+	const userId = session.user.id;
+	const userEmail = session.user.email;
+
 	const formData = new URLSearchParams(await request.text());
 	const items: { priceId: string; quantity: number }[] = [];
 
@@ -19,14 +28,37 @@ export const POST: RequestHandler = async ({ request, cookies }) => {
 		quantity: item.quantity
 	}));
 
-	const session = await stripeClient.checkout.sessions.create({
+	let stripeCustomerId = null;
+
+	// Get the existing Stripe customer ID from Supabase, if it exists
+	try {
+		stripeCustomerId = await getStripeCustomerId(userEmail!, userId);
+	} catch (error) {
+		console.error('Error fetching Stripe customer ID:', error);
+	}
+
+	const stripeCheckoutSessionObject = {
 		line_items: lineItems,
 		mode: 'payment',
 		success_url: `${request.headers.get('origin')}/checkout/success`,
-		cancel_url: `${request.headers.get('origin')}/checkout/cancelled`
-	});
+		cancel_url: `${request.headers.get('origin')}/checkout/cancelled`,
+		metadata: {
+			userId: userId
+		}
+	} as Stripe.Checkout.SessionCreateParams;
+
+	if (stripeCustomerId) {
+		// If the user has a Stripe customer ID, attach it to the checkout session
+		stripeCheckoutSessionObject.customer = stripeCustomerId;
+	} else {
+		// If the user doesn't have a Stripe customer ID, create a new customer
+		stripeCheckoutSessionObject.customer_creation = 'always';
+		stripeCheckoutSessionObject.customer_email = userEmail;
+	}
+
+	const checkoutSession = await stripeClient.checkout.sessions.create(stripeCheckoutSessionObject);
 
 	// Store the checkout session.id for access from the frontend
-	cookies.set('checkout_session_id', session.id, { path: '/' });
-	return redirect(303, session.url as string);
+	cookies.set('checkout_session_id', checkoutSession.id, { path: '/' });
+	return redirect(303, checkoutSession.url as string);
 };

src/routes/api/checkout/create-customer/+server.ts

@@ -0,0 +1,16 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { upsertCustomerToSupabase } from '$lib/utils/supabase/admin';
+
+export const GET: RequestHandler = async ({ url, locals: { safeGetSession } }) => {
+	const stripeCustomerId = url.searchParams.get('stripeCustomerId');
+	const { session } = await safeGetSession();
+
+	if (!session || !stripeCustomerId) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	await upsertCustomerToSupabase(session?.user.id, stripeCustomerId);
+
+	return json({ message: 'Customer created' });
+};

src/routes/api/checkout/status/+server.ts

@@ -1,8 +1,6 @@
 import { json } from '@sveltejs/kit';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import stripe from 'stripe';
 import type { RequestHandler } from './$types';
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+import { stripe as stripeClient } from '$lib/utils/stripe';
 
 export const GET: RequestHandler = async ({ cookies }) => {
   const sessionId = cookies.get('checkout_session_id');

src/routes/api/subscribe/+server.ts

@@ -0,0 +1,64 @@
+import { type RequestHandler, redirect } from '@sveltejs/kit';
+import { stripe as stripeClient } from '$lib/utils/stripe';
+import { getStripeCustomerId } from '$lib/utils/supabase/admin';
+import type Stripe from 'stripe';
+
+// Create a subscription checkout session
+export const POST: RequestHandler = async ({ request, cookies, locals: { safeGetSession } }) => {
+	const { session } = await safeGetSession();
+
+	if (!session) {
+		// If no session is found, the user isn't authenticated, so block the action
+		return new Response('Unauthorized', { status: 401 });
+	}
+
+	const userId = session.user.id;
+	const userEmail = session.user.email;
+
+	// Get the price ID from the request form data
+	const formData = await request.formData();
+	const priceId = formData.get('priceId');
+
+	if (!priceId) {
+		return new Response('Price ID is required', { status: 400 });
+	}
+
+	let stripeCustomerId = null;
+
+	// Get the existing Stripe customer ID from Supabase, if it exists
+	try {
+		stripeCustomerId = await getStripeCustomerId(userEmail!, userId);
+	} catch (error) {
+		console.error('Error fetching Stripe customer ID:', error);
+	}
+
+	const stripeCheckoutSessionObject = {
+		line_items: [
+			{
+				price: priceId,
+				quantity: 1
+			}
+		],
+		mode: 'subscription',
+		success_url: `${request.headers.get('origin')}/checkout/success`,
+		cancel_url: `${request.headers.get('origin')}/checkout/cancelled`,
+		metadata: {
+			userId: userId
+		}
+	} as Stripe.Checkout.SessionCreateParams;
+
+	if (stripeCustomerId) {
+		// If the user has a Stripe customer ID, attach it to the checkout session
+		stripeCheckoutSessionObject.customer = stripeCustomerId;
+	} else {
+		// If the user doesn't have a Stripe customer ID, create a new customer with their email
+		stripeCheckoutSessionObject.customer_email = userEmail;
+	}
+
+	// Create a subscription checkout session with Stripe
+	const checkoutSession = await stripeClient.checkout.sessions.create(stripeCheckoutSessionObject);
+
+	// Store the checkout session.id for access from the frontend
+	cookies.set('checkout_session_id', checkoutSession.id, { path: '/' });
+	return redirect(303, checkoutSession.url as string);
+};

src/routes/api/webhook/stripe/+server.ts

@@ -1,16 +1,15 @@
-import type { RequestHandler } from '@sveltejs/kit';
+import { json, type RequestHandler } from '@sveltejs/kit';
 import stripe from 'stripe';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import { PUBLIC_STRIPE_ENDPOINT_SECRET } from '$env/static/public';
+import { STRIPE_ENDPOINT_SECRET } from '$env/static/private';
 import {
 	deletePriceRecord,
 	deleteProductRecord,
 	manageSubscriptionStatusChange,
 	upsertPriceRecord,
-	upsertProductRecord
+	upsertProductRecord,
+	recordProductPurchase
 } from '$lib/utils/supabase/admin';
-
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+import { stripe as stripeClient } from '$lib/utils/stripe';
 
 export const POST: RequestHandler = async ({ request }) => {
 	const body = await request.text();
@@ -23,13 +22,9 @@ export const POST: RequestHandler = async ({ request }) => {
 
 		// Only verify the event if you have an endpoint secret defined.
 		// Otherwise use the basic event deserialized with JSON.parse
-		if (PUBLIC_STRIPE_ENDPOINT_SECRET && signature) {
+		if (STRIPE_ENDPOINT_SECRET && signature) {
 			try {
-				event = stripeClient.webhooks.constructEvent(
-					body,
-					signature,
-					PUBLIC_STRIPE_ENDPOINT_SECRET
-				);
+				event = stripeClient.webhooks.constructEvent(body, signature, STRIPE_ENDPOINT_SECRET);
 			} catch (err) {
 				console.error(`⚠️  Webhook signature verification failed.`, err.message);
 				return {
@@ -44,6 +39,9 @@ export const POST: RequestHandler = async ({ request }) => {
 			case 'product.updated':
 				await upsertProductRecord(event.data.object as stripe.Product);
 				break;
+			case 'product.deleted':
+				await deleteProductRecord(event.data.object as stripe.Product);
+				break;
 			case 'price.created':
 			case 'price.updated':
 				await upsertPriceRecord(event.data.object as stripe.Price);
@@ -51,12 +49,11 @@ export const POST: RequestHandler = async ({ request }) => {
 			case 'price.deleted':
 				await deletePriceRecord(event.data.object as stripe.Price);
 				break;
-			case 'product.deleted':
-				await deleteProductRecord(event.data.object as stripe.Product);
-				break;
 			case 'customer.subscription.created':
 			case 'customer.subscription.updated':
-			case 'customer.subscription.deleted': {
+			case 'customer.subscription.deleted':
+			case 'customer.subscription.paused':
+			case 'customer.subscription.resumed': {
 				const subscription = event.data.object as stripe.Subscription;
 				await manageSubscriptionStatusChange(
 					subscription.id,
@@ -67,6 +64,7 @@ export const POST: RequestHandler = async ({ request }) => {
 			}
 			case 'checkout.session.completed': {
 				const checkoutSession = event.data.object as stripe.Checkout.Session;
+
 				if (checkoutSession.mode === 'subscription') {
 					const subscriptionId = checkoutSession.subscription;
 					await manageSubscriptionStatusChange(
@@ -74,22 +72,44 @@ export const POST: RequestHandler = async ({ request }) => {
 						checkoutSession.customer as string,
 						true
 					);
+				} else if (checkoutSession.mode === 'payment') {
+					// Fetch session with expanded line_items
+					const sessionWithLineItems = await stripeClient.checkout.sessions.retrieve(
+						checkoutSession.id,
+						{
+							expand: ['line_items']
+						}
+					);
+
+					const lineItems = sessionWithLineItems.line_items?.data;
+					const userId = checkoutSession.metadata!.userId;
+
+					if (!lineItems) {
+						throw new Error('No line items found in session');
+					}
+
+					if (!userId) {
+						throw new Error('No user ID found in session metadata');
+					}
+
+					for (const item of lineItems ?? []) {
+						const productId = item.price?.product as string;
+						const priceId = item.price?.id as string;
+
+						if (productId && priceId) {
+							await recordProductPurchase(userId, productId, priceId);
+						}
+					}
 				}
 				break;
 			}
 			default:
-				console.error(`Unhandled event type ${event.type}`);
+				console.log(`Unhandled event type ${event.type}`);
 		}
-
-		// Return a response to acknowledge receipt of the event
-		return new Response(JSON.stringify({ received: true }), {
-			status: 200
-		});
 	} catch (err) {
-		console.log(`Webhook Error: ${err.message}`);
-		return {
-			status: 400,
-			body: `Webhook Error: ${err.message}`
-		};
+		const message = err instanceof Error ? err.message : 'An unknown error has occurred';
+		return new Response(`Webhook Error: ${message}`, { status: 500 });
 	}
+
+	return json({ received: true });
 };

src/routes/auth/callback/+server.ts

@@ -0,0 +1,14 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit'
+
+export const GET: RequestHandler = async (event) => {
+  const { url, locals: { supabase } } = event;
+  const code = url.searchParams.get('code')
+
+  if (code) {
+    await supabase.auth.exchangeCodeForSession(code)
+  }
+
+  // TODO: Create stripe customer and sync with supabase user
+
+  throw redirect(303, '/account')
+}

src/routes/checkout/+page.server.ts

@@ -0,0 +1,11 @@
+/** @type {import('./$types').PageLoad} */
+import { redirect } from '@sveltejs/kit';
+
+export const load = async ({ params, locals: { safeGetSession } }) => {
+	const { session } = await safeGetSession();
+	if (!session) {
+		throw redirect(303, '/login'); // Redirect unauthenticated users to login
+	}
+
+	return params;
+};

src/routes/checkout/+page.svelte

@@ -3,6 +3,10 @@
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import BasketItem from '$lib/components/checkout/BasketItem.svelte';
 
+	export let data;
+	let { supabase, session, url } = data;
+	$: ({ supabase, session, url } = data);
+
 	let localBasket: Basket;
 	const unsubscribe = basket.subscribe((value) => {
 		localBasket = value;
@@ -101,28 +105,32 @@
 						/>
 					</svg>
 				</a>
-				<button
-					type="submit"
-					class="btn btn-primary"
-					disabled={localBasket.items && localBasket.items.length === 0}
-					>Continue to Payment
-					<svg
-						class="ml-2"
-						xmlns="http://www.w3.org/2000/svg"
-						width="23"
-						height="22"
-						viewBox="0 0 23 22"
-						fill="none"
-					>
-						<path
-							d="M8.75324 5.49609L14.2535 10.9963L8.75 16.4998"
-							stroke="white"
-							stroke-width="1.6"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-				</button>
+				{#if session?.user !== undefined}
+					<button
+						type="submit"
+						class="btn btn-primary"
+						disabled={localBasket.items && localBasket.items.length === 0}
+						>Continue to Payment
+						<svg
+							class="ml-2"
+							xmlns="http://www.w3.org/2000/svg"
+							width="23"
+							height="22"
+							viewBox="0 0 23 22"
+							fill="none"
+						>
+							<path
+								d="M8.75324 5.49609L14.2535 10.9963L8.75 16.4998"
+								stroke="white"
+								stroke-width="1.6"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				{:else}
+					<p>You must sign in to checkout</p>
+				{/if}
 			</div>
 		</form>
 	</div>

src/routes/checkout/success/+page.server.ts

@@ -0,0 +1,45 @@
+import { redirect } from '@sveltejs/kit';
+import Stripe from 'stripe';
+import { getProductById } from '$lib/utils/supabase/admin';
+
+export const load = async ({ fetch }) => {
+	const response = await fetch('/api/checkout/status');
+	if (!response.ok) {
+		console.error('Failed to fetch checkout status');
+		return;
+	}
+
+	const responseJson = await response.json();
+	const checkoutSession: Stripe.Checkout.Session = responseJson.checkoutSession;
+	const lineItems: Stripe.LineItem[] = responseJson.lineItems.data;
+	const paymentStatus: Stripe.Checkout.Session.PaymentStatus = responseJson.paymentStatus;
+
+	if (paymentStatus == 'unpaid') {
+		throw redirect(303, '/checkout/cancelled');
+	}
+
+	for (const lineItem of lineItems as LineItemForCheckout[]) {
+		const product = await getProductById(lineItem.price?.product.toString() ?? '');
+		lineItem.imgSrc = product.images ? product.images[0] : '';
+		lineItem.productDescription = product.description ?? '';
+	}
+
+	// Save the stripe customer id in the customers table
+	const stripeCustomerId = checkoutSession.customer as string;
+	const createCustomerResponse = await fetch(
+		'/api/checkout/create-customer?stripeCustomerId=' + stripeCustomerId
+	);
+	if (!createCustomerResponse.ok) {
+		console.error('Failed to create customer');
+	}
+
+	return {
+		checkoutSession,
+		lineItems
+	};
+};
+
+type LineItemForCheckout = Stripe.LineItem & {
+	imgSrc: string;
+	productDescription: string;
+};

src/routes/checkout/success/+page.svelte

@@ -11,7 +11,7 @@
 		localBasket = value;
 	});
 
-	let { checkoutSession, lineItems, paymentStatus } = data;
+	let { checkoutSession, lineItems } = data;
 
 	onDestroy(unsubscribe);
 
@@ -64,13 +64,15 @@
 				>
 			</div> -->
 			<div class="w-full px-3 min-[400px]:px-6">
-				{#if lineItems.length == 0}
+				{#if lineItems !== undefined && lineItems.length == 0}
 					<p class="font-semibold text-lg leading-7 text-black text-center">
 						No items in the basket
 					</p>
-				{:else}
+				{:else if lineItems !== undefined}
 					{#each lineItems as item (item.id)}
 						<OrderConfirmationItem
+							imgSrc={item.imgSrc}
+							itemCategoryDescription={item.productDescription}
 							itemName={item.description}
 							price={item.price.unit_amount / 100}
 							quantity={item.quantity}

src/routes/checkout/success/+page.ts

@@ -1,27 +0,0 @@
-import type { PageLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
-import Stripe from 'stripe';
-
-export const load: PageLoad = async ({fetch}) => {
-  const response = await fetch('/api/checkout/status');
-	if (!response.ok) {
-		console.error('Failed to fetch checkout status');
-		return;
-	}
-
-	const responseJson = await response.json();
-	const checkoutSession: Stripe.Checkout.Session = responseJson.checkoutSession;
-	const lineItems: Stripe.LineItem[] = responseJson.lineItems.data;
-	const paymentStatus: Stripe.Checkout.Session.PaymentStatus = responseJson.paymentStatus;
-
-	if (paymentStatus == 'unpaid') {
-		throw redirect(303, '/checkout/cancelled');
-	}
-
-	return {
-		checkoutSession,
-		lineItems,
-		paymentStatus
-	};
-};
-

src/routes/login/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import MagicLink from '$lib/components/MagicLink.svelte';
+
+	export let data;
+	let { supabase, session, url } = data;
+	$: ({ supabase, session, url } = data);
+</script>
+
+<MagicLink {supabase} />

src/routes/products/+page.svelte

@@ -1,18 +1,108 @@
 <script lang="ts">
-	import ProductsListItem from '$lib/components/products/ProductsListItem.svelte';
 	import { onMount } from 'svelte';
-	let products = [] as any;
+	import { debounce } from 'ts-debounce';
+	import ProductsListItem from '$lib/components/products/ProductsListItem.svelte';
 
+	let products = [] as any[];
 	let enablePagination = false;
+	let totalPages = 1;
+	let currentPage = 1;
+	const limit = 20;
+	let isLoading = false;
+	let errorMessage = '';
 
-	onMount(async () => {
-		const response = await fetch('/products');
-		const responseJson = await response.json();
-		products = responseJson.data;
-		if (responseJson.has_more) {
-			enablePagination = true;
+	// Debounced fetchProducts function to prevent rapid requests
+	const fetchProducts = debounce(async (page: number) => {
+		isLoading = true;
+		errorMessage = '';
+
+		// Ensure page number is within valid range
+		if (page < 1) {
+			page = 1;
+		} else if (page > totalPages) {
+			page = totalPages;
 		}
+
+		const offset = (page - 1) * limit;
+
+		try {
+			const response = await fetch(`/products?limit=${limit}&offset=${offset}`);
+			const responseJson = await response.json();
+
+			if (response.ok) {
+				products = responseJson.products;
+				const count = responseJson.count;
+
+				totalPages = Math.ceil(count / limit);
+				enablePagination = totalPages > 1;
+				currentPage = page;
+			} else {
+				throw new Error(responseJson.error || 'Failed to load products.');
+			}
+		} catch (error) {
+			console.error(error);
+			errorMessage = error.message || 'Failed to load products.';
+		} finally {
+			isLoading = false;
+		}
+	}, 300); // 300ms debounce delay
+
+	onMount(() => {
+		fetchProducts(currentPage);
 	});
+
+	// Generate pagination buttons with ellipsis for large numbers of pages
+	function getPageNumbers() {
+		const maxButtons = 5;
+		const pageNumbers = [];
+
+		if (totalPages <= maxButtons) {
+			// Show all pages as there aren't many
+			for (let i = 1; i <= totalPages; i++) {
+				pageNumbers.push(i);
+			}
+		} else {
+			let startPage = Math.max(currentPage - 2, 1);
+			let endPage = Math.min(currentPage + 2, totalPages);
+
+			if (currentPage <= 3) {
+				startPage = 1;
+				endPage = maxButtons;
+			} else if (currentPage >= totalPages - 2) {
+				startPage = totalPages - (maxButtons - 1);
+				endPage = totalPages;
+			}
+
+			// Add first page and ellipsis if needed
+			if (startPage > 1) {
+				pageNumbers.push(1);
+				if (startPage > 2) {
+					pageNumbers.push('...');
+				}
+			}
+
+			// Add page numbers
+			for (let i = startPage; i <= endPage; i++) {
+				pageNumbers.push(i);
+			}
+
+			// Add ellipsis and last page if needed
+			if (endPage < totalPages) {
+				if (endPage < totalPages - 1) {
+					pageNumbers.push('...');
+				}
+				pageNumbers.push(totalPages);
+			}
+		}
+
+		return pageNumbers;
+	}
+
+	function handlePageClick(pageNumber: number | string) {
+		if (typeof pageNumber === 'number' && pageNumber !== currentPage) {
+			fetchProducts(pageNumber);
+		}
+	}
 </script>
 
 <section class="py-24">
@@ -22,20 +112,67 @@
 		>
 			Available Products
 		</h2>
-		<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-			{#each products as product (product.id)}
-				<ProductsListItem {product} />
-			{/each}
-		</div>
-		{#if enablePagination}
-			<div class="flex justify-center mt-12">
-				<div class="join">
-					<button class="join-item btn">1</button>
-					<button class="join-item btn btn-active">2</button>
-					<button class="join-item btn">3</button>
-					<button class="join-item btn">4</button>
-				</div>
+
+		{#if isLoading}
+			<p class="loading">Loading products...</p>
+		{:else if errorMessage}
+			<p class="error">{errorMessage}</p>
+		{:else}
+			<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+				{#each products as product (product.id)}
+					<ProductsListItem {product} />
+				{/each}
 			</div>
+
+			{#if enablePagination}
+				<div class="flex justify-center mt-12">
+					<div class="join">
+						<!-- Previous Button -->
+						<button
+							class="join-item btn"
+							on:click={() => fetchProducts(currentPage - 1)}
+							disabled={currentPage === 1}
+						>
+							Previous
+						</button>
+
+						<!-- Page Number Buttons -->
+						{#each getPageNumbers() as pageNumber}
+							{#if pageNumber === '...'}
+								<span class="join-item btn">...</span>
+							{:else}
+								<button
+									class="join-item btn {currentPage === pageNumber ? 'btn-active' : ''}"
+									on:click={() => handlePageClick(pageNumber)}
+								>
+									{pageNumber}
+								</button>
+							{/if}
+						{/each}
+
+						<!-- Next Button -->
+						<button
+							class="join-item btn"
+							on:click={() => fetchProducts(currentPage + 1)}
+							disabled={currentPage === totalPages}
+						>
+							Next
+						</button>
+					</div>
+				</div>
+			{/if}
 		{/if}
 	</div>
 </section>
+
+<style>
+	.loading {
+		text-align: center;
+		margin: 20px 0;
+	}
+	.error {
+		color: red;
+		text-align: center;
+		margin: 20px 0;
+	}
+</style>

src/routes/products/+server.ts

@@ -1,23 +1,19 @@
 import { json } from '@sveltejs/kit';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import stripe from 'stripe';
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
-
-export const GET = async () => {
-	const products = await stripeClient.products.list({
-		limit: 100
-	});
+import { getActiveProductsWithPrices } from '$lib/utils/supabase/admin';
 
+export const GET = async ({ url }) => {
 	try {
-		// Get the price for each product
-		for (const product of products.data) {
-			const price = await stripeClient.prices.retrieve(product.default_price as string);
-			if (price) {
-				product.actualPrice = price.unit_amount / 100;
-			}
-		}
+		const limitParam = url.searchParams.get('limit');
+		const offsetParam = url.searchParams.get('offset');
+
+		const limit = limitParam ? parseInt(limitParam, 10) : 10;
+		const offset = offsetParam ? parseInt(offsetParam, 10) : 0;
+
+		const { products, count } = await getActiveProductsWithPrices(limit, offset);
+
+		return json({ products, count });
 	} catch (error) {
 		console.error(error);
+		return json({ error: error.message }, { status: 500 });
 	}
-	return json(products);
 };

src/routes/products/[productId]/+page.server.ts

@@ -0,0 +1,33 @@
+import { redirect } from '@sveltejs/kit';
+import { hasProductAccess } from '$lib/utils/supabase/admin';
+import type { ProductInfo } from '$lib/types/Products/ProductInfo';
+
+export const load = async ({ params, locals: { safeGetSession }, fetch }) => {
+	const { session } = await safeGetSession();
+	if (!session) {
+		throw redirect(303, '/login'); // Redirect unauthenticated users to login
+	}
+	
+	const productResponse = await fetch(`/products/${params.productId}`);
+	const { product, isSubscription, price }: ProductInfo = await productResponse.json();
+	
+	// Create the item object
+	const item = {
+		id: product.id,
+		name: product.name,
+		categoryDescription: product.description,
+		imgAlt: product.description,
+		imgSrc: product.images[0],
+		priceId: product.default_price,
+		quantity: 1,
+		isSubscription: isSubscription,
+		price: (price.unit_amount ? price.unit_amount / 100 : NaN),
+		interval: price.recurring ? price.recurring.interval : null,
+	}
+	
+
+	// Check if the user has access to the 'EXAMPLE PRODUCT' product
+	const hasPurchasedProduct = await hasProductAccess(session.user.id, params.productId);
+
+	return { params, hasPurchasedProduct, item };
+};

src/routes/products/[productId]/+page.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { redirect } from '@sveltejs/kit';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
+	let { supabase, session, hasPurchasedProduct, item } = data;
+	$: ({ supabase, session, hasPurchasedProduct, item } = data);
+
 	let localBasket: Basket;
 	const unsubscribeToBasket = basket.subscribe((value) => {
 		localBasket = value;
@@ -16,6 +20,9 @@
 	});
 
 	function addToBasket() {
+		if (!session) {
+			redirect(303, '/');
+		}
 		basket.update((value) => {
 			const existingItemIndex = value.items.findIndex((basketItem) => basketItem.id === item.id);
 
@@ -43,32 +50,6 @@
 			});
 		}, 5000);
 	}
-
-	let item = {};
-
-	onMount(() => {
-		fetch(`/products/${data.productId}`)
-			.then((response) => response.json())
-			.then((product) => {
-				item = {
-					id: product.id,
-					name: product.name,
-					categoryDescription: product.description,
-					imgAlt: product.description,
-					imgSrc: product.images[0],
-					price: 0,
-					priceId: product.default_price,
-					quantity: 1
-				};
-
-				// Fetch the price of the product
-				fetch(`/products/prices/${product.default_price}`)
-					.then((response) => response.json())
-					.then((price) => {
-						item.price = price.unit_amount / 100;
-					});
-			});
-	});
 </script>
 
 <section class="relative">
@@ -83,9 +64,6 @@
 				class="data w-full lg:pr-8 pr-0 xl:justify-start justify-center flex items-center max-lg:pb-10 xl:my-2 lg:my-5 my-0"
 			>
 				<div class="data w-full max-w-xl">
-					<!-- <p class="text-lg font-medium leading-8 text-indigo-600 mb-4">
-						Clothing&nbsp; /&nbsp; Menswear
-					</p> -->
 					<h2 class="font-manrope font-bold text-3xl leading-10 text-gray-900 mb-2 capitalize">
 						{item.name}
 					</h2>
@@ -94,6 +72,7 @@
 							class="font-manrope font-semibold text-2xl leading-9 text-gray-900 pr-5 sm:border-r border-gray-200 mr-5"
 						>
 							£{item.price}
+							{item.isSubscription ? `/ ${item.interval}` : ''}
 						</h6>
 						<div class="flex items-center gap-2">
 							<div class="flex items-center gap-1">
@@ -275,72 +254,83 @@
 							<span class="font-normal text-base text-gray-900">all size is available</span>
 						</li>
 					</ul>
-					<!-- <p class="text-gray-900 text-lg leading-8 font-medium mb-4">Size</p>
-					<div class="w-full pb-8 border-b border-gray-100 flex-wrap">
-						<div class="grid grid-cols-3 min-[400px]:grid-cols-5 gap-3 max-w-md">
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>S</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>M</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>L</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>XL</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>XXL</button
-							>
-						</div>
-					</div> -->
 
-					<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 py-8">
-						<div class="flex sm:items-center sm:justify-center w-full">
-							<button
-								class="group py-4 px-6 border border-gray-400 rounded-l-full bg-white transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-300"
-							>
-								<svg
-									class="stroke-gray-900 group-hover:stroke-black"
-									width="22"
-									height="22"
-									viewBox="0 0 22 22"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
+					{#if !item.isSubscription && !hasPurchasedProduct}
+						<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 py-8">
+							<div class="flex sm:items-center sm:justify-center w-full">
+								<button
+									class="group py-4 px-6 border border-gray-400 rounded-l-full bg-white transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-300"
 								>
-									<path d="M16.5 11H5.5" stroke="" stroke-width="1.6" stroke-linecap="round" />
-									<path
-										d="M16.5 11H5.5"
-										stroke=""
-										stroke-opacity="0.2"
-										stroke-width="1.6"
-										stroke-linecap="round"
-									/>
-									<path
-										d="M16.5 11H5.5"
-										stroke=""
-										stroke-opacity="0.2"
-										stroke-width="1.6"
-										stroke-linecap="round"
-									/>
-								</svg>
-							</button>
-							<input
-								type="text"
-								class="font-semibold text-gray-900 cursor-pointer text-lg py-[13px] px-6 w-full sm:max-w-[118px] outline-0 border-y border-gray-400 bg-transparent placeholder:text-gray-900 text-center hover:bg-gray-50"
-								placeholder="1"
-							/>
+									<svg
+										class="stroke-gray-900 group-hover:stroke-black"
+										width="22"
+										height="22"
+										viewBox="0 0 22 22"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path d="M16.5 11H5.5" stroke="" stroke-width="1.6" stroke-linecap="round" />
+										<path
+											d="M16.5 11H5.5"
+											stroke=""
+											stroke-opacity="0.2"
+											stroke-width="1.6"
+											stroke-linecap="round"
+										/>
+										<path
+											d="M16.5 11H5.5"
+											stroke=""
+											stroke-opacity="0.2"
+											stroke-width="1.6"
+											stroke-linecap="round"
+										/>
+									</svg>
+								</button>
+								<input
+									type="text"
+									class="font-semibold text-gray-900 cursor-pointer text-lg py-[13px] px-6 w-full sm:max-w-[118px] outline-0 border-y border-gray-400 bg-transparent placeholder:text-gray-900 text-center hover:bg-gray-50"
+									placeholder="1"
+								/>
+								<button
+									class="group py-4 px-6 border border-gray-400 rounded-r-full bg-white transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-300"
+								>
+									<svg
+										class="stroke-gray-900 group-hover:stroke-black"
+										width="22"
+										height="22"
+										viewBox="0 0 22 22"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											d="M11 5.5V16.5M16.5 11H5.5"
+											stroke="#9CA3AF"
+											stroke-width="1.6"
+											stroke-linecap="round"
+										/>
+										<path
+											d="M11 5.5V16.5M16.5 11H5.5"
+											stroke="black"
+											stroke-opacity="0.2"
+											stroke-width="1.6"
+											stroke-linecap="round"
+										/>
+										<path
+											d="M11 5.5V16.5M16.5 11H5.5"
+											stroke="black"
+											stroke-opacity="0.2"
+											stroke-width="1.6"
+											stroke-linecap="round"
+										/>
+									</svg>
+								</button>
+							</div>
 							<button
-								class="group py-4 px-6 border border-gray-400 rounded-r-full bg-white transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-300"
+								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
+								on:click={addToBasket}
 							>
 								<svg
-									class="stroke-gray-900 group-hover:stroke-black"
+									class="stroke-indigo-600"
 									width="22"
 									height="22"
 									viewBox="0 0 22 22"
@@ -348,77 +338,40 @@
 									xmlns="http://www.w3.org/2000/svg"
 								>
 									<path
-										d="M11 5.5V16.5M16.5 11H5.5"
-										stroke="#9CA3AF"
-										stroke-width="1.6"
-										stroke-linecap="round"
-									/>
-									<path
-										d="M11 5.5V16.5M16.5 11H5.5"
-										stroke="black"
-										stroke-opacity="0.2"
-										stroke-width="1.6"
-										stroke-linecap="round"
-									/>
-									<path
-										d="M11 5.5V16.5M16.5 11H5.5"
-										stroke="black"
-										stroke-opacity="0.2"
+										d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
+										stroke=""
 										stroke-width="1.6"
 										stroke-linecap="round"
 									/>
 								</svg>
+								Add to basket
 							</button>
 						</div>
-						<button
-							class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
-							on:click={addToBasket}
-						>
-							<svg
-								class="stroke-indigo-600"
-								width="22"
-								height="22"
-								viewBox="0 0 22 22"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
-									stroke=""
-									stroke-width="1.6"
-									stroke-linecap="round"
-								/>
-							</svg>
-							Add to basket</button
-						>
-					</div>
-					<div class="flex items-center gap-3">
-						<button
-							class="group transition-all duration-500 p-4 rounded-full bg-indigo-50 hover:bg-indigo-100 hover:shadow-sm hover:shadow-indigo-300"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="26"
-								height="26"
-								viewBox="0 0 26 26"
-								fill="none"
-							>
-								<path
-									d="M4.47084 14.3196L13.0281 22.7501L21.9599 13.9506M13.0034 5.07888C15.4786 2.64037 19.5008 2.64037 21.976 5.07888C24.4511 7.5254 24.4511 11.4799 21.9841 13.9265M12.9956 5.07888C10.5204 2.64037 6.49824 2.64037 4.02307 5.07888C1.54789 7.51738 1.54789 11.4799 4.02307 13.9184M4.02307 13.9184L4.04407 13.939M4.02307 13.9184L4.46274 14.3115"
-									stroke="#4F46E5"
-									stroke-width="1.6"
-									stroke-miterlimit="10"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg>
-						</button>
-						<button
-							class="text-center w-full px-5 py-4 rounded-[100px] bg-indigo-600 flex items-center justify-center font-semibold text-lg text-white shadow-sm transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400"
-						>
-							Buy Now
-						</button>
-					</div>
+					{:else}
+						{#if hasPurchasedProduct}
+							<div class="flex items-center gap-3">
+								<button
+									class="group text-center w-full py-4 px-5 rounded-full bg-gray-100 text-gray-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500"
+									disabled
+								>
+									You already own this
+								</button>
+							</div>
+						{/if}
+						{#if item.isSubscription}
+							<div class="flex items-center gap-3">
+								<form method="POST" action="/api/subscribe">
+									<input type="hidden" name="priceId" value={item.priceId} />
+									<button
+										type="submit"
+										class="text-center w-full px-5 py-4 rounded-[100px] bg-indigo-600 flex items-center justify-center font-semibold text-lg text-white shadow-sm transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400"
+									>
+										Subscribe
+									</button>
+								</form>
+							</div>
+						{/if}
+					{/if}
 				</div>
 			</div>
 		</div>

src/routes/products/[productId]/+page.ts

@@ -1,4 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-export function load({ params }) {
-	return params;
-}

src/routes/products/[productId]/+server.ts

@@ -1,10 +1,21 @@
 import { json } from '@sveltejs/kit';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import stripe from 'stripe';
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+import { stripe as stripeClient } from '$lib/utils/stripe';
+import Stripe from 'stripe';
+import { type ProductInfo } from '$lib/types/Products/ProductInfo';
 
 export const GET = async ({ params }) => {
 	const { productId } = params;
 	const product = await stripeClient.products.retrieve(productId);
-	return json(product);
+
+	const price = await stripeClient.prices.retrieve(product.default_price as string);
+
+	const isSubscription = price.type === ('recurring' as Stripe.Price.Type);
+
+	const productInfo: ProductInfo = {
+		product,
+		price,
+		isSubscription
+	}
+
+	return json(productInfo);
 };

src/routes/products/prices/[priceId]/+server.ts

@@ -1,7 +1,5 @@
 import { json } from '@sveltejs/kit';
-import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
-import stripe from 'stripe';
-const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+import { stripe as stripeClient } from '$lib/utils/stripe';
 
 export const GET = async ({ params }) => {
 	const { priceId } = params;

src/routes/test/test-credits/+page.server.ts

@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {
+	const { session } = await safeGetSession();
+
+	if (!session) {
+		redirect(303, '/');
+	}
+
+	const { data: user } = await supabase
+		.from('users')
+		.select(`name, id`)
+		.eq('id', session.user.id)
+		.single();
+
+	return { session, user };
+};

src/routes/test/test-credits/+page.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	export let data;
+
+	let { session, supabase, user } = data;
+	$: ({ session, supabase, user } = data);
+
+	const credits = writable<number>(0);
+	let errorMessage: string = '';
+
+	onMount(async () => {
+		try {
+			const pageUserId = user?.id;
+			if (pageUserId) {
+				const response = await fetch('/test/test-credits', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({ action: 'getUserCredits', userId: pageUserId })
+				});
+				if (!response.ok) throw new Error('Failed to fetch credits');
+				const { credits: fetchedCredits } = await response.json();
+				credits.set(fetchedCredits);
+			}
+		} catch (error) {
+			errorMessage = error.message;
+		}
+	});
+
+	const addCredits = async () => {
+		try {
+			const response = await fetch('/test/test-credits', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					action: 'addCredits',
+					userId: user?.id,
+					credits: 10,
+					description: 'Test add credits'
+				})
+			});
+			if (!response.ok) throw new Error('Failed to add credits');
+			const { credits: updatedCredits } = await response.json();
+			credits.set(updatedCredits);
+		} catch (error) {
+			errorMessage = error.message;
+		}
+	};
+
+	const deductCredits = async () => {
+		try {
+			const response = await fetch('/test/test-credits', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					action: 'deductCredits',
+					userId: user?.id,
+					credits: 5,
+					description: 'Test deduct credits'
+				})
+			});
+			if (!response.ok) throw new Error('Failed to deduct credits');
+			const { credits: updatedCredits } = await response.json();
+			credits.set(updatedCredits);
+		} catch (error) {
+			errorMessage = error.message;
+		}
+	};
+</script>
+
+<main>
+	<h1>Credits Management for User: {user?.id}</h1>
+	<p>Credits Remaining: {$credits}</p>
+	{#if errorMessage}
+		<p style="color: red;">{errorMessage}</p>
+	{/if}
+
+	<button on:click={addCredits}>Add 10 Credits</button>
+	<button on:click={deductCredits}>Deduct 5 Credits</button>
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 2rem;
+	}
+	button {
+		margin: 0.5rem;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+	}
+</style>

src/routes/test/test-credits/+server.ts

@@ -0,0 +1,29 @@
+import { json } from '@sveltejs/kit';
+import { addCredits, deductCredits, getUserCredits } from '$lib/utils/supabase/admin';
+
+export const POST = async ({ request }) => {
+	const { action, userId, credits, description } = await request.json();
+
+	if (!userId) {
+		return json({ success: false, error: 'User ID is required' }, { status: 400 });
+	}
+
+	try {
+		if (action === 'addCredits') {
+			await addCredits(userId, credits, description);
+			const updatedCredits = await getUserCredits(userId);
+			return json({ success: true, credits: updatedCredits });
+		} else if (action === 'deductCredits') {
+			await deductCredits(userId, credits, description);
+			const updatedCredits = await getUserCredits(userId);
+			return json({ success: true, credits: updatedCredits });
+		} else if (action === 'getUserCredits') {
+			const fetchedCredits = await getUserCredits(userId);
+			return json({ success: true, credits: fetchedCredits });
+		} else {
+			return json({ success: false, error: 'Invalid action' }, { status: 400 });
+		}
+	} catch (error) {
+		return json({ success: false, error: error.message }, { status: 500 });
+	}
+};

src/routes/tools/exampleproduct/+page.server.ts

@@ -0,0 +1,19 @@
+/** @type {import('./$types').PageLoad} */
+import { redirect } from '@sveltejs/kit';
+import { hasProductAccess } from '$lib/utils/supabase/admin';
+import { VITE_PRODUCT_ID_EXAMPLEPRODUCT } from '$env/static/private'; // Import the example product ID from env
+
+export const load = async ({ params, locals: { safeGetSession } }) => {
+	const { session } = await safeGetSession();
+	if (!session) {
+		throw redirect(303, '/login'); // Redirect unauthenticated users to login
+	}
+
+	// Check if the user has access to the 'EXAMPLE PRODUCT' product
+	const accessGranted = await hasProductAccess(session.user.id, VITE_PRODUCT_ID_EXAMPLEPRODUCT);
+	if (!accessGranted) {
+		throw redirect(303, '/unauthorised');
+	}
+
+	return params;
+};

src/routes/tools/exampleproduct/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Example Product</h1>
+<p>This is an example of a tool you could be selling.</p>

src/routes/unauthorised/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Unauthorised Access</h1>
+<p>Sorry, you don't have permission to access this tool.</p>

supabase/config.toml

@@ -49,8 +49,6 @@ enabled = true
 port = 54323
 # External URL of the API server that frontend connects to.
 api_url = "http://127.0.0.1"
-# OpenAI API Key to use for Supabase AI in the Supabase Studio.
-openai_api_key = "env(OPENAI_API_KEY)"
 
 # Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
 # are monitored, and you can view the emails that would have been sent from the web interface.
@@ -67,16 +65,13 @@ enabled = true
 # The maximum file size allowed (e.g. "5MB", "500KB").
 file_size_limit = "50MiB"
 
-[storage.image_transformation]
-enabled = true
-
 [auth]
 enabled = true
 # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
 # in emails.
-site_url = "http://127.0.0.1:3000"
+site_url = "http://localhost:5173"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://127.0.0.1:3000"]
+additional_redirect_urls = ["http://localhost:5173/auth/confirm", "http://localhost:5173/auth/callback"]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # If disabled, the refresh token will never expire.
@@ -112,9 +107,9 @@ max_frequency = "1s"
 # sender_name = "Admin"
 
 # Uncomment to customize email template
-# [auth.email.template.invite]
-# subject = "You have been invited"
-# content_path = "./supabase/templates/invite.html"
+[auth.email.template.magic_link]
+subject = "Sign in to your account"
+content_path = "./supabase/templates/magic_link.html"
 
 [auth.sms]
 # Allow/disallow new user signups via SMS to your project.

supabase/migrations/20240704190621_initial_migration.sql

@@ -5,38 +5,26 @@
 create table users (
   -- UUID from auth.users
   id uuid references auth.users not null primary key,
-  full_name text,
-  avatar_url text,
-  -- The customer's billing address, stored in JSON format.
-  billing_address jsonb,
-  -- Stores your customer's payment instruments.
-  payment_method jsonb
+  name text
 );
-alter table users
-  enable row level security;
-create policy "Can view own user data." on users
-  for select using ((select auth.uid()) = id);
-create policy "Can update own user data." on users
-  for update using ((select auth.uid()) = id);
+alter table users enable row level security;
+create policy "Can view own user data." on users for select using (auth.uid() = id);
+create policy "Can update own user data." on users for update using (auth.uid() = id);
 
 /**
 * This trigger automatically creates a user entry when a new user signs up via Supabase Auth.
 */
 create function public.handle_new_user()
-returns trigger as
-$$
-  begin
-    insert into public.users (id, full_name, avatar_url)
-    values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
-    return new;
-  end;
-$$
-language plpgsql security definer;
-
+returns trigger as $$
+begin
+  insert into public.users (id, name)
+  values (new.id, new.raw_user_meta_data->>'name');
+  return new;
+end;
+$$ language plpgsql security definer;
 create trigger on_auth_user_created
   after insert on auth.users
-  for each row
-    execute procedure public.handle_new_user();
+  for each row execute procedure public.handle_new_user();
 
 /**
 * CUSTOMERS
@@ -64,15 +52,17 @@ create table products (
   name text,
   -- The product's description, meant to be displayable to the customer. Use this field to optionally store a long form explanation of the product being sold for your own rendering purposes.
   description text,
-  -- A URL of the product image in Stripe, meant to be displayable to the customer.
-  image text,
+  -- URLs of the product images in Stripe, meant to be displayable to the customer.
+  images text[],
+  -- A list of up to 15 features for this product. These are displayed in pricing tables.
+  features text[],
   -- Set of key-value pairs, used to store additional information about the object in a structured format.
-  metadata jsonb
+  metadata jsonb,
+  "created_at" timestamp with time zone not null default now(),
+  "updated_at" timestamp with time zone not null default now()
 );
-alter table products
-  enable row level security;
-create policy "Allow public read-only access." on products
-  for select using (true);
+alter table products enable row level security;
+create policy "Allow public read-only access." on products for select using (true);
 
 /**
 * PRICES
@@ -83,8 +73,8 @@ create type pricing_plan_interval as enum ('day', 'week', 'month', 'year');
 create table prices (
   -- Price ID from Stripe, e.g. price_1234.
   id text primary key,
-  -- The ID of the prduct that this price belongs to.
-  product_id text references products,
+  -- The ID of the product that this price belongs to.
+  product_id text not null references products,
   -- Whether the price can be used for new purchases.
   active boolean,
   -- A brief description of the price.
@@ -104,16 +94,14 @@ create table prices (
   -- Set of key-value pairs, used to store additional information about the object in a structured format.
   metadata jsonb
 );
-alter table prices
-  enable row level security;
-create policy "Allow public read-only access." on prices
-  for select using (true);
+alter table prices enable row level security;
+create policy "Allow public read-only access." on prices for select using (true);
 
 /**
 * SUBSCRIPTIONS
 * Note: subscriptions are created and managed in Stripe and synced to our DB via Stripe webhooks.
 */
-create type subscription_status as enum ('trialing', 'active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'unpaid');
+create type subscription_status as enum ('trialing', 'active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'unpaid', 'paused');
 create table subscriptions (
   -- Subscription ID from Stripe, e.g. sub_1234.
   id text primary key,
@@ -122,6 +110,8 @@ create table subscriptions (
   status subscription_status,
   -- Set of key-value pairs, used to store additional information about the object in a structured format.
   metadata jsonb,
+  -- ID of the product this subscription is for.
+  product_id text references products(id) not null,
   -- ID of the price that created this subscription.
   price_id text references prices,
   -- Quantity multiplied by the unit amount of the price creates the amount of the subscription. Can be used to charge multiple seats.
@@ -145,15 +135,21 @@ create table subscriptions (
   -- If the subscription has a trial, the end of that trial.
   trial_end timestamp with time zone default timezone('utc'::text, now())
 );
-alter table subscriptions
-  enable row level security;
-create policy "Can only view own subs data." on subscriptions
-  for select using ((select auth.uid()) = user_id);
+alter table subscriptions enable row level security;
+create policy "Can only view own subs data." on subscriptions for select using (auth.uid() = user_id);
 
-/**
- * REALTIME SUBSCRIPTIONS
- * Only allow realtime listening on public tables.
- */
-drop publication if exists supabase_realtime;
-create publication supabase_realtime
-  for table products, prices;
+-- Purchases table to record product purchases.
+create table purchases (
+  id uuid default uuid_generate_v4() primary key,
+  user_id uuid references auth.users not null,
+  product_id text references products(id) not null,
+  price_id text references prices(id) not null,
+  purchased_at timestamp with time zone not null default now()
+);
+
+-- Enabling row-level security for purchases.
+alter table purchases enable row level security;
+
+-- Creating a policy to ensure that users can only view their own purchase data.
+create policy "Can view own purchase data." on purchases for select using (auth.uid() = user_id);
+create policy "Can insert own purchase data." on purchases for insert with check (auth.uid() = user_id);

supabase/migrations/20240929120431_add_credits.sql

@@ -0,0 +1,35 @@
+create table user_credits (
+  user_id uuid references auth.users not null primary key,
+  credits_remaining integer not null default 0,
+  last_updated timestamp with time zone not null default now()
+);
+
+alter table user_credits enable row level security;
+
+create policy "Can view own credits." on user_credits
+  for select using (auth.uid() = user_id);
+
+-- Uncomment and modify the update policy if allowing users to modify their own credits
+-- create policy "Can update own credits." on user_credits
+--   for update using (auth.uid() = user_id);
+
+create table credit_transactions (
+  id uuid default uuid_generate_v4() primary key,
+  user_id uuid references auth.users not null,
+  credits_change integer not null,
+  description text,
+  created_at timestamp with time zone not null default now()
+);
+
+alter table credit_transactions enable row level security;
+
+create policy "Can view own transactions." on credit_transactions
+  for select using (auth.uid() = user_id);
+
+-- Adding indexing to improve query performance
+create index on user_credits (user_id);
+create index on credit_transactions (user_id);
+
+-- Adding a check constraint to enforce data integrity
+alter table credit_transactions
+add constraint check_credits_change_nonzero check (credits_change <> 0);

supabase/templates/magic_link.html

@@ -0,0 +1,6 @@
+<h1>Sign in to your account</h1>
+
+<p>
+	Click this link to log in:
+	<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email"> Log In </a>
+</p>

tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "bundler",
 		"module": "es2015"
 	},
-	"include": ["src/**/*", "node_modules/**/*.d.ts"]
+	"include": ["src/**/*", "node_modules/**/*.d.ts", ".svelte-kit/ambient.d.ts"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), purgeCss()]
 });