acinguiux-dnr-utils 0.0.1

package/src/ms-graph/README.md

@@ -0,0 +1,47 @@
+# ms-graph setup guide
+
+## 1. Add environment variables
+
+Add the following variables to your `.env` file:
+
+```env
+MS_GRAPH_CLIENT_ID=
+MS_GRAPH_CLIENT_SECRET=
+MS_GRAPH_TENANT_ID=
+```
+
+## 2. Create the API route
+
+In your Next.js app, create the following file `/api/[email]/photo/route.ts` with this content:
+
+```ts
+export { GET_USER_PHOTO as GET } from 'acinguiux-dnr-utils/ms-graph';
+```
+
+## 3. Use the photo in your app
+
+You can now use `/api/${email}/photo` as the image source.
+
+### 3.1. SDS Avatar component
+
+```diff
+<Avatar
+  label="John Doe"
+  abbreviation="JD"
++  src="/api/john.doe@shell.com/photo"
+/>
+```
+
+If the user has a photo in Azure AD, it will display the image. If no photo exists, it will fall back to showing the abbreviation (e.g. “JD”).
+
+### 3.2. Layout component
+
+To display the currently logged-in user's photo in the `NavBar` when using the `Layout` component from `geneva-component`, simply add the `userPhotoSrc` prop:
+
+```diff
+<Layout
+   items={navItems}
+   user={session?.user}
++  userPhotoSrc={`/api/${session?.user?.email}/photo`}
+ >
+```

package/src/ms-graph/get-graph-token.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { getGraphToken } from "./get-graph-token";
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Store original environment variables
+const originalEnv = { ...process.env };
+
+describe("getGraphToken", () => {
+  beforeEach(() => {
+    // Setup environment variables
+    process.env.MS_GRAPH_CLIENT_ID = "test-client-id";
+    process.env.MS_GRAPH_CLIENT_SECRET = "test-client-secret";
+    process.env.MS_GRAPH_TENANT_ID = "test-tenant-id";
+
+    // Clear mocks between tests
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    // Restore original environment variables
+    process.env = { ...originalEnv };
+  });
+
+  it("should fetch a new token if cache is empty", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          access_token: "new-access-token",
+          expires_in: 3600,
+        }),
+    });
+
+    const token = await getGraphToken();
+
+    expect(token).toBe("new-access-token");
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(mockFetch).toHaveBeenCalledWith(
+      `https://login.microsoftonline.com/test-tenant-id/oauth2/v2.0/token`,
+      expect.objectContaining({
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: expect.any(String),
+      }),
+    );
+  });
+
+  it("should throw an error if fetch fails", async () => {
+    mockFetch.mockResolvedValueOnce({ ok: false });
+
+    await expect(getGraphToken()).rejects.toThrow("Unable to obtain Graph token");
+  });
+
+  it("should throw error when MS_GRAPH_TENANT_ID is not set", async () => {
+    delete process.env.MS_GRAPH_TENANT_ID;
+
+    await expect(getGraphToken()).rejects.toThrow(
+      "MS_GRAPH_TENANT_ID environment variable is not set",
+    );
+  });
+
+  it("should throw error when MS_GRAPH_CLIENT_ID is not set", async () => {
+    delete process.env.MS_GRAPH_CLIENT_ID;
+
+    await expect(getGraphToken()).rejects.toThrow(
+      "MS_GRAPH_CLIENT_ID environment variable is not set",
+    );
+  });
+
+  it("should throw error when MS_GRAPH_CLIENT_SECRET is not set", async () => {
+    delete process.env.MS_GRAPH_CLIENT_SECRET;
+
+    await expect(getGraphToken()).rejects.toThrow(
+      "MS_GRAPH_CLIENT_SECRET environment variable is not set",
+    );
+  });
+
+  it("should use correct body parameters in fetch request", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ access_token: "token" }),
+    });
+
+    await getGraphToken();
+
+    const callArgs = mockFetch.mock.calls[0];
+    const body = callArgs[1].body as string;
+    const params = new URLSearchParams(body);
+
+    expect(params.get("grant_type")).toBe("client_credentials");
+    expect(params.get("client_id")).toBe("test-client-id");
+    expect(params.get("client_secret")).toBe("test-client-secret");
+    expect(params.get("scope")).toBe("https://graph.microsoft.com/.default");
+  });
+
+  it("should set cache and next revalidate options", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ access_token: "token" }),
+    });
+
+    await getGraphToken();
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        cache: "force-cache",
+        next: { revalidate: 3540 }, // 3600 - 60 seconds
+      }),
+    );
+  });
+});

