Skip to content

Commit 61f5611

Browse files
frederickobrienfrederickobrien
committed
Local dev closer to prod CORS, limit remote functions to forms
Attempting to get things working after #55. Looks like remote functions may have some issues around origin so hopefully this approach is temporary
1 parent b22e1e6 commit 61f5611

File tree

11 files changed

+108
-61
lines changed

11 files changed

+108
-61
lines changed

‎api/src/hooks.server.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { dev } from '$app/environment';
21
import type { Handle } from '@sveltejs/kit';
3-
import { APP_DOMAIN, DASHBOARD_DOMAIN } from '../../shared/config';
2+
import { APP_BASE, DASHBOARD_BASE } from '$lib/server/config';
43

5-
const domainsWithAccessToAPI = [APP_DOMAIN, DASHBOARD_DOMAIN, 'https://checkout.stripe.com'];
4+
const domainsWithAccessToAPI = [APP_BASE, DASHBOARD_BASE, 'https://checkout.stripe.com'];
65
const publicEndpoints = ['/', '/checkout/success'];
76

87
const appendHeaders = (response: Response, origin: string | null) => {
@@ -21,7 +20,7 @@ export const handle: Handle = async ({ resolve, event }) => {
2120
return response;
2221
}
2322

24-
if ((origin === null || !domainsWithAccessToAPI.includes(origin)) && !dev) {
23+
if (!origin || !domainsWithAccessToAPI.includes(origin)) {
2524
console.error(`Unauthorized access attempt from origin: ${origin}`);
2625
return new Response('Unauthorised', { status: 401 });
2726
}

‎api/src/lib/server/config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { dev } from '$app/environment';
2+
import {
3+
APP_DOMAIN,
4+
APP_LOCAL_PORT,
5+
DASHBOARD_DOMAIN,
6+
DASHBOARD_LOCAL_PORT
7+
} from '../../../../shared/config';
8+
9+
export const APP_BASE = dev ? `http://localhost:${APP_LOCAL_PORT}` : APP_DOMAIN;
10+
export const DASHBOARD_BASE = dev ? `http://localhost:${DASHBOARD_LOCAL_PORT}` : DASHBOARD_DOMAIN;

‎app/src/lib/global/config.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { dev } from '$app/environment';
2-
import { API_DOMAIN, API_LOCAL_PORT } from '../../../../shared/config';
2+
import { API_DOMAIN, API_LOCAL_PORT, APP_DOMAIN, APP_LOCAL_PORT } from '../../../../shared/config';
33

44
export const PUBLIC_SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
55
export const PUBLIC_SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;
66

77
export const PUBLIC_PATH_ROOTS = ['/login', '/auth', '/about', '/contact', '/privacy', '/terms'];
88

99
export const API_BASE = dev ? `http://localhost:${API_LOCAL_PORT}` : API_DOMAIN;
10+
const APP_BASE = dev ? `http://localhost:${APP_LOCAL_PORT}` : APP_DOMAIN;
11+
12+
export const REQUEST_HEADER_BOILERPLATE = {
13+
'Content-Type': 'application/json',
14+
origin: APP_BASE
15+
};

‎app/src/lib/remote-functions/collections.remote.ts‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { form, query } from '$app/server';
2-
import { API_BASE } from '$lib/global/config';
1+
import { form } from '$app/server';
2+
import { API_BASE, REQUEST_HEADER_BOILERPLATE } from '$lib/global/config';
33
import * as z from 'zod';
44
import { requireAuth } from './auth-check';
5-
import { redirect } from '@sveltejs/kit';
65

76
const MakeCollectionForm = z.object({
87
name: z.string().min(3).max(100),
@@ -23,9 +22,7 @@ export const makeCollection = form(MakeCollectionForm, async ({ name, descriptio
2322
const userId = requireAuth().id;
2423
await fetch(`${API_BASE}/collections`, {
2524
method: 'POST',
26-
headers: {
27-
'Content-Type': 'application/json'
28-
},
25+
headers: REQUEST_HEADER_BOILERPLATE,
2926
body: JSON.stringify({ userId, name, description })
3027
});
3128
});
@@ -34,9 +31,7 @@ export const deleteCollection = form(DeleteCollectionForm, async ({ collectionId
3431
const userId = requireAuth().id;
3532
await fetch(`${API_BASE}/collections/${collectionId}`, {
3633
method: 'DELETE',
37-
headers: {
38-
'Content-Type': 'application/json'
39-
},
34+
headers: REQUEST_HEADER_BOILERPLATE,
4035
body: JSON.stringify({ userId })
4136
});
4237
});
@@ -46,17 +41,8 @@ export const addOrRemoveReleaseFromCollection = form(
4641
async ({ collectionId, releaseId, addOrRemove }) => {
4742
await fetch(`${API_BASE}/collections/${collectionId}`, {
4843
method: 'PATCH',
49-
headers: {
50-
'Content-Type': 'application/json'
51-
},
44+
headers: REQUEST_HEADER_BOILERPLATE,
5245
body: JSON.stringify({ releaseId, addOrRemove })
5346
});
5447
}
5548
);
56-
57-
export const getCollection = query(z.string(), async (collectionId: string) => {
58-
const response = await fetch(`${API_BASE}/collections/${collectionId}`);
59-
if (!response.ok) throw redirect(302, '/me/collections');
60-
const collection = await response.json();
61-
return collection;
62-
});

‎app/src/lib/remote-functions/mixtapes.remote.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { form, query } from '$app/server';
2-
import { API_BASE } from '$lib/global/config';
1+
import { form } from '$app/server';
2+
import { API_BASE, REQUEST_HEADER_BOILERPLATE } from '$lib/global/config';
33
import * as z from 'zod';
44
import { requireAuth } from './auth-check';
5-
import type { MixtapeHydrated } from '../../../../shared/types/hydrated';
6-
import { redirect } from '@sveltejs/kit';
75

86
const MakeMixtapeForm = z.object({
97
name: z.string().min(3).max(100),
@@ -15,20 +13,11 @@ const AddTrackToMixtape = z.object({
1513
trackId: z.string()
1614
});
1715

18-
export const getMixtape = query(z.string(), async (mixtapeId: string) => {
19-
const response = await fetch(`${API_BASE}/mixtapes/${mixtapeId}`);
20-
if (!response.ok) throw redirect(302, '/me/mixtapes');
21-
const mixtape: MixtapeHydrated = await response.json();
22-
return mixtape;
23-
});
24-
2516
export const makeMixtape = form(MakeMixtapeForm, async ({ name, description }) => {
2617
const userId = requireAuth().id;
2718
await fetch(`${API_BASE}/mixtapes`, {
2819
method: 'POST',
29-
headers: {
30-
'Content-Type': 'application/json'
31-
},
20+
headers: REQUEST_HEADER_BOILERPLATE,
3221
body: JSON.stringify({ userId, name, description })
3322
});
3423
});
@@ -37,19 +26,15 @@ export const deleteMixtape = form(z.object({ mixtapeId: z.string() }), async ({
3726
const userId = requireAuth().id;
3827
await fetch(`${API_BASE}/mixtapes/${mixtapeId}`, {
3928
method: 'DELETE',
40-
headers: {
41-
'Content-Type': 'application/json'
42-
},
29+
headers: REQUEST_HEADER_BOILERPLATE,
4330
body: JSON.stringify({ userId })
4431
});
4532
});
4633

4734
export const addTrackToMixtape = form(AddTrackToMixtape, async ({ mixtapeId, trackId }) => {
4835
await fetch(`${API_BASE}/mixtapes/${mixtapeId}`, {
4936
method: 'PATCH',
50-
headers: {
51-
'Content-Type': 'application/json'
52-
},
37+
headers: REQUEST_HEADER_BOILERPLATE,
5338
body: JSON.stringify({ trackId })
5439
});
5540
});

‎app/src/lib/remote-functions/releases.remote.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { query } from '$app/server';
2-
import { API_BASE } from '$lib/global/config';
2+
import { API_BASE, REQUEST_HEADER_BOILERPLATE } from '$lib/global/config';
33
import * as z from 'zod';
44
import type { ReleaseHydrated } from '../../../../shared/types/hydrated';
55

66
export const getHydratedRelease = query(z.string(), async (releaseId: string) => {
7-
const response = await fetch(`${API_BASE}/releases/${releaseId}`);
7+
const response = await fetch(`${API_BASE}/releases/${releaseId}`, {
8+
method: 'GET',
9+
headers: REQUEST_HEADER_BOILERPLATE
10+
});
811
if (!response.ok) throw new Error('Failed to fetch release');
912
const release: ReleaseHydrated = await response.json();
1013
return release;

‎app/src/lib/remote-functions/user.remote.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { form } from '$app/server';
2-
import { API_BASE } from '$lib/global/config';
2+
import { API_BASE, REQUEST_HEADER_BOILERPLATE } from '$lib/global/config';
33
import * as z from 'zod';
44
import { requireAuth } from './auth-check';
55

@@ -20,9 +20,7 @@ export const toggleFollowedArtist = form(
2020

2121
await fetch(`${API_BASE}/users/${userId}/following`, {
2222
method: addOrRemove === 'remove' ? 'DELETE' : 'POST',
23-
headers: {
24-
'Content-Type': 'application/json'
25-
},
23+
headers: REQUEST_HEADER_BOILERPLATE,
2624
body: JSON.stringify({ artistId: artistID })
2725
});
2826
}
@@ -33,9 +31,7 @@ export const toggleLikedTrack = form(ToggleLikedTrackForm, async ({ trackId, add
3331

3432
await fetch(`${API_BASE}/users/${userId}/likes`, {
3533
method: addOrRemove === 'remove' ? 'DELETE' : 'POST',
36-
headers: {
37-
'Content-Type': 'application/json'
38-
},
34+
headers: REQUEST_HEADER_BOILERPLATE,
3935
body: JSON.stringify({ trackId })
4036
});
4137
});

‎app/src/routes/me/collections/[slug]/+page.svelte‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
<script lang="ts">
22
import SectionLink from '$lib/components/layout/SectionLink.svelte';
33
import ReleaseCardGrid from '$lib/components/ReleaseCardGrid.svelte';
4-
import { deleteCollection, getCollection } from '$lib/remote-functions/collections.remote';
4+
import { deleteCollection } from '$lib/remote-functions/collections.remote';
5+
import type { Mixtape, User } from '../../../../../../shared/types/core';
6+
import type { CollectionHydrated, TrackHydrated } from '../../../../../../shared/types/hydrated';
7+
import type { Session } from '@supabase/supabase-js';
58
6-
let { params } = $props();
9+
let {
10+
data
11+
}: {
12+
data: {
13+
collection: CollectionHydrated;
14+
session: Session;
15+
profileData: User;
16+
collections: CollectionHydrated[];
17+
likedTracks: TrackHydrated[];
18+
mixtapes: Mixtape[];
19+
};
20+
} = $props();
721
8-
let collectionPromise = $derived(getCollection(params.slug));
9-
let { id, name, description, releases } = $derived(await collectionPromise);
22+
let { id, name, description, releases } = $derived(data.collection);
1023
</script>
1124

1225
<svelte:head>

‎app/src/routes/me/collections/[slug]/+page.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { API_BASE } from '$lib/global/config';
2+
import type { CollectionHydrated } from '../../../../../../shared/types/hydrated';
3+
4+
export const load = async ({ fetch, params }) => {
5+
const collection: CollectionHydrated = await fetch(`${API_BASE}/collections/${params.slug}`).then(
6+
(res) => res.json()
7+
);
8+
if (!collection)
9+
return {
10+
status: 404,
11+
error: new Error('Not Found')
12+
};
13+
return {
14+
collection
15+
};
16+
};

‎app/src/routes/me/mixtapes/[slug]/+page.svelte‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
<script lang="ts">
22
import SectionLink from '$lib/components/layout/SectionLink.svelte';
33
import TracksTable from '$lib/components/releases/TracksTable.svelte';
4-
import { deleteMixtape, getMixtape } from '$lib/remote-functions/mixtapes.remote';
4+
import { deleteMixtape } from '$lib/remote-functions/mixtapes.remote';
5+
import type { Session } from '@supabase/supabase-js';
6+
import type { Mixtape, User } from '../../../../../../shared/types/core';
7+
import type {
8+
CollectionHydrated,
9+
MixtapeHydrated,
10+
TrackHydrated
11+
} from '../../../../../../shared/types/hydrated';
512
6-
let { params } = $props();
13+
let {
14+
data
15+
}: {
16+
data: {
17+
mixtape: MixtapeHydrated;
18+
session: Session;
19+
profileData: User;
20+
collections: CollectionHydrated[];
21+
likedTracks: TrackHydrated[];
22+
mixtapes: Mixtape[];
23+
};
24+
} = $props();
725
8-
let mixtapePromise = $derived(getMixtape(params.slug));
9-
let { id, name, description, tracks } = $derived(await mixtapePromise);
26+
let { id, name, description, tracks } = $derived(data.mixtape);
1027
</script>
1128

1229
<svelte:head>

0 commit comments

Comments
 (0)