quality: strong typing in users and permissions

Author: aeltorio

client/src/components/auth0.tsx

@@ -27,6 +27,7 @@ import { FC, ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "@heroui/link";
 import { createRemoteJWKSet, JWTPayload, jwtVerify } from "jose";
+import type { Auth0User, Auth0Permission, Auth0Role } from "@/types/data";
 
 /**
  * Renders the user's profile name with a tooltip showing their username.
@@ -585,7 +586,7 @@ export const useSecuredApi = () => {
         throw error;
       }
     },
-    listAuth0Users: async (managementToken: string) => {
+    listAuth0Users: async (managementToken: string): Promise<Auth0User[] | null> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/users?per_page=100`,
@@ -597,13 +598,13 @@ export const useSecuredApi = () => {
             },
           },
         );
-        return await resp.json();
+        return (await resp.json()) as Auth0User[];
       } catch (error) {
         console.error("Failed to list Auth0 users:", error);
         throw error;
       }
     },
-    listAuth0Roles: async (managementToken: string) => {
+    listAuth0Roles: async (managementToken: string): Promise<Auth0Role[] | null> => {
       try {
         const resp = await fetch(`https://${import.meta.env.AUTH0_DOMAIN}/api/v2/roles`, {
           method: "GET",
@@ -612,13 +613,13 @@ export const useSecuredApi = () => {
             "Content-Type": "application/json",
           },
         });
-        return await resp.json();
+        return (await resp.json()) as Auth0Role[];
       } catch (error) {
         console.error("Failed to list Auth0 roles:", error);
         throw error;
       }
     },
-    getUserRoles: async (managementToken: string, userId: string) => {
+    getUserRoles: async (managementToken: string, userId: string): Promise<Auth0Role[] | null> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/users/${encodeURIComponent(userId)}/roles`,
@@ -630,13 +631,13 @@ export const useSecuredApi = () => {
             },
           },
         );
-        return await resp.json();
+        return (await resp.json()) as Auth0Role[];
       } catch (error) {
         console.error("Failed to get user roles:", error);
         throw error;
       }
     },
-    addUserToRole: async (managementToken: string, roleId: string, userId: string) => {
+    addUserToRole: async (managementToken: string, roleId: string, userId: string): Promise<any> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/roles/${encodeURIComponent(roleId)}/users`,
@@ -714,7 +715,7 @@ export const useSecuredApi = () => {
         throw error;
       }
     },
-    getUserPermissions: async (managementToken: string, userId: string) => {
+    getUserPermissions: async (managementToken: string, userId: string): Promise<Auth0Permission[] | null> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/users/${encodeURIComponent(userId)}/permissions`,
@@ -732,7 +733,7 @@ export const useSecuredApi = () => {
         throw error;
       }
     },
-    addPermissionToUser: async (managementToken: string, userId: string, permissionName: string) => {
+    addPermissionToUser: async (managementToken: string, userId: string, permissionName: string): Promise<Auth0Permission[] | null> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/users/${encodeURIComponent(userId)}/permissions`,
@@ -758,7 +759,7 @@ export const useSecuredApi = () => {
         throw error;
       }
     },
-    removePermissionFromUser: async (managementToken: string, userId: string, permissionName: string) => {
+    removePermissionFromUser: async (managementToken: string, userId: string, permissionName: string): Promise<Auth0Permission[] | null> => {
       try {
         const resp = await fetch(
           `https://${import.meta.env.AUTH0_DOMAIN}/api/v2/users/${encodeURIComponent(userId)}/permissions`,

client/src/pages/users-and-permissions.tsx

@@ -25,7 +25,7 @@
 import { useEffect, useState } from "react";
 import DefaultLayout from "@/layouts/default";
 import { useSecuredApi } from "@/components/auth0";
-import { Auth0ManagementTokenApiResponse, Auth0ManagementTokenResponse } from "@/types/data";
+import { Auth0ManagementTokenApiResponse, Auth0ManagementTokenResponse, Auth0User, Auth0Permission } from "@/types/data";
 import { useTranslation } from "react-i18next";
 import { Button } from "@heroui/button";
 import { Checkbox } from "@heroui/checkbox";
@@ -39,14 +39,14 @@ export default function UsersAndPermissionsPage() {
     const [token, setToken] = useState<Auth0ManagementTokenResponse | null>(null);
     const { t } = useTranslation();
     // replaced message state and inline alert by HeroUI toasts
-    const [users, setUsers] = useState<any[]>([]);
+    const [users, setUsers] = useState<Auth0User[]>([]);
     // roles are not used yet because we work with direct permissions (not roles)
-    const [editing, setEditing] = useState<Record<string, any>>({});
-    const [selectedUser, setSelectedUser] = useState<any | null>(null);
+    const [editing, setEditing] = useState<Record<string, Record<string, boolean>>>({});
+    const [selectedUser, setSelectedUser] = useState<Auth0User | null>(null);
     const [modalOpen, setModalOpen] = useState(false);
     const [modalLoading, setModalLoading] = useState(false);
     const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
-    const [confirmDeleteUser, setConfirmDeleteUser] = useState<any | null>(null);
+    const [confirmDeleteUser, setConfirmDeleteUser] = useState<Auth0User | null>(null);
     const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
     useEffect(() => {
         // Fetch Auth0 Management API token for accessing Auth0 management endpoints
@@ -93,7 +93,7 @@ export default function UsersAndPermissionsPage() {
                 if (edits.hasOwnProperty(key)) {
                     const permName = permissionMappings[key];
                     const userPerms = await getUserPermissions(mgmtToken, userId);
-                    const hasIt = (userPerms || []).some((p: any) => p.permission_name === permName);
+                    const hasIt = (userPerms || []).some((p: Auth0Permission) => p.permission_name === permName);
                     if (edits[key] && !hasIt) {
                         await addPermissionToUser(mgmtToken, userId, permName);
                     } else if (!edits[key] && hasIt) {
@@ -143,10 +143,10 @@ export default function UsersAndPermissionsPage() {
                     // Try exact match or partial match to support localhost vs absolute URL differences
                     return rs === audience || rs.includes(audience) || audience.includes(rs) || rs.endsWith(audience) || audience.endsWith(rs);
                 })
-                .map((p: any) => p.permission_name);
+                .map((p: Auth0Permission) => p.permission_name);
             // fallback: if nothing matched, use the whole list of permission names
             if (!permNames || permNames.length === 0) {
-                permNames = (userPerms || []).map((p: any) => p.permission_name);
+                permNames = (userPerms || []).map((p: Auth0Permission) => p.permission_name);
             }
             // Debug info removed for production readiness
             setEditing((prev) => ({

cloudflare-worker/src/types/data.ts

@@ -409,3 +409,55 @@ export interface Auth0ManagementTokenResponse {
  * Union type for the API response: either the token or a standard error response
  */
 export type Auth0ManagementTokenApiResponse = Auth0ManagementTokenResponse | ErrorResponse;
+
+/**
+ * Identity object from Auth0 user object (one of multiple identities in a federated login)
+ */
+export interface Auth0UserIdentity {
+  /** Provider specific user ID (e.g. google-oauth2|123456789) */
+  user_id: string;
+  /** Identity provider (e.g. "google-oauth2", "auth0") */
+  provider: string;
+  /** Connection (e.g. "Username-Password-Authentication") */
+  connection?: string;
+  /** True if this identity is a social provider */
+  isSocial?: boolean;
+}
+
+/**
+ * Lightweight representation of an Auth0 Management API user
+ * Based on the official Auth0 Management API documentation (https://auth0.com/docs/api/management/v2/#!/Users/get_users)
+ */
+export interface Auth0User {
+  user_id: string;
+  email?: string;
+  email_verified?: boolean;
+  name?: string;
+  nickname?: string;
+  picture?: string;
+  created_at?: string;
+  updated_at?: string;
+  last_login?: string;
+  logins_count?: number;
+  blocked?: boolean;
+  identities?: Auth0UserIdentity[];
+  user_metadata?: Record<string, any> | null;
+  app_metadata?: Record<string, any> | null;
+}
+
+/**
+ * Representation of a single permission object returned by the Auth0 Management API
+ */
+export interface Auth0Permission {
+  permission_name: string;
+  resource_server_identifier: string;
+}
+
+/**
+ * Simplified Auth0 role object shape
+ */
+export interface Auth0Role {
+  id: string;
+  name: string;
+  description?: string;
+}