Update login providers list

src/lib/auth/providers.ts

@@ -0,0 +1,7 @@
+export const oauthProviders = [
+	{ id: 'hca', label: 'Hack Club', primary: true },
+	{ id: 'github', label: 'GitHub', primary: false },
+	{ id: 'google', label: 'Google', primary: false }
+] as const;
+
+export type OAuthProviderId = (typeof oauthProviders)[number]['id'];

src/lib/components/login.svelte

@@ -3,12 +3,13 @@
 	import * as Card from '$lib/components/ui/card/index.js';
 	import * as Item from '$lib/components/ui/item/index.js';
 	import Button from './ui/button/button.svelte';
-	import { authClient } from '$lib/auth-client';
+	import { authClient } from '$lib/auth/client';
 	import { useAuth } from '@mmailaender/convex-better-auth-svelte/svelte';
 	import { ArrowRight, ArrowRightIcon, LoaderCircle } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import Label from './ui/label/label.svelte';
 	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import { oauthProviders } from '$lib/auth/providers';
 
 	const auth = useAuth();
 	let loading = $state(false);
@@ -52,27 +53,32 @@
 						<LoaderCircle class="size-5 animate-spin" />
 					</div>
 				{:else}
-					<Button
-						disabled={loading}
-						onclick={async () => {
-							loading = true;
-							try {
-								const { error } = await authClient.signIn.oauth2({
-									providerId: 'hca',
-									callbackURL: '/organizer'
-								});
-								if (error) {
-									loading = false;
-									toast.error('Something went wrong');
-								}
-							} catch {
-								loading = false;
-								toast.error('Something went wrong');
-							}
-						}}
-					>
-						Continue with Hack Club
-					</Button>
+					<div class="grid gap-4">
+						{#each oauthProviders as provider (provider.id)}
+							<Button
+								variant={provider.primary ? 'default' : 'outline'}
+								disabled={loading}
+								onclick={async () => {
+									loading = true;
+									try {
+										const { error } = await authClient.signIn.oauth2({
+											providerId: provider.id,
+											callbackURL: '/organizer'
+										});
+										if (error) {
+											loading = false;
+											toast.error('Something went wrong');
+										}
+									} catch {
+										loading = false;
+										toast.error('Something went wrong');
+									}
+								}}
+							>
+								Continue with {provider.label}
+							</Button>
+						{/each}
+					</div>
 					<form class="flex w-full flex-col gap-2">
 						<Label for="email-{id}">Email</Label>
 						<InputGroup.Root class="w-full">

src/lib/components/organizer/sidebar/account-dialog.svelte

@@ -9,7 +9,7 @@
 	import Label from '$lib/components/ui/label/label.svelte';
 
 	import { useSidebar } from '$lib/components/ui/sidebar';
-	import { authClient } from '$lib/auth-client';
+	import { authClient } from '$lib/auth/client';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 	import {
@@ -24,6 +24,7 @@
 	} from '@lucide/svelte';
 	import { UAParser } from 'ua-parser-js';
 	import { cn } from '$lib/utils';
+	import { oauthProviders } from '$lib/auth/providers';
 
 	let {
 		open = $bindable(),
@@ -87,12 +88,6 @@
 		accountId: string;
 	};
 
-	const providerConfigs = [
-		{ id: 'hca', label: 'Hack Club' },
-		{ id: 'github', label: 'GitHub' },
-		{ id: 'google', label: 'Google' }
-	] as const;
-
 	function parseSession(session: SessionItem): ParsedSession {
 		const ua = new UAParser(session.userAgent ?? '');
 		const browser = ua.getBrowser();
@@ -174,7 +169,7 @@
 			if (error) throw error;
 		} catch (err) {
 			toast.error(
-				`Failed to link ${providerConfigs.find((p) => p.id === providerId)?.label ?? providerId}`
+				`Failed to link ${oauthProviders.find((p) => p.id === providerId)?.label ?? providerId}`
 			);
 			console.error(err);
 			linkingProvider = { ...linkingProvider, [providerId]: false };
@@ -194,11 +189,11 @@
 			if (error) throw error;
 			accounts = accounts.filter((account) => account.id !== linked.id);
 			toast.success(
-				`${providerConfigs.find((p) => p.id === providerId)?.label ?? providerId} unlinked`
+				`${oauthProviders.find((p) => p.id === providerId)?.label ?? providerId} unlinked`
 			);
 		} catch (err) {
 			toast.error(
-				`Failed to unlink ${providerConfigs.find((p) => p.id === providerId)?.label ?? providerId}`
+				`Failed to unlink ${oauthProviders.find((p) => p.id === providerId)?.label ?? providerId}`
 			);
 			console.error(err);
 		} finally {
@@ -401,7 +396,7 @@
 			<p class="text-xs text-muted-foreground">Link or unlink sign-in providers.</p>
 		</div>
 		<div class="space-y-2 p-4">
-			{#each providerConfigs as provider (provider.id)}
+			{#each oauthProviders as provider (provider.id)}
 				{@const linked = getLinkedAccount(provider.id)}
 				<div class="flex items-center justify-between rounded-sm border px-3 py-2.5">
 					<div class="text-sm font-medium">{provider.label}</div>

src/lib/components/organizer/sidebar/user.svelte

@@ -5,7 +5,7 @@
 	import { ChevronUpIcon, LogOutIcon, SettingsIcon } from '@lucide/svelte';
 	import type { FunctionReturnType } from 'convex/server';
 	import { api } from '$convex/_generated/api';
-	import { authClient } from '$lib/auth-client';
+	import { authClient } from '$lib/auth/client';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { useQuery } from '@mmailaender/convex-svelte';

src/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -18,6 +18,7 @@
 </script>
 
 <Button
+	bind:ref
 	data-sidebar="trigger"
 	data-slot="sidebar-trigger"
 	variant="ghost"

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 	import favicon from '$lib/assets/favicon.svg';
 	import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte';
 
-	import { authClient } from '$lib/auth-client';
+	import { authClient } from '$lib/auth/client';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';