@lobb-js/lobb-ext-auth 0.1.58

package/studio/src/onStartup.ts

@@ -0,0 +1,25 @@
+import type { ExtensionUtils } from "../extension.types";
+import { Auth } from "./auth";
+
+export async function onStartup(utils: ExtensionUtils) {
+    // logout if we got an Unauthorized response
+    const auth = new Auth(utils);
+    utils.lobb.onResponse(async (response) => {
+        if (response.status === 401) {
+            const body = await response.json();
+            if (
+                body.message === "JWT token has expired" ||
+                body.message === "Invalid JWT token"
+            ) {
+                auth.logout();
+            }
+        }
+    });
+    const session = auth.getSession();
+    // if user is logged in
+    if (session) {
+        utils.ctx.extensions.auth.session = session;
+        return;
+    }
+    await auth.logout()
+}

package/studio/src/pages/loginPage/index.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { ExtensionProps } from "src/extensions/extension.types";
+    import { Auth } from "../../auth";
+
+    const { utils }: ExtensionProps = $props();
+
+    let formData = {
+        email:
+            window.location.hostname === "demo.lobb.app"
+                ? "admin@example.com"
+                : "",
+        password: window.location.hostname === "demo.lobb.app" ? "admin" : "",
+    };
+
+    async function handleOnSubmit(e: Event) {
+        e.preventDefault();
+        if (!formData.email && !formData.password) {
+            utils.toast.error("Please complete all fields");
+            return;
+        }
+
+        const auth = new Auth(utils);
+        await auth.login(formData);
+    }
+</script>
+
+<div
+    class="fixed left-0 top-0 flex h-screen w-screen items-center justify-center bg-muted"
+>
+    <div class="flex w-full max-w-[25rem] flex-col gap-6 p-6">
+        <div>
+            <div class="text-4xl">Welcome back</div>
+            <div>Sign in to your account</div>
+        </div>
+        <form
+            class="flex flex-col gap-6 rounded-md border bg-white p-6"
+            onsubmit={handleOnSubmit}
+        >
+            <div class="flex flex-col gap-2">
+                <div>
+                    <div class="mb-1 text-sm font-medium">Email</div>
+                    <utils.components.Input
+                        bind:value={formData.email}
+                        autocomplete="email"
+                        placeholder="email@example.com"
+                    />
+                </div>
+                <div>
+                    <div class="mb-1 text-sm font-medium">Password</div>
+                    <utils.components.Input
+                        bind:value={formData.password}
+                        type="password"
+                        autocomplete="current-password"
+                        placeholder="••••••••"
+                    />
+                </div>
+            </div>
+            <utils.components.Button type="submit">
+                Sign In
+            </utils.components.Button>
+            <div class="text-sm underline">Forgot Password?</div>
+        </form>
+    </div>
+</div>

