primer prueba de concepto para firebase

src/lib/components/FireBaseButton.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { getFirebaseAuth } from '$lib/stores/firebase.ts';
+	import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+	import Button from './ui/button/button.svelte';
+
+	const handleGoogleSignIn = async () => {
+		const auth = getFirebaseAuth();
+		const provider = new GoogleAuthProvider();
+		try {
+			await signInWithPopup(auth, provider);
+		} catch (error) {
+			console.error('Error signing in with Google:', error);
+		}
+	};
+</script>
+
+<Button onclick={handleGoogleSignIn}>Sign in with Google</Button>

src/lib/stores/firebase.ts

@@ -0,0 +1,37 @@
+import { initializeApp, type FirebaseApp } from 'firebase/app';
+import { getAuth, type Auth } from 'firebase/auth';
+
+import {
+	PUBLIC_f_apiKey,
+	PUBLIC_f_appId,
+	PUBLIC_f_authDomain,
+	PUBLIC_f_messagingSenderId,
+	PUBLIC_f_projectId,
+	PUBLIC_f_storageBucket
+} from '$env/static/public';
+
+let app: FirebaseApp | null = null;
+let auth: Auth | null = null;
+
+const firebaseConfig = {
+	apiKey: PUBLIC_f_apiKey,
+	authDomain: PUBLIC_f_authDomain,
+	projectId: PUBLIC_f_projectId,
+	storageBucket: PUBLIC_f_storageBucket,
+	messagingSenderId: PUBLIC_f_messagingSenderId,
+	appId: PUBLIC_f_appId
+};
+
+export function getFirebaseApp(): FirebaseApp {
+	if (!app) {
+		app = initializeApp(firebaseConfig);
+	}
+	return app;
+}
+
+export function getFirebaseAuth(): Auth {
+	if (!auth) {
+		auth = getAuth(getFirebaseApp());
+	}
+	return auth;
+}

src/routes/register/+page.svelte

@@ -3,6 +3,9 @@
 	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
 	import * as Alert from '@/components/ui/alert';
 	import { fade } from 'svelte/transition';
+	import FireBaseButton from '@/components/FireBaseButton.svelte';
+	import Card from '@/components/ui/card/card.svelte';
+	import CardContent from '@/components/ui/card/card-content.svelte';
 
 	let showAlert: boolean = $state(false);
 
@@ -21,6 +24,12 @@
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-sm">
 		<SignupForm bind:showAlert />
+
+		<Card class="mt-2">
+			<CardContent>
+				<FireBaseButton />
+			</CardContent>
+		</Card>
 		{#if showAlert}
 			<div class="mt-2" transition:fade>
 				<Alert.Root variant="destructive">