Adding more OAuth provider scaffolding and using svgs for icons.

package.json

@@ -121,6 +121,7 @@
 		"radix-svelte": "^0.9.0",
 		"rate-limit-redis": "^4.2.0",
 		"reflect-metadata": "^0.2.2",
+		"simple-icons": "^13.10.0",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-lazy-loader": "^1.0.0",
 		"tailwind-merge": "^2.5.2",

pnpm-lock.yaml

@@ -143,6 +143,9 @@ importers:
       reflect-metadata:
         specifier: ^0.2.2
         version: 0.2.2
+      simple-icons:
+        specifier: ^13.10.0
+        version: 13.10.0
       svelte-french-toast:
         specifier: ^1.2.0
         version: 1.2.0(svelte@5.0.0-next.175)
@@ -4222,6 +4225,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-icons@13.10.0:
+    resolution: {integrity: sha512-akHZxjNvq4nLlLsKxDot7A+ZYXgjhAP4GwvWEItHeKiquuWXoI8xGGfP+hzGLbTmbmi2teYmHMS45PIOFy6EFA==}
+    engines: {node: '>=0.12.18'}
+
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -4237,10 +4244,6 @@ packages:
     resolution: {integrity: sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==}
     hasBin: true
 
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
-    engines: {node: '>=0.10.0'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -8423,7 +8426,7 @@ snapshots:
     dependencies:
       chokidar: 4.0.0
       immutable: 4.3.7
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
     optional: true
 
   satori-html@0.3.2:
@@ -8551,6 +8554,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-icons@13.10.0: {}
+
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
@@ -8570,9 +8575,6 @@ snapshots:
       minimist: 1.2.8
       sander: 0.5.1
 
-  source-map-js@1.2.0:
-    optional: true
-
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:

src/routes/(app)/(protected)/collections/[cuid]/+page.svelte

@@ -40,7 +40,7 @@ console.log('items', items)
 <div class="games">
 	<div class="games-list">
 		{#if items.length === 0}
-			<h2>No gamesTable in your collection</h2>
+			<h2>No games in your collection</h2>
 		{:else}
 			{#each items as game (game.game_id)}
 				<Game {game} />

src/routes/(app)/(protected)/settings/profile/+page.server.ts

@@ -18,14 +18,6 @@ export const load: PageServerLoad = async (event) => {
 		throw redirect(302, '/login', notSignedInMessage, event)
 	}
 
-	console.log('authedUser', authedUser)
-	// if (userNotAuthenticated(user, session)) {
-	// 	redirect(302, '/login', notSignedInMessage, event);
-	// }
-	// const dbUser = await db.query.usersTable.findFirst({
-	// 	where: eq(usersTable.id, user!.id!),
-	// });
-
 	const profileForm = await superValidate(zod(updateProfileSchema), {
 		defaults: {
 			firstName: authedUser?.firstName ?? '',

src/routes/(auth)/login/+page.svelte

@@ -9,10 +9,10 @@ import { boredState } from '$lib/stores/boredState.js'
 import { receive, send } from '$lib/utils/pageCrossfade'
 import { signInSchema } from '$lib/validations/auth'
 import { AlertCircle } from 'lucide-svelte'
+import { siApple, siGithub, siGoogle } from 'simple-icons'
 import * as flashModule from 'sveltekit-flash-message/client'
 import { zodClient } from 'sveltekit-superforms/adapters'
 import { superForm } from 'sveltekit-superforms/client'
-import { Github } from 'lucide-svelte'
 
 let { data } = $props()
 
@@ -91,9 +91,15 @@ const { form: loginForm, enhance } = superLoginForm
 
 {#snippet oAuthButtons()}
 	<div class="grid gap-4">
-		<Button href="/login/github" variant="outline" class="w-full"><Github class="mr-2 h-4 w-4" />GitHub</Button>
+		<Button href="/login/google" variant="outline" class="w-full flex items-center gap-2"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg> Google</Button>
+		<Button href="/login/apple" variant="outline" class="w-full flex items-center gap-2"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg> Apple</Button>
+		<Button href="/login/github" variant="outline" class="w-full flex items-center gap-2"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> GitHub</Button>
 	</div>
 {/snippet}
 
 <style lang="postcss">
+	svg {
+		width: 24px;
+		height: 24px;
+	}
 </style>

src/routes/(auth)/login/apple/+server.ts

@@ -0,0 +1,20 @@
+import { github } from '$lib/server/auth'
+import { redirect } from '@sveltejs/kit'
+import { generateState } from 'arctic'
+
+import type { RequestEvent } from '@sveltejs/kit'
+
+export async function GET(event: RequestEvent): Promise<Response> {
+	const state = generateState()
+	const url = await github.createAuthorizationURL(state)
+
+	event.cookies.set('github_oauth_state', state, {
+		path: '/',
+		secure: import.meta.env.PROD,
+		httpOnly: true,
+		maxAge: 60 * 10,
+		sameSite: 'lax',
+	})
+
+	redirect(302, url.toString())
+}

src/routes/(auth)/login/google/+server.ts

@@ -0,0 +1,20 @@
+import { github } from '$lib/server/auth'
+import { redirect } from '@sveltejs/kit'
+import { generateState } from 'arctic'
+
+import type { RequestEvent } from '@sveltejs/kit'
+
+export async function GET(event: RequestEvent): Promise<Response> {
+	const state = generateState()
+	const url = await github.createAuthorizationURL(state)
+
+	event.cookies.set('github_oauth_state', state, {
+		path: '/',
+		secure: import.meta.env.PROD,
+		httpOnly: true,
+		maxAge: 60 * 10,
+		sameSite: 'lax',
+	})
+
+	redirect(302, url.toString())
+}

src/routes/(auth)/login/spotify/+server.ts

@@ -0,0 +1,20 @@
+import { github } from '$lib/server/auth'
+import { redirect } from '@sveltejs/kit'
+import { generateState } from 'arctic'
+
+import type { RequestEvent } from '@sveltejs/kit'
+
+export async function GET(event: RequestEvent): Promise<Response> {
+	const state = generateState()
+	const url = await github.createAuthorizationURL(state)
+
+	event.cookies.set('github_oauth_state', state, {
+		path: '/',
+		secure: import.meta.env.PROD,
+		httpOnly: true,
+		maxAge: 60 * 10,
+		sameSite: 'lax',
+	})
+
+	redirect(302, url.toString())
+}

src/routes/(auth)/login/tidal/+server.ts

@@ -0,0 +1,20 @@
+import { github } from '$lib/server/auth'
+import { redirect } from '@sveltejs/kit'
+import { generateState } from 'arctic'
+
+import type { RequestEvent } from '@sveltejs/kit'
+
+export async function GET(event: RequestEvent): Promise<Response> {
+	const state = generateState()
+	const url = await github.createAuthorizationURL(state)
+
+	event.cookies.set('github_oauth_state', state, {
+		path: '/',
+		secure: import.meta.env.PROD,
+		httpOnly: true,
+		maxAge: 60 * 10,
+		sameSite: 'lax',
+	})
+
+	redirect(302, url.toString())
+}