package/studio/src/pages/settings/index.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+    import Users from "./pages/users.svelte";
+    import RolesAndPermissions from "./pages/rolesAndPermissions.svelte";
+    import ActivityFeed from "./pages/activityFeed.svelte";
+
+	const props: ExtensionProps = $props();
+	const components = props.utils.components;
+	const { Sidebar } = components;
+	const { Icons } = components;
+	const auth_settings_page = $derived(props.utils.location.url.pathname.split("/")[4]);
+	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
+</script>
+
+<!-- TODO: add the sidebar in here to add these pages
+	- users
+	- roles and permissions
+	- invitation page
+	- activity feed
+-->
+
+<Sidebar
+	title="Auth settings"
+	showSearch={false}
+	isSelected={(element) => {
+		const element_page = element.href?.split("/")[4];
+		return element_page === auth_settings_page;
+	}}
+	data={[
+		{
+			name: "Users",
+			href: "/extensions/auth/settings/users",
+			icon: Icons.Users
+		},
+		{
+			name: "roles and permissions",
+			href: "/extensions/auth/settings/roles_and_permissions",
+			icon: Icons.ShieldUser
+		},
+		{
+			name: "activity feed",
+			href: "/extensions/auth/settings/activity_feed",
+			icon: Icons.ClipboardList
+		},
+	]} >
+	{#if auth_settings_page === 'users'}
+		<Users {...props} />
+	{:else if auth_settings_page === 'roles_and_permissions'}
+		<RolesAndPermissions {...props} />
+	{:else if auth_settings_page === 'activity_feed'}
+		<ActivityFeed {...props} />
+	{/if}
+</Sidebar>

package/studio/src/pages/settings/pages/activityFeed.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Activity Feed</div>
+		<div class="text-sm text-muted-foreground">
+			Monitor your users Activity Feed.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-soft">
+        <components.DataTable
+            collectionName="auth_activity_feed"
+        />
+	</div>
+</div>

package/studio/src/pages/settings/pages/rolesAndPermissions.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Roles and Permissions</div>
+		<div class="text-sm text-muted-foreground">
+			Manage the Roles and Permissions of the system.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-soft">
+        <components.DataTable
+            collectionName="auth_roles"
+        />
+	</div>
+</div>

package/studio/src/pages/settings/pages/users.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Users</div>
+		<div class="text-sm text-muted-foreground">
+			Manage the users of the system.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-soft">
+        <components.DataTable
+            collectionName="auth_users"
+        />
+	</div>
+</div>

package/studio/src/pages/userSettings/components/account.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+	import { onMount } from "svelte";
+
+	const { utils }: ExtensionProps = $props();
+
+	let user = $state({
+		old_password: "",
+		new_password: "",
+	});
+	const icons = utils.components.Icons;
+
+	// @ts-ignore: Im sure the session object exist
+	const currentUserId = utils.ctx.extensions.auth.session.user.id;
+	let loaded = $state(false);
+	onMount(async () => {
+		const response = await utils.lobb.findOne("auth_users", currentUserId);
+		const result = await response.json();
+		user = result.data;
+		loaded = true;
+	});
+
+	async function onUpdateCLick() {
+		if (!user.new_password) {
+			utils.toast.error("Make sure you fill the new password");
+			return;
+		} else if (!user.old_password) {
+			utils.toast.error("Make sure you fill the old password");
+			return;
+		}
+
+		const result = await utils.lobb.request({
+			method: "POST",
+			route: "/api/extensions/auth/change_password",
+			payload: {
+				old_password: user.old_password,
+				new_password: user.new_password,
+			},
+		});
+
+		if (result.status >= 400) {
+			return;
+		}
+
+		utils.toast.success("Account updated successfully.");
+	}
+</script>
+
+{#if loaded}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-4 overflow-y-visible">
+		<div>
+			<div class="text-lg font-semibold">Account</div>
+			<div class="text-sm text-muted-foreground">
+				Update your account settings.
+			</div>
+		</div>
+		<utils.components.Separator />
+		<!-- TODO: add prefered language here too -->
+		<div class="flex flex-col gap-2">
+			<div class="text-sm">Change Password</div>
+			<div class="flex gap-4">
+				<utils.components.Input
+					bind:value={user.old_password}
+					placeholder="Old password"
+					type="password"
+				/>
+				<utils.components.Input
+					bind:value={user.new_password}
+					placeholder="New password"
+					type="password"
+				/>
+			</div>
+			<div class="text-xs text-muted-foreground">
+				This is where you can change your password.
+			</div>
+		</div>
+		<utils.components.Button
+			class="self-start"
+			onclick={onUpdateCLick}
+			Icon={icons.Pencil}
+		>
+			Update Account
+		</utils.components.Button>
+	</div>
+{:else}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-8 overflow-y-visible">
+		<div class="grid gap-2">
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<utils.components.Separator />
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<div class="flex gap-4">
+				<utils.components.Skeleton class="h-8 w-full max-w-60" />
+				<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			</div>
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+	</div>
+{/if}

package/studio/src/pages/userSettings/components/profile.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+	import { onMount } from "svelte";
+
+	const { utils }: ExtensionProps = $props();
+
+	let user = $state({
+		name: "",
+	});
+	const icons = utils.components.Icons;
+
+	// @ts-ignore: Im sure the session object exist
+	const currentUserId = utils.ctx.extensions.auth.session.user.id;
+	let loaded = $state(false);
+	onMount(async () => {
+		const response = await utils.lobb.findOne("auth_users", currentUserId);
+		const result = await response.json();
+		user = result.data;
+		loaded = true;
+	});
+
+	async function onUpdateCLick() {
+		// TODO: add the logic of updating some of the current user's information
+		const updateObject: any = {};
+		updateObject["name"] = user.name;
+		const response = await utils.lobb.updateOne(
+			"auth_users",
+			currentUserId,
+			updateObject,
+		);
+		if (response.status >= 400) {
+			const result = await response.json();
+			utils.toast.error(result.message);
+			return;
+		}
+		utils.toast.success("Profile updated successfully.");
+	}
+</script>
+
+{#if loaded}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-4 overflow-y-visible">
+		<div>
+			<div class="text-lg font-semibold">Profile</div>
+			<div class="text-sm text-muted-foreground">
+				Edit information that others will see.
+			</div>
+		</div>
+		<utils.components.Separator />
+		<!-- TODO: you should add name and other stuff like phone number and stuff like that -->
+		<div class="flex flex-col gap-2">
+			<div class="text-sm">Full Name</div>
+			<utils.components.Input
+				placeholder="Full Name"
+				bind:value={user.name}
+			/>
+			<div class="text-xs text-muted-foreground">
+				This is your public display name. It can be your real name or a
+				pseudonym.
+			</div>
+		</div>
+		<utils.components.Button
+			class="self-start"
+			onclick={onUpdateCLick}
+			Icon={icons.Pencil}
+		>
+			Update Profile
+		</utils.components.Button>
+	</div>
+{:else}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-8 overflow-y-visible">
+		<div class="grid gap-2">
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<utils.components.Separator />
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+	</div>
+{/if}

package/studio/src/pages/userSettings/index.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { ExtensionProps } from "src/extensions/extension.types";
+	import Profile from "./components/profile.svelte";
+	import Account from "./components/account.svelte";
+
+	const props: ExtensionProps = $props();
+	const components = props.utils.components;
+	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
+
+	let selectedView: "profile" | "account" = $state("profile");
+</script>
+
+<div class="flex flex-col gap-4 p-4">
+	<div>
+		<div class="text-xl font-bold">User Settings</div>
+		<div class="text-sm text-muted-foreground">
+			Manage your user settings.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 {isSmall ? "flex-col" : ""}">
+		<div class="flex w-64 {isSmall ? "" : "flex-col"}">
+			<components.Button
+				onclick={() => (selectedView = "profile")}
+				variant="ghost"
+				class="flex justify-start text-muted-foreground hover:underline"
+			>
+				Profile
+			</components.Button>
+			<components.Button
+				onclick={() => (selectedView = "account")}
+				variant="ghost"
+				class="flex justify-start text-muted-foreground hover:underline"
+			>
+				Account
+			</components.Button>
+		</div>
+		{#if selectedView === "profile"}
+			<Profile {...props} />
+		{:else if selectedView === "account"}
+			<Account {...props} />
+		{:else}
+			<div class="font-bold text-red-500">
+				The "{selectedView}" view doesnt exist
+			</div>
+		{/if}
+	</div>
+</div>

package/studio/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

package/studio/tailwind.config.ts

@@ -0,0 +1,93 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    // TODO: this part should be removed .. it doesnt make sense
+    "../../../packages/studio/src/**/*.{html,js,svelte,ts}",
+  ],
+  safelist: ["dark"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+        },
+        soft: {
+          DEFAULT: "hsl(var(--soft) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+        },
+      },
+      borderRadius: {
+        xl: "calc(var(--radius) + 4px)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: [...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--bits-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--bits-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};
+
+export default config;

package/studio/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "types": ["svelte", "vite/client"],
+    "noEmit": true,
+    "allowArbitraryExtensions": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/studio/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/studio/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/studio/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  resolve: {
+    alias: {
+      // TODO: remove this. this prevents this app from being portable
+      $lib: path.resolve("../../../packages/studio/src/lib"),
+    },
+  },
+});

package/todo.md

@@ -0,0 +1,37 @@
+# high priority
+
+- remove the `dashboard_access_roles` and just put it in the specific role in the `roles` property
+- currently we have the payloadGuard. you can later implement the `recordGuard`
+  for `update` and `delete`
+- implement rotating refresh token mechanism
+- you can implement the firebase adapter and get all other adapters
+- check `https://passkeys.dev/`. the new standart to abandon passwords
+- prevent any one from creating a user with the admin role
+
+# low priority
+
+- add basic authentication in lobb. or at least make something like it. where
+  you have a users.json file and those will be the users without creating a
+  users or anything like that. its much simpler for simpler usage
+- the collection_name property in the refresh_token property default value in
+  the schema doent work. its similar to the issue of the auth collection name.
+  although Im adding a default value to that property. but its value is
+  undefined for some reason. investigate it
+- remove keep only the user id in the payload of the access and refresh tokens
+- rotational refresh tokens where the refresh token is changes every time its
+  used to refresh an access token
+- prepare the views directory for extensions in a better way. now there is a way
+  to view all component you have in an isolated manner. and when you run
+  `npm run build` it will generate a js compiled version of the svelte
+  component.
+- for now you need to import the main css file in all of the components in order
+  for tailwind stuff to be indluded in the main style.css. but in the future you
+  should import all component in an index file and include the main css there
+  and force vite to create seperate chunks for each imported svelte compoenent
+  there. so that you dont get one bundle because you need them seperated
+- change the views from svelte files into directories that holds index.svelte
+  files. (this is better because maybe in the future you want to modularize or
+  split your code or have other files. so they will all be organized inside that
+  directory and you dont need to have a svelte file and then have a directory
+  with the same name of that file to hold all the imports of that svelte file.
+  its better to have them all stored in one directory)