svelte-firekit 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/auth/reset-password.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import ResetPasswordForm from "../components/auth/reset-password-form.svelte";
+    import Button from "../components/ui/button/button.svelte";
+    import * as Card from "../components/ui/card";
+</script>
+
+<Card.Root class="sm:w-[448px]">
+    <Card.Header>
+        <Card.Title class="text-center text-2xl">Forgot password?</Card.Title>
+        <Card.Description class="text-center">
+            Remember your password?
+            <Button variant="link" href="/sign-in" class="p-0"
+                >Sign in here</Button
+            >
+        </Card.Description>
+    </Card.Header>
+    <Card.Content>
+        <ResetPasswordForm />
+    </Card.Content>
+</Card.Root>

package/dist/auth/reset-password.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResetPassword: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ResetPassword = InstanceType<typeof ResetPassword>;
+export default ResetPassword;

package/dist/auth/sign-in.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
+    import SignInForm from "../components/auth/sign-in-form.svelte";
+    import Button from "../components/ui/button/button.svelte";
+    import * as Card from "../components/ui/card";
+    let { title = "Sign in" }: { title: string } = $props();
+</script>
+
+<Card.Root class="sm:w-[448px]">
+    <Card.Header>
+        <Card.Title class="text-center text-2xl">{title}</Card.Title>
+        <Card.Description class="text-center">
+            Don't have an account yet?
+            <Button variant="link" href="/sign-up" class="p-0"
+                >Sign up here</Button
+            >
+        </Card.Description>
+    </Card.Header>
+    <Card.Content class="space-y-5">
+        <SignInWithGoogle label="Sign in" />
+
+        <div
+            class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
+        >
+            Or
+        </div>
+
+        <SignInForm />
+    </Card.Content>
+</Card.Root>

package/dist/auth/sign-in.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const SignIn: import("svelte").Component<{
+    title: string;
+}, {}, "">;
+export default SignIn;

package/dist/auth/sign-up.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
+    import SignUpForm from "../components/auth/sign-up-form.svelte";
+    import Button from "../components/ui/button/button.svelte";
+    import * as Card from "../components/ui/card";
+    let { title = "Sign up" }: { title: string } = $props();
+</script>
+
+<Card.Root class="sm:w-[448px]">
+    <Card.Header>
+        <Card.Title class="text-center text-2xl">{title}</Card.Title>
+        <Card.Description class="text-center">
+            Already have an account?
+            <Button variant="link" href="/sign-in" class="p-0"
+                >Sign in here</Button
+            >
+        </Card.Description>
+    </Card.Header>
+    <Card.Content class="space-y-5">
+        <SignInWithGoogle label="Sign up" />
+
+        <div
+            class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
+        >
+            Or
+        </div>
+
+        <SignUpForm />
+    </Card.Content>
+</Card.Root>

package/dist/auth/sign-up.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const SignUp: import("svelte").Component<{
+    title: string;
+}, {}, "">;
+export default SignUp;

package/dist/auth/uid.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/auth/uid.js

@@ -0,0 +1,7 @@
+"use strict";
+// import { get } from "svelte/store";
+// import { authState } from "./user";
+// export const getUid = () => {
+//   const u = get(authState);
+//   return (u && u.uid) || "anonymous"; // 'anonymous' allows support messages to be saved by non-logged-in users
+// };