package/src/ms-graph/get-graph-token.ts

@@ -0,0 +1,41 @@
+const TOKEN_EXPIRATION_TIME = 3600 - 60; // 1 hour minus 1 minute to make sure we always have a valid token
+
+export async function getGraphToken(): Promise<string> {
+  if (!process.env.MS_GRAPH_TENANT_ID) {
+    throw new Error("MS_GRAPH_TENANT_ID environment variable is not set");
+  }
+
+  if (!process.env.MS_GRAPH_CLIENT_ID) {
+    throw new Error("MS_GRAPH_CLIENT_ID environment variable is not set");
+  }
+
+  if (!process.env.MS_GRAPH_CLIENT_SECRET) {
+    throw new Error("MS_GRAPH_CLIENT_SECRET environment variable is not set");
+  }
+
+  const params = new URLSearchParams();
+  params.append("grant_type", "client_credentials");
+  params.append("client_id", process.env.MS_GRAPH_CLIENT_ID);
+  params.append("client_secret", process.env.MS_GRAPH_CLIENT_SECRET);
+  params.append("scope", "https://graph.microsoft.com/.default");
+  const body = params.toString();
+
+  const res = await fetch(
+    `https://login.microsoftonline.com/${process.env.MS_GRAPH_TENANT_ID}/oauth2/v2.0/token`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body,
+      cache: "force-cache",
+      next: { revalidate: TOKEN_EXPIRATION_TIME },
+    },
+  );
+
+  if (!res.ok) {
+    throw new Error("Unable to obtain Graph token");
+  }
+
+  const json = await res.json();
+
+  return json.access_token;
+}

package/src/ms-graph/index.ts

@@ -0,0 +1 @@
+export { GET as GET_USER_PHOTO } from "./user-photo";

package/src/ms-graph/user-photo.test.ts

@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getGraphToken } from "./get-graph-token";
+import { GET } from "./user-photo";
+
+// Mock dependencies
+vi.mock("./get-graph-token", () => ({
+  getGraphToken: vi.fn(),
+}));
+
+describe("Avatar GET function", () => {
+  const mockEmail = "test@example.com";
+  const mockToken = "mock-token";
+  const mockRequest = {} as Request;
+  const mockParams = { params: { email: mockEmail } };
+
+  let originalFetch: typeof global.fetch;
+  let mockFetch: any;
+  let consoleErrorSpy: any;
+
+  beforeEach(() => {
+    // Save original fetch and console.error
+    originalFetch = global.fetch;
+    consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    // Mock fetch
+    mockFetch = vi.fn();
+    global.fetch = mockFetch;
+
+    // Setup getGraphToken mock
+    vi.mocked(getGraphToken).mockResolvedValue(mockToken);
+  });
+
+  afterEach(() => {
+    // Restore original functions
+    global.fetch = originalFetch;
+    consoleErrorSpy.mockRestore();
+    vi.clearAllMocks();
+  });
+
+  it("should return photo image when graph API returns successful response", async () => {
+    // Mock successful response with body
+    const mockBody = new ReadableStream();
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      body: mockBody,
+    });
+
+    const response = await GET(mockRequest, mockParams);
+
+    // Verify fetch was called correctly
+    expect(mockFetch).toHaveBeenCalledWith(
+      `https://graph.microsoft.com/v1.0/users/${encodeURIComponent(mockEmail)}/photo/$value`,
+      { headers: { Authorization: `Bearer ${mockToken}` } },
+    );
+
+    // Verify response
+    expect(response).toBeInstanceOf(Response);
+    expect(response.headers.get("Content-Type")).toBe("image/jpeg");
+    expect(response.headers.get("Cache-Control")).toBe(
+      "public, max-age=86400, stale-while-revalidate=43200",
+    );
+    expect(await response.body).toBe(mockBody);
+  });
+
+  it("should return 204 No Content when graph API returns 404", async () => {
+    // Mock 404 response
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404,
+    });
+
+    const response = await GET(mockRequest, mockParams);
+
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(204);
+    expect(await response.text()).toBe("");
+  });
+
+  it("should return error response with original status when graph API returns error", async () => {
+    // Mock error response
+    const errorStatus = 403;
+    const errorBody = "Access denied";
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: errorStatus,
+      text: () => Promise.resolve(errorBody),
+    });
+
+    const response = await GET(mockRequest, mockParams);
+
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(errorStatus);
+    expect(await response.text()).toBe(errorBody);
+  });
+
+  it("should handle exceptions and return 500 error", async () => {
+    // Mock fetch to throw an error
+    const mockError = new Error("Network error");
+    mockFetch.mockRejectedValueOnce(mockError);
+
+    const response = await GET(mockRequest, mockParams);
+
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(500);
+    expect(await response.text()).toBe("Internal error fetching photo");
+    expect(consoleErrorSpy).toHaveBeenCalledWith("Photo fetch error:", mockError);
+  });
+});

