From 9b50e0fb48d27c4831999f310063f1068982ed0d Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Thu, 19 Sep 2024 16:55:03 -0700 Subject: [PATCH] Adding more OAuth provider scaffolding and using svgs for icons. --- package.json | 1 + pnpm-lock.yaml | 18 +++++++++-------- .../collections/[cuid]/+page.svelte | 2 +- .../settings/profile/+page.server.ts | 8 -------- src/routes/(auth)/login/+page.svelte | 10 ++++++++-- src/routes/(auth)/login/apple/+server.ts | 20 +++++++++++++++++++ src/routes/(auth)/login/google/+server.ts | 20 +++++++++++++++++++ src/routes/(auth)/login/spotify/+server.ts | 20 +++++++++++++++++++ src/routes/(auth)/login/tidal/+server.ts | 20 +++++++++++++++++++ 9 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 src/routes/(auth)/login/apple/+server.ts create mode 100644 src/routes/(auth)/login/google/+server.ts create mode 100644 src/routes/(auth)/login/spotify/+server.ts create mode 100644 src/routes/(auth)/login/tidal/+server.ts diff --git a/package.json b/package.json index 59cf53a..9423b10 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c3c844e..daff87b 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte b/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte index 450233c..70a1054 100644 --- a/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte +++ b/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte @@ -40,7 +40,7 @@ console.log('items', items)
{#if items.length === 0} -

No gamesTable in your collection

+

No games in your collection

{:else} {#each items as game (game.game_id)} diff --git a/src/routes/(app)/(protected)/settings/profile/+page.server.ts b/src/routes/(app)/(protected)/settings/profile/+page.server.ts index 77cab00..1841c32 100644 --- a/src/routes/(app)/(protected)/settings/profile/+page.server.ts +++ b/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 ?? '', diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte index 3cfe70c..8d6ecaf 100644 --- a/src/routes/(auth)/login/+page.svelte +++ b/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()}
- + + +
{/snippet} \ No newline at end of file diff --git a/src/routes/(auth)/login/apple/+server.ts b/src/routes/(auth)/login/apple/+server.ts new file mode 100644 index 0000000..d9e5c33 --- /dev/null +++ b/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 { + 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()) +} diff --git a/src/routes/(auth)/login/google/+server.ts b/src/routes/(auth)/login/google/+server.ts new file mode 100644 index 0000000..d9e5c33 --- /dev/null +++ b/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 { + 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()) +} diff --git a/src/routes/(auth)/login/spotify/+server.ts b/src/routes/(auth)/login/spotify/+server.ts new file mode 100644 index 0000000..d9e5c33 --- /dev/null +++ b/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 { + 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()) +} diff --git a/src/routes/(auth)/login/tidal/+server.ts b/src/routes/(auth)/login/tidal/+server.ts new file mode 100644 index 0000000..d9e5c33 --- /dev/null +++ b/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 { + 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()) +}