@alepha/react 0.14.2 → 0.14.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@alepha/react",
   "description": "React components and hooks for building Alepha applications.",
   "author": "Nicolas Foures",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -25,14 +25,14 @@
     "@testing-library/react": "^16.3.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "alepha": "0.14.2",
+    "alepha": "0.14.3",
     "jsdom": "^27.4.0",
     "react": "^19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   },
   "peerDependencies": {
-    "alepha": "0.14.2",
+    "alepha": "0.14.3",
     "react": "^19"
   },
   "scripts": {

package/src/auth/__tests__/$auth.spec.ts

@@ -0,0 +1,188 @@
+import { randomUUID } from "node:crypto";
+import { Alepha } from "alepha";
+import { DateTimeProvider } from "alepha/datetime";
+import { $realm } from "alepha/security";
+import { HttpClient, ServerProvider } from "alepha/server";
+import { $client } from "alepha/server/links";
+import { AlephaServerSecurity } from "alepha/server/security";
+import { describe, test } from "vitest";
+import {
+  $auth,
+  alephaServerAuthRoutes,
+  type TokenResponse,
+  tokenResponseSchema,
+  tokensSchema
+} from "alepha/server/auth";
+import { ReactAuth, ReactAuthProvider } from "../index.ts";
+
+describe("$auth", () => {
+    const user = {
+      id: randomUUID(),
+      name: "John Doe",
+      username: "john",
+      password: "***",
+      roles: ["admin"],
+    };
+
+    class App {
+      realm = $realm({
+        secret: "my-secret-key",
+        roles: [
+          {
+            name: "admin",
+            permissions: [{ name: "*" }],
+          },
+        ],
+      });
+
+      auth = $auth({
+        realm: this.realm,
+        credentials: {
+          account: () => user,
+        },
+      });
+
+      api = $client<ReactAuthProvider>();
+    }
+
+    const userinfo = (alepha: Alepha, token?: string) =>
+      alepha
+        .inject(HttpClient)
+        .fetch(
+          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.userinfo}`,
+          {
+            method: "GET",
+            headers: {
+              authorization: `Bearer ${token}`,
+            },
+          },
+        )
+        .then((it) => it.data);
+
+    const login = (alepha: Alepha) =>
+      alepha
+        .inject(HttpClient)
+        .fetch(
+          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.token}?provider=auth`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              username: user.username,
+              password: user.password,
+            }),
+            schema: {
+              response: tokenResponseSchema,
+            },
+          },
+        );
+
+    const refresh = (alepha: Alepha, tokens: TokenResponse) =>
+      alepha
+        .inject(HttpClient)
+        .fetch(
+          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.refresh}?provider=auth`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              refresh_token: tokens.refresh_token!,
+              access_token: tokens.access_token,
+            }),
+            schema: {
+              response: tokensSchema,
+            },
+          },
+        );
+
+    test("should login with credentials", async ({ expect }) => {
+      const alepha = Alepha.create().with(App).with(AlephaServerSecurity);
+      const auth = alepha.inject(ReactAuth);
+      await alepha.start();
+
+      expect(auth.user).toBeUndefined();
+      await auth.login("auth", {
+        username: user.username,
+        password: user.password,
+        hostname: alepha.inject(ServerProvider).hostname,
+      });
+      expect(auth.user).toEqual({
+        id: user.id,
+        name: user.name,
+        roles: user.roles,
+        username: user.username,
+      });
+    });
+
+    test("should get userinfo", async ({ expect }) => {
+      const alepha = Alepha.create().with(App).with(AlephaServerSecurity);
+      await alepha.start();
+
+      const { data: tokens } = await login(alepha);
+
+      expect(await userinfo(alepha, tokens.access_token)).toEqual({
+        user: {
+          id: user.id,
+          name: user.name,
+          roles: user.roles,
+          username: user.username,
+          sessionId: expect.any(String),
+        },
+        api: {
+          prefix: "/api",
+          links: [],
+        },
+      });
+    });
+
+    test("should reject expired token", async ({ expect }) => {
+      const alepha = Alepha.create().with(App);
+      await alepha.start();
+
+      const { data: tokens } = await login(alepha);
+
+      await alepha.inject(DateTimeProvider).travel(1, "hour");
+
+      expect(await userinfo(alepha, tokens.access_token)).toEqual({
+        api: {
+          prefix: "/api",
+          links: [],
+        },
+      });
+    });
+
+    test("should refresh expired token", async ({ expect }) => {
+      const alepha = Alepha.create().with(App);
+      await alepha.start();
+
+      const { data: tokens } = await login(alepha);
+
+      await alepha.inject(DateTimeProvider).travel(1, "hour");
+
+      const { data: tokens2 } = await refresh(alepha, tokens);
+
+      expect(await userinfo(alepha, tokens2.access_token)).toEqual({
+        user: {
+          id: user.id,
+          name: user.name,
+          roles: user.roles,
+          username: user.username,
+        },
+        api: {
+          prefix: "/api",
+          links: [],
+        },
+      });
+    });
+
+    test("should reject expired refresh token", async ({ expect }) => {
+      const alepha = Alepha.create().with(App);
+      await alepha.start();
+
+      const { data: tokens } = await login(alepha);
+
+      await alepha.inject(DateTimeProvider).travel(40, "days");
+
+      await expect(refresh(alepha, tokens)).rejects.toThrowError(
+        "Failed to refresh access token using the refresh token (realm)",
+      );
+    });
+});

package/src/core/__tests__/Router.spec.tsx

@@ -0,0 +1,169 @@
+import { Alepha, t } from "alepha";
+import { renderToString } from "react-dom/server";
+import { test } from "vitest";
+import { NestedView } from "../../router/index.ts";
+import { ReactBrowserRouterProvider } from "../../router/providers/ReactBrowserRouterProvider.ts";
+
+const setup = () => {
+  const alepha = Alepha.create();
+  const router = alepha.inject(ReactBrowserRouterProvider);
+
+  const render = async (path: string): Promise<string> => {
+    await router.transition(new URL(`http://localhost${path}`));
+    const state = alepha.store.get("alepha.react.router.state");
+    if (!state) {
+      throw new Error(
+        "Router state not found. Ensure the router is properly configured.",
+      );
+    }
+    const element = router.root(state);
+    return renderToString(element).replaceAll("<!-- -->", "");
+  };
+
+  return {
+    router,
+    render,
+    alepha,
+  };
+};
+
+test("Router - Basic", async ({ expect }) => {
+  const { router, render, alepha } = setup();
+
+  router.add({
+    name: "Test",
+    path: "/",
+    component: () => "Hey",
+  });
+
+  router.add({
+    name: "NotFound",
+    path: "/*",
+    component: () => "Not Found",
+  });
+
+  await alepha.start();
+
+  expect(await render("/")).toEqual("Hey");
+  expect(await render("/zz")).toEqual("Not Found");
+});
+
+test("Router - NestedView", async ({ expect }) => {
+  const { router, render, alepha } = setup();
+
+  router.add({
+    name: "Test",
+    component: () => (
+      <>
+        ((
+        <NestedView />
+        ))
+      </>
+    ),
+    children: [
+      {
+        name: "Home",
+        path: "/",
+        component: () => "Home",
+      },
+      {
+        name: "Hello",
+        path: "/hello/:name",
+        schema: {
+          params: t.object({
+            name: t.text(),
+          }),
+        },
+        resolve: ({ params }) => params,
+        component: (props) => `Hello, ${props.name}!`,
+      },
+    ],
+  });
+
+  await alepha.start();
+
+  expect(await render("/")).toEqual("((Home))");
+  expect(await render("/hello/jack")).toEqual("((Hello, jack!))");
+});
+
+test("Router - All routes", async ({ expect }) => {
+  const { router, render, alepha } = setup();
+
+  router.add({
+    children: [
+      {
+        path: "/*",
+        component: () => "404",
+      },
+      {
+        component: () => "home",
+      },
+      {
+        path: "about",
+        component: () => "about",
+      },
+      {
+        path: "sub",
+        children: [
+          {
+            component: () => "a",
+          },
+          {
+            path: "b",
+            component: () => "b",
+          },
+        ],
+      },
+      {
+        path: "users",
+        component: () => <NestedView>yo</NestedView>,
+        children: [
+          {
+            path: "new",
+            component: () => "users/new",
+          },
+          {
+            path: ":id",
+            schema: { params: t.object({ id: t.text() }) },
+            resolve: ({ params }) => {
+              if (params.id === "boom") throw new Error("boom");
+              return params;
+            },
+            children: [
+              {
+                resolve: ({ params }) => params,
+                component: ({ id }) => `hey ${id}`,
+              },
+              {
+                path: "profile",
+                resolve: ({ params }) => params,
+                component: ({ id }) => `profile of ${id}`,
+              },
+            ],
+          },
+        ],
+        errorHandler: (error) => {
+          return `Error: ${error.message}`;
+        },
+      },
+    ],
+  });
+
+  await alepha.start();
+
+  expect(await render("/")).toEqual("home");
+  expect(await render("/about")).toEqual("about");
+  expect(await render("/noop")).toEqual("404");
+  expect(await render("/noop/noop")).toEqual("404");
+  expect(await render("/sub")).toEqual("a");
+  expect(await render("/sub/")).toEqual("a");
+  expect(await render("/sub/b")).toEqual("b");
+  expect(await render("/sub/noop")).toEqual("404");
+  expect(await render("/users")).toEqual("yo");
+  expect(await render("/users/")).toEqual("yo");
+  expect(await render("/users/a")).toEqual("hey a");
+  expect(await render("/users/boom")).toEqual("Error: boom");
+  expect(await render("/users/new")).toEqual("users/new");
+  expect(await render("/users/hey/ho")).toEqual("404");
+  expect(await render("/users/a/profile")).toEqual("profile of a");
+});