package/dist/auth/user-button.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import * as DropdownMenu from "../components/ui/dropdown-menu/index.js";
+    import * as Avatar from "../components/ui/avatar/index.js";
+    import { authUser } from "./user.svelte.js";
+    import { getInitials } from "../utils.js";
+    import { LogOut } from "lucide-svelte";
+    import { logOut } from "../auth.js";
+    import type { NavItem } from "../types/nav.js";
+    let { nav }: { nav: NavItem[] } = $props();
+    import * as AlertDialog from "../components/ui/alert-dialog/index.js";
+    import Button from "../components/ui/button/button.svelte";
+    let isOpen = $state(false);
+</script>
+
+{#if authUser.currentUser}
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+            <Avatar.Root>
+                <Avatar.Image
+                    src={authUser.currentUser?.photoURL}
+                    alt="Avatar"
+                />
+                <Avatar.Fallback>
+                    {getInitials(authUser.currentUser?.displayName)}
+                </Avatar.Fallback>
+            </Avatar.Root>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+            <DropdownMenu.Group>
+                <DropdownMenu.GroupHeading>
+                    <div class="flex items-center gap-3">
+                        <Avatar.Root>
+                            <Avatar.Image
+                                src={authUser.currentUser?.photoURL}
+                                alt="Avatar"
+                            />
+                            <Avatar.Fallback>
+                                {getInitials(authUser.currentUser?.displayName)}
+                            </Avatar.Fallback>
+                        </Avatar.Root>
+                        <div class="grow">
+                            <span
+                                class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
+                            >
+                                {authUser.currentUser?.displayName}
+                            </span>
+                            <p class="text-xs text-foreground-500">
+                                {authUser.currentUser?.email}
+                            </p>
+                        </div>
+                    </div>
+                </DropdownMenu.GroupHeading>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item onclick={() => (isOpen = true)}>
+                    Profile
+                </DropdownMenu.Item>
+                {#each nav as { href, label }}
+                    <DropdownMenu.Item>
+                        <a {href}>
+                            {label}
+                        </a>
+                    </DropdownMenu.Item>
+                {/each}
+
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item onclick={logOut}>
+                    <LogOut /> Logout
+                </DropdownMenu.Item>
+            </DropdownMenu.Group>
+        </DropdownMenu.Content>
+    </DropdownMenu.Root>
+    <AlertDialog.Root bind:open={isOpen}>
+        <AlertDialog.Content>
+            <AlertDialog.Header>
+                <AlertDialog.Title>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center gap-3">
+                            <Avatar.Root>
+                                <Avatar.Image
+                                    src={authUser.currentUser?.photoURL}
+                                    alt="Avatar"
+                                />
+                                <Avatar.Fallback>
+                                    {getInitials(
+                                        authUser.currentUser?.displayName,
+                                    )}
+                                </Avatar.Fallback>
+                            </Avatar.Root>
+                            <div class="grow">
+                                <span
+                                    class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
+                                >
+                                    {authUser.currentUser?.displayName}
+                                </span>
+                                <p class="text-xs text-foreground-500">
+                                    {authUser.currentUser?.email}
+                                </p>
+                            </div>
+                        </div>
+                        <Button onclick={logOut} variant="link">
+                            <LogOut />Logout
+                        </Button>
+                    </div>
+                </AlertDialog.Title>
+                <AlertDialog.Description>
+                    Manage your name, password and account settings.
+                </AlertDialog.Description>
+            </AlertDialog.Header>
+            <AlertDialog.Footer>
+                <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+                <AlertDialog.Action>Continue</AlertDialog.Action>
+            </AlertDialog.Footer>
+        </AlertDialog.Content>
+    </AlertDialog.Root>
+{:else}
+    <Button href="/login">Login</Button>
+{/if}

package/dist/auth/user-button.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { NavItem } from "../types/nav.js";
+declare const UserButton: import("svelte").Component<{
+    nav: NavItem[];
+}, {}, "">;
+export default UserButton;

package/dist/auth/user.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type User } from "firebase/auth";
+export declare class FirebaseAuthUser {
+    #private;
+    constructor();
+    get isAuthenticated(): boolean;
+    get isAnonymousUser(): boolean | undefined;
+    get userId(): string | undefined;
+    get currentUser(): User | null | undefined;
+}
+export declare const authUser: FirebaseAuthUser;

package/dist/auth/user.svelte.js

@@ -0,0 +1,21 @@
+import { getAuthInstance } from "../firebase.js";
+import { onAuthStateChanged } from "firebase/auth";
+export class FirebaseAuthUser {
+    #currentUser = $state();
+    constructor() {
+        onAuthStateChanged(getAuthInstance(), (user) => (this.#currentUser = user));
+    }
+    get isAuthenticated() {
+        return this.currentUser !== null;
+    }
+    get isAnonymousUser() {
+        return this.currentUser?.isAnonymous;
+    }
+    get userId() {
+        return this.currentUser?.uid;
+    }
+    get currentUser() {
+        return this.#currentUser;
+    }
+}
+export const authUser = new FirebaseAuthUser();

package/dist/auth.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Handles Google Sign-In.
+ */
+export declare function signInWithGoogle(): Promise<void>;
+/**
+ * Signs in with email and password.
+ */
+export declare function signInWithEmail(email: string, password: string): Promise<void>;
+/**
+ * Registers a new user and updates Firestore.
+ */
+export declare function registerWithEmail(email: string, password: string, displayName: string): Promise<void>;
+/**
+ * Signs out the user and redirects.
+ */
+export declare function logOut(): Promise<void>;
+/**
+ * Sends a password reset email.
+ */
+export declare function sendPasswordReset(email: string): Promise<void>;
+/**
+ * Verifies email for current user.
+ */
+export declare function sendEmailVerificationToUser(): Promise<void>;
+/**
+ * Updates user profile with display name and photo URL.
+ */
+export declare function updateUserProfile(profile: {
+    displayName?: string;
+    photoURL?: string;
+}): Promise<void>;
+/**
+ * Updates password for current user.
+ */
+export declare function updateUserPassword(newPassword: string): Promise<void>;
+/**
+ * Checks onboarding completion by verifying profile data.
+ */
+export declare function checkOnboardingCompletion(uid: string): Promise<void>;

package/dist/auth.js

@@ -0,0 +1,100 @@
+// firebaseAuthService.ts
+import { GoogleAuthProvider, sendPasswordResetEmail, signInWithEmailAndPassword, signInWithPopup, signOut, createUserWithEmailAndPassword, sendEmailVerification, updateProfile, updatePassword } from 'firebase/auth';
+import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { getAuthInstance, getDb } from './firebase.js';
+import { goto } from '$app/navigation';
+const auth = getAuthInstance();
+const firestore = getDb();
+/**
+ * Handles Google Sign-In.
+ */
+export async function signInWithGoogle() {
+    const provider = new GoogleAuthProvider();
+    const result = await signInWithPopup(auth, provider);
+    await updateUserInFirestore(result.user);
+}
+/**
+ * Signs in with email and password.
+ */
+export async function signInWithEmail(email, password) {
+    const result = await signInWithEmailAndPassword(auth, email, password);
+    await updateUserInFirestore(result.user);
+}
+/**
+ * Registers a new user and updates Firestore.
+ */
+export async function registerWithEmail(email, password, displayName) {
+    const result = await createUserWithEmailAndPassword(auth, email, password);
+    const user = result.user;
+    if (user) {
+        await updateProfile(user, { displayName });
+        await updateUserInFirestore(user);
+        await sendEmailVerification(user);
+    }
+}
+/**
+ * Updates Firestore with user data.
+ */
+async function updateUserInFirestore(user) {
+    const ref = doc(firestore, 'users', user.uid);
+    const userData = {
+        uid: user.uid,
+        email: user.email,
+        emailVerified: user.emailVerified,
+        displayName: user.displayName,
+        photoURL: user.photoURL,
+        isAnonymous: user.isAnonymous,
+        providerId: user.providerId,
+        phoneNumber: user.phoneNumber,
+        providerData: user.providerData
+    };
+    await setDoc(ref, userData, { merge: true });
+}
+/**
+ * Signs out the user and redirects.
+ */
+export async function logOut() {
+    await signOut(auth);
+    goto('/sign-in');
+}
+/**
+ * Sends a password reset email.
+ */
+export async function sendPasswordReset(email) {
+    await sendPasswordResetEmail(auth, email);
+}
+/**
+ * Verifies email for current user.
+ */
+export async function sendEmailVerificationToUser() {
+    if (auth.currentUser) {
+        await sendEmailVerification(auth.currentUser);
+    }
+}
+/**
+ * Updates user profile with display name and photo URL.
+ */
+export async function updateUserProfile(profile) {
+    if (auth.currentUser) {
+        await updateProfile(auth.currentUser, profile);
+        await updateUserInFirestore(auth.currentUser);
+    }
+}
+/**
+ * Updates password for current user.
+ */
+export async function updateUserPassword(newPassword) {
+    if (auth.currentUser) {
+        await updatePassword(auth.currentUser, newPassword);
+    }
+}
+/**
+ * Checks onboarding completion by verifying profile data.
+ */
+export async function checkOnboardingCompletion(uid) {
+    const profileDoc = await getDoc(doc(firestore, 'profiles', uid));
+    if (!profileDoc.exists() || !profileDoc.data()?.username) {
+        alert("Please complete onboarding");
+        goto('/onboarding');
+    }
+}

package/dist/components/auth/google-sign-in.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { signInWithGoogle } from "../../auth.js";
+	import Button from "../ui/button/button.svelte";
+	let { label = "Sign in" }: { label: string } = $props();
+</script>
+
+<Button onclick={signInWithGoogle} class="w-full gap-2" variant="outline">
+	<svg
+		class="h-4 w-4 flex-shrink-0"
+		width="33"
+		height="32"
+		viewBox="0 0 33 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<g clip-path="url(#clip0_4132_5805)">
+			<path
+				d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z"
+				fill="#4285F4"
+			/>
+			<path
+				d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z"
+				fill="#34A853"
+			/>
+			<path
+				d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z"
+				fill="#FBBC05"
+			/>
+			<path
+				d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z"
+				fill="#EB4335"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_4132_5805">
+				<rect
+					width="32"
+					height="32"
+					fill="white"
+					transform="translate(0.937439)"
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+	{label} with Google
+</Button>

package/dist/components/auth/google-sign-in.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const GoogleSignIn: import("svelte").Component<{
+    label: string;
+}, {}, "">;
+export default GoogleSignIn;

package/dist/components/auth/reset-password-form.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { sendPasswordReset } from "../../auth.js";
+	import * as Form from "../ui/form/index.js";
+	import { Input } from "../ui/input/index.js";
+	import {
+		resetPasswordSchema,
+	} from "../../schemas/reset-password.js";
+	import { toast } from "svelte-sonner";
+	import {
+		superForm,defaults
+	} from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { valibot } from 'sveltekit-superforms/adapters';
+
+const data = defaults(valibot(resetPasswordSchema));
+
+	const form = superForm(data, {
+		validators: valibot(resetPasswordSchema),
+		dataType: "json",
+		SPA: true,
+		resetForm: false,
+		clearOnSubmit: "errors-and-message",
+		async onUpdate({ form }) {
+			if (!form.valid) return;
+			try {
+				const { data } = form;
+				const { email } = data;
+				await sendPasswordReset(email);
+				toast.success("Password reset email sent");
+				goto("/sign-in");
+			} catch (error) {
+				if (error instanceof Error) {
+					toast.error(error.message);
+				} else {
+					toast.error("An error occurred");
+				}
+			}
+		},
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" use:enhance class="space-y-4">
+	<Form.Field {form} name="email">
+		<Form.Control >
+		{#snippet children({ props })}
+        	<Form.Label>Email address</Form.Label>
+        	<Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
+      	{/snippet}
+		
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+
+	<Form.Button class="w-full">Send Email</Form.Button>
+</form>

package/dist/components/auth/reset-password-form.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResetPasswordForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ResetPasswordForm = InstanceType<typeof ResetPasswordForm>;
+export default ResetPasswordForm;