Add user approval feature (#486)

implements a user approval feature that allows administrators to manually approve new users before they can access the system. The feature adds approval workflow controls and error handling for blocked/pending users.

Adds user approval toggle in authentication settings
Implements approve/reject actions for pending users in the users table
Creates error page for blocked/pending approval scenarios

Author: mlsmaycon

src/app/(dashboard)/team/user/page.tsx

@@ -289,6 +289,7 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
   const neverLoggedIn = dayjs(user.last_login).isBefore(
     dayjs().subtract(1000, "years"),
   );
+  const isPendingApproval = user?.pending_approval;
 
   return (
     <Card>
@@ -328,18 +329,20 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
 
         {!isServiceUser && (
           <>
-            {!user.is_current && user.role != Role.Owner && (
-              <Card.ListItem
-                tooltip={false}
-                label={
-                  <>
-                    <Ban size={16} />
-                    Block User
-                  </>
-                }
-                value={<UserBlockCell user={user} isUserPage={true} />}
-              />
-            )}
+            {!user.is_current &&
+              user.role != Role.Owner &&
+              !isPendingApproval && (
+                <Card.ListItem
+                  tooltip={false}
+                  label={
+                    <>
+                      <Ban size={16} />
+                      Block User
+                    </>
+                  }
+                  value={<UserBlockCell user={user} isUserPage={true} />}
+                />
+              )}
 
             <Card.ListItem
               label={

src/app/error/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useOidc } from "@axa-fr/react-oidc";
+import Button from "@components/Button";
+import Paragraph from "@components/Paragraph";
+import loadConfig from "@utils/config";
+import { ArrowRightIcon, RefreshCw } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
+
+const config = loadConfig();
+
+export default function ErrorPage() {
+  const { logout, isAuthenticated } = useOidc();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<{
+    code: number;
+    message: string;
+    type: string;
+  } | null>(null);
+
+  useEffect(() => {
+    // Get error details from URL params
+    const code = searchParams.get("code");
+    const message = searchParams.get("message");
+    const type = searchParams.get("type");
+
+    if (code && message) {
+      setError({
+        code: parseInt(code),
+        message: decodeURIComponent(message),
+        type: type || "error",
+      });
+    }
+  }, [searchParams]);
+
+  const handleLogout = () => {
+    // Use the same logout pattern as OIDCError
+    logout("/", { client_id: config.clientId });
+  };
+
+  const handleRetry = () => {
+    router.push("/");
+  };
+
+  if (!isAuthenticated) {
+    // If not authenticated, redirect to home
+    router.push("/");
+    return null;
+  }
+
+  const isBlockedUser =
+    error?.code === 403 && error?.message?.toLowerCase().includes("blocked");
+  const isPendingApproval =
+    error?.code === 403 &&
+    error?.message?.toLowerCase().includes("pending approval");
+
+  const getTitle = () => {
+    if (isBlockedUser) return "User Account Blocked";
+    if (isPendingApproval) return "User Approval Pending";
+    return "Access Error";
+  };
+
+  const getDescription = () => {
+    if (isBlockedUser) {
+      return "Your access has been blocked by the NetBird account administrator, possibly due to new user approval requirements or security policies. Please contact your administrator to regain access.";
+    }
+    if (isPendingApproval) {
+      return "Your account is pending approval from an administrator. Please wait for approval before accessing the dashboard.";
+    }
+    return "An error occurred while trying to access the dashboard. Please try again or contact your administrator.";
+  };
+
+  return (
+    <div className="flex items-center justify-center flex-col h-screen max-w-xl mx-auto">
+      <div className="bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center">
+        <NetBirdIcon size={23} />
+      </div>
+
+      <h1 className="text-center mt-2">{getTitle()}</h1>
+
+      <Paragraph className="text-center mt-2 block">
+        {getDescription()}
+      </Paragraph>
+
+      {error && (
+        <div className="bg-nb-gray-930 border border-nb-gray-800 rounded-md p-4 mt-4 max-w-md font-mono mb-2">
+          <div className="text-center text-sm text-netbird">
+            <div>response_message: {error.message}</div>
+          </div>
+        </div>
+      )}
+
+      <Paragraph className="text-center mt-2 text-sm">
+        If you believe this is an error, please contact your administrator.
+      </Paragraph>
+
+      <div className="mt-5 space-y-3">
+        {!isBlockedUser && !isPendingApproval && (
+          <Button variant="default-outline" size="sm" onClick={handleRetry}>
+            <RefreshCw size={16} className="mr-2" />
+            Try Again
+          </Button>
+        )}
+
+        <Button variant="primary" size="sm" onClick={handleLogout}>
+          {isBlockedUser || isPendingApproval ? "Sign Out" : "Logout"}
+          <ArrowRightIcon size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/ui/NotificationCountBadge.tsx

@@ -8,12 +8,12 @@ export const NotificationCountBadge = ({ count = 0 }: Props) => {
   return count ? (
     <div
       className={cn(
-        count <= 9 ? "w-5 h-5" : "py-2.5 px-2",
-        "relative bg-netbird flex items-center justify-center rounded-full text-white  !leading-[0]  text-xs font-semibold",
+        count <= 9 ? "w-4 h-4" : "py-2 px-1.5",
+        "relative bg-netbird flex items-center justify-center rounded-full text-white  !leading-[0]  text-[0.6rem] font-semibold",
       )}
     >
       <span className="animate-ping absolute left-0 inline-flex h-full w-full rounded-full bg-netbird opacity-20"></span>
-      {count || 0}
+      <span className={"relative -left-[0.5px]"}>{count || 0}</span>
     </div>
   ) : null;
 };

src/contexts/UsersProvider.tsx

@@ -62,18 +62,24 @@ const UserProfileProvider = ({ children }: Props) => {
     }
   }, [user, error, users, isLoading, isAllUsersLoading]);
 
+
   const data = useMemo(() => {
     return {
       loggedInUser,
     };
   }, [loggedInUser]);
 
-  return !isLoading && loggedInUser ? (
+  // Show loading only when we're still loading and don't have user data
+  if (isLoading || !loggedInUser) {
+    return <FullScreenLoading />;
+  }
+
+  // For blocked or pending approval users, we still need to provide the context
+  // so they can access their user data on the blocked page
+  return (
     <UserProfileContext.Provider value={data}>
       <PermissionsProvider user={loggedInUser}>{children}</PermissionsProvider>
     </UserProfileContext.Provider>
-  ) : (
-    <FullScreenLoading />
   );
 };
 

src/interfaces/Account.ts

@@ -7,6 +7,7 @@ export interface Account {
   settings: {
     extra: {
       peer_approval_enabled: boolean;
+      user_approval_required: boolean;
     };
     peer_login_expiration_enabled: boolean;
     peer_login_expiration: number;

src/interfaces/User.ts

@@ -10,6 +10,7 @@ export interface User {
   is_current?: boolean;
   is_service_user?: boolean;
   is_blocked?: boolean;
+  pending_approval?: boolean;
   last_login?: Date;
   permissions: Permissions;
 }

src/modules/activity/ActivityDescription.tsx

@@ -253,6 +253,22 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "user.approve")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was approved
+      </div>
+    );
+
+  if (event.activity_code == "user.reject")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was rejected
+      </div>
+    );
+
   /**
    * Service User
    */

src/modules/activity/utils.ts

@@ -19,6 +19,7 @@ const ACTION_COLOR_MAPPING: Record<string, ActionStatus> = {
   delete: ActionStatus.ERROR,
   revoke: ActionStatus.ERROR,
   block: ActionStatus.ERROR,
+  reject: ActionStatus.ERROR,
 
   // Warning actions
   overuse: ActionStatus.WARNING,

src/modules/settings/AuthenticationTab.tsx

@@ -23,6 +23,7 @@ import {
   CalendarClock,
   ExternalLinkIcon,
   ShieldIcon,
+  ShieldUserIcon,
   TimerResetIcon,
 } from "lucide-react";
 import React, { useState } from "react";
@@ -52,6 +53,19 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
     }
   });
 
+  /**
+   * User approval required
+   */
+  const [userApprovalRequired, setUserApprovalRequired] = useState<boolean>(
+    () => {
+      try {
+        return account?.settings?.extra?.user_approval_required || false;
+      } catch (error) {
+        return false;
+      }
+    },
+  );
+
   // Peer Expiration
   const [
     loginExpiration,
@@ -86,6 +100,7 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
 
   const { hasChanges, updateRef } = useHasChanges([
     peerApproval,
+    userApprovalRequired,
     loginExpiration,
     expiresIn,
     expireInterval,
@@ -118,13 +133,15 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
             extra: {
               ...account.settings?.extra,
               peer_approval_enabled: peerApproval,
+              user_approval_required: userApprovalRequired,
             },
           },
         } as Account)
         .then(() => {
           mutate("/accounts");
           updateRef([
             peerApproval,
+            userApprovalRequired,
             loginExpiration,
             expiresIn,
             expireInterval,
@@ -181,6 +198,27 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
         </div>
 
         <div className={"flex flex-col gap-6 w-full mt-8 mb-3"}>
+          <div className={"flex flex-col"}>
+            <FancyToggleSwitch
+              value={userApprovalRequired}
+              onChange={setUserApprovalRequired}
+              dataCy={"user-approval-required"}
+              label={
+                <>
+                  <ShieldUserIcon size={15} />
+                  User Approval Required
+                </>
+              }
+              helpText={
+                <>
+                  Require manual approval for new users joining via <br />
+                  domain matching. Users will be blocked until approved.
+                </>
+              }
+              disabled={!permission.settings.update}
+            />
+          </div>
+
           <div className={"flex flex-col"}>
             <FancyToggleSwitch
               value={loginExpiration}