package/src/ms-graph/user-photo.ts

@@ -0,0 +1,45 @@
+import { getGraphToken } from "./get-graph-token";
+
+export async function GET(_request: Request, { params }: { params: { email: string } }) {
+  const email = params.email;
+
+  if (
+    !process.env.MS_GRAPH_TENANT_ID ||
+    !process.env.MS_GRAPH_CLIENT_ID ||
+    !process.env.MS_GRAPH_CLIENT_SECRET
+  ) {
+    return new Response(null, { status: 204 });
+  }
+
+  try {
+    const token = await getGraphToken();
+    const graphRes = await fetch(
+      `https://graph.microsoft.com/v1.0/users/${encodeURIComponent(email)}/photo/$value`,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    );
+
+    if (graphRes.ok) {
+      return new Response(graphRes.body, {
+        headers: {
+          "Content-Type": "image/jpeg",
+          // browser caching (24 h, stale-while-revalidate 12 h)
+          "Cache-Control": "public, max-age=86400, stale-while-revalidate=43200",
+        },
+      });
+    }
+
+    if (graphRes.status === 404) {
+      return new Response(null, { status: 204 });
+    }
+
+    const body = await graphRes.text();
+
+    return new Response(body, { status: graphRes.status });
+  } catch (err) {
+    console.error("Photo fetch error:", err);
+
+    return new Response("Internal error fetching photo", { status: 500 });
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "acinguiux-dnr-typescript/base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "types.d.ts",
+    "node_modules/acinguiux-dnr-vitest/types.d.ts"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,26 @@
+import "next-auth";
+import "next-auth/jwt";
+import { UserAuthorization } from "./provider";
+
+declare module "next-auth" {
+  interface User {
+    name?: string;
+    email?: string;
+    roles?: UserAuthorization[];
+  }
+
+  interface Session {
+    expires_at?: number;
+    access_token?: string;
+    refresh_token?: string;
+    user?: User;
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    expires_at?: number;
+    access_token?: string;
+    refresh_token?: string;
+  }
+}

package/vitest.config.js

@@ -0,0 +1,20 @@
+import { default as sharedConfig } from "acinguiux-dnr-vitest/config";
+import { defineConfig, mergeConfig } from "vitest/config";
+
+const config = mergeConfig(
+  sharedConfig,
+  defineConfig({
+    test: {
+      coverage: {
+        thresholds: {
+          statements: 32,
+          branches: 91,
+          functions: 76,
+          lines: 32,
+        },
+      },
+    },
+  }),
+);
+
+export default config;