@lobb-js/lobb-ext-auth 0.11.0 → 0.11.2

package/extensions/auth/studio/index.ts

@@ -4,6 +4,8 @@ import { onStartup, onRouteChange } from "./onStartup";
 import LoginPage from "./lib/components/pages/loginPage/index.svelte";
 import UserSettings from "./lib/components/pages/userSettings/index.svelte";
 import Settings from "./lib/components/pages/settings/index.svelte";
+import { isActionAllowed } from "./shared/permissions";
+import type { CollectionPermissionActionsKeys } from "../config/extensionConfigSchema";
 
 // TODO we should export the extension object directly without a function at all. because we dont set configuration in here
 export default function extension(utils: ExtensionUtils): Extension {
@@ -16,12 +18,52 @@ export default function extension(utils: ExtensionUtils): Extension {
       "pages.user_settings": UserSettings,
       "pages.settings": Settings,
     },
+    workflows: [
+      {
+        // Generic auth primitive: callers ask "can the current user access X?"
+        // and pass any combination of { collection, action, role }. The handler
+        // returns a boolean directly; callers read that and decide what to render.
+        // Note: returning a boolean means downstream handlers can't read the
+        // original request — if you ever need multiple extensions to influence
+        // this decision, switch back to a `{ ...input, allowed }` object shape.
+        eventName: "auth.canAccess",
+        handler: async (input) => {
+          // Admin shortcut — admins bypass everything, regardless of how
+          // their permissions snapshot was populated.
+          const user = utils.ctx.extensions.auth?.user;
+          if (user?.role === "admin") return true;
+
+          // Walk the permissions snapshot. Works for both logged-in non-admin
+          // users (snapshot from their role) and share-token recipients
+          // (snapshot from the share's embedded permissions). If nothing
+          // is populated — anonymous viewer — default to deny.
+          const permissions = utils.ctx.extensions.auth?.permissions;
+          if (permissions === undefined || permissions === null) return false;
+          if (permissions === true) return true;
+
+          const action: CollectionPermissionActionsKeys = input.action ?? "read";
+
+          const requiredCollections = Array.isArray(input.collection)
+            ? input.collection
+            : input.collection ? [input.collection] : [];
+
+          for (const collectionName of requiredCollections) {
+            if (!isActionAllowed(collectionName, action, permissions)) {
+              return false;
+            }
+          }
+
+          return true;
+        },
+      },
+    ],
     dashboardNavs: {
       middle: [
         {
           label: "Auth",
           icon: utils.components.Icons.Key,
           href: "/studio/extensions/auth/settings/users",
+          represents: "auth_users",
         },
       ],
       bottom: [
@@ -29,14 +71,14 @@ export default function extension(utils: ExtensionUtils): Extension {
           label: "My User",
           icon: utils.components.Icons.User,
           onclick: () => {
-            utils.location.navigate("/studio/extensions/auth/user_settings");
+            utils.goto("/studio/extensions/auth/user_settings");
           },
           navs: [
             {
               label: "User Settings",
               icon: utils.components.Icons.Settings,
               onclick: () => {
-                utils.location.navigate("/studio/extensions/auth/user_settings");
+                utils.goto("/studio/extensions/auth/user_settings");
               },
             },
             {

package/extensions/auth/studio/lib/components/pages/settings/index.svelte

@@ -8,7 +8,7 @@
 	const components = props.utils.components;
 	const { Sidebar } = components;
 	const { Icons } = components;
-	const auth_settings_page = $derived(props.utils.location.url.pathname.split("/")[5]);
+	const auth_settings_page = $derived(props.utils.page.url.pathname.split("/")[5]);
 	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
 </script>
 

package/extensions/auth/studio/lib/components/pages/settings/pages/activityFeed.svelte

@@ -13,7 +13,7 @@
 		</div>
 	</div>
 	<components.Separator />
-	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted-soft">
         <components.DataTable
             collectionName="auth_activity_feed"
         />

package/extensions/auth/studio/lib/components/pages/settings/pages/rolesAndPermissions.svelte

@@ -13,7 +13,7 @@
 		</div>
 	</div>
 	<components.Separator />
-	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted-soft">
         <components.DataTable
             collectionName="auth_roles"
         />

package/extensions/auth/studio/lib/components/pages/settings/pages/users.svelte

@@ -13,7 +13,7 @@
 		</div>
 	</div>
 	<components.Separator />
-	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted-soft">
         <components.DataTable
             collectionName="auth_users"
         />

package/extensions/auth/studio/lib/components/pages/userSettings/index.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
-	import Profile from "./components/profile.svelte";
-	import Account from "./components/account.svelte";
+	import { DetailView } from "@lobb-js/studio";
+	import { onMount } from "svelte";
 
-	const props: ExtensionProps = $props();
-	const components = props.utils.components;
-	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
+	const { utils }: ExtensionProps = $props();
+	const { Button, Separator, Skeleton, Icons } = utils.components;
 
-	let selectedView: "profile" | "account" = $state("profile");
+	let entry = $state<Record<string, any>>({});
+	let loading = $state(true);
+
+	onMount(async () => {
+		// /me is the only auth_users path a role without explicit auth_users
+		// read perms can reach (self-bypass at the policy layer).
+		const response = await utils.lobb.findOne("auth_users", "me");
+		const result = await response.json();
+		entry = result.data;
+		loading = false;
+	});
+
+	async function handleSave() {
+		const response = await utils.lobb.updateOne("auth_users", "me", entry);
+		if (response.status >= 400) {
+			const result = await response.json();
+			utils.toast.error(result.message);
+			return;
+		}
+		utils.toast.success("Profile updated successfully.");
+	}
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -17,32 +36,26 @@
 			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>
+	<Separator />
+
+	{#if loading}
+		<div class="flex max-w-xl flex-col gap-2">
+			<Skeleton class="h-8 w-full" />
+			<Skeleton class="h-8 w-[80%]" />
+			<Skeleton class="h-8 w-[60%]" />
 		</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
+	{:else}
+		<div class="max-w-xl">
+			<DetailView collectionName="auth_users" bind:entry />
+			<div class="px-4 pt-2">
+				<Button
+					class="self-start"
+					Icon={Icons.Pencil}
+					onclick={handleSave}
+				>
+					Save
+				</Button>
 			</div>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>

package/extensions/auth/studio/onStartup.ts

@@ -2,9 +2,16 @@ import type { ExtensionUtils } from "@lobb-js/studio";
 import { Auth } from "./auth";
 
 const loginPath = "/studio/extensions/auth/login_page";
+const publicPagesPrefix = "/studio/public/";
 
 function isPublicPath(path: string, publicPaths: string[]) {
-    return path === loginPath || publicPaths.some(p => path.startsWith(p));
+    // Anything under /studio/public/ is a publicPages.* route — registered by
+    // an extension and intentionally exposed without auth (e.g. share-recipient
+    // views). Falls through to the app-level publicPaths config for legacy
+    // overrides.
+    if (path === loginPath) return true;
+    if (path.startsWith(publicPagesPrefix)) return true;
+    return publicPaths.some(p => path.startsWith(p));
 }
 
 export async function onStartup(utils: ExtensionUtils) {
@@ -26,6 +33,11 @@ export async function onStartup(utils: ExtensionUtils) {
     const session = auth.getSession();
     if (session) {
         utils.ctx.extensions.auth.session = session;
+        try {
+            await auth.fetchMe();
+        } catch {
+            await auth.logout();
+        }
         return;
     }
 
@@ -43,6 +55,6 @@ export function onRouteChange(utils: ExtensionUtils, path: string) {
 
     const publicPaths: string[] = utils.ctx.meta?.extensions?.auth?.studio?.publicPaths ?? [];
     if (!isPublicPath(path, publicPaths)) {
-        utils.location.navigate(`${loginPath}?redirect=${encodeURIComponent(path)}`);
+        utils.goto(`${loginPath}?redirect=${encodeURIComponent(path)}`);
     }
 }

package/extensions/auth/studio/shared/permissions.ts

@@ -0,0 +1,42 @@
+// Lives under studio/ for packaging reasons — `svelte-package` only bundles
+// files inside its `--input` root, so anything the studio entry imports has
+// to be reachable from there. The backend imports this same file via
+// `../studio/shared/permissions` so there's still one source of truth.
+//
+// Anything in this folder must stay environment-neutral (no DOM, no Node-only
+// APIs, no top-level side effects) so it runs the same way on both sides.
+
+import type {
+  CollectionPermissionActionsKeys,
+  PermissionsConfig,
+} from "../../config/extensionConfigSchema.ts";
+
+// Pure permission check shared by the server-side handlePolicy and the
+// studio's auth.canAccess workflow. Walks the permissions tree and returns
+// a yes/no — server-side then layers on guards/filters/error-throwing,
+// client-side uses the answer to decide whether to render UI.
+//
+// An object value for action permission means "conditional access" (filter
+// and/or fields restrictions). For UI gating that counts as allowed; the
+// server enforces the actual restrictions on real requests.
+export function isActionAllowed(
+  collection: string,
+  action: CollectionPermissionActionsKeys,
+  permissions: PermissionsConfig | undefined,
+): boolean {
+  if (permissions === true) return true;
+  if (!permissions) return false;
+  const collPerm = permissions[collection];
+  if (collPerm === true) return true;
+  if (!collPerm) return false;
+  const actionPerm = collPerm[action];
+  if (actionPerm === true) return true;
+  // A conditional grant must actually list at least one constraint
+  // (filter / fields / payloadGuard / mutate). Empty `{}` collapses back
+  // to "no grant" — explicit `true` is required for unconditional access.
+  return (
+    typeof actionPerm === "object" &&
+    actionPerm !== null &&
+    Object.keys(actionPerm).length > 0
+  );
+}