feat: add user security audit logs (#884)

## Description Adds the ability to see the events relating to the account. Event data includes: - Device - IP Address - Time - Action Actions are: - Profile update - Account linked to SSO (Example user signs in with Google after creating a email/password account) - Enable 2FA - Disable 2FA - Reset password - Update password - Sign out - Sign in - Sign in fail - Sign in 2FA fail ## Changes - Added audit logs - Updated 2FA dialogs to have consistent footers - Update `/settings/security/page` layout ## Testing Performed Tested events: ![image](https://github.com/documenso/documenso/assets/20962767/8ab9e055-aa58-4621-86fe-24681cce6418) More tested events: ![image](https://github.com/documenso/documenso/assets/20962767/b6b42e13-626e-4fed-8e1a-097e5324aa6d) ## Checklist - [X] I have tested these changes locally and they work as expected. - [X] I have followed the project's coding style guidelines. ## Additional Notes - Not sure if we really want to record the sign out event or not - Might want to design breadcrumbs for nested setting pages
2025-11-21 04:01:45 +10:00 · 2024-02-02 09:42:25 +11:00
parent ec3ba0e922 ada46a5f47
commit e42088a5bf
32 changed files with 816 additions and 184 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -45,6 +45,7 @@
    "sharp": "0.33.1",
    "ts-pattern": "^5.0.5",
    "typescript": "5.2.2",
+    "ua-parser-js": "^1.0.37",
    "uqr": "^0.1.2",
    "zod": "^3.22.4"
  },
@ -53,7 +54,8 @@
    "@types/luxon": "^3.3.1",
    "@types/node": "20.1.0",
    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7"
+    "@types/react-dom": "18.2.7",
+    "@types/ua-parser-js": "^0.7.39"
  },
  "overrides": {
    "next-auth": {
--- a/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+
+import { UserSecurityActivityDataTable } from './user-security-activity-data-table';
+
+export const metadata: Metadata = {
+  title: 'Security activity',
+};
+
+export default function SettingsSecurityActivityPage() {
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">Security activity</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        View all recent security activity related to your account.
+      </p>
+
+      <hr className="my-4" />
+
+      <UserSecurityActivityDataTable />
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx
@ -0,0 +1,156 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
+import { UAParser } from 'ua-parser-js';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { USER_SECURITY_AUDIT_LOG_MAP } from '@documenso/lib/constants/auth';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+const dateFormat: DateTimeFormatOptions = {
+  ...DateTime.DATETIME_SHORT,
+  hourCycle: 'h12',
+};
+
+export const UserSecurityActivityDataTable = () => {
+  const parser = new UAParser();
+
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.profile.findUserSecurityAuditLogs.useQuery(
+      {
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Date',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
+        },
+        {
+          header: 'Device',
+          cell: ({ row }) => {
+            if (!row.original.userAgent) {
+              return 'N/A';
+            }
+
+            parser.setUA(row.original.userAgent);
+
+            const result = parser.getResult();
+
+            let output = result.os.name;
+
+            if (!output) {
+              return 'N/A';
+            }
+
+            if (result.os.version) {
+              output += ` (${result.os.version})`;
+            }
+
+            return output;
+          },
+        },
+        {
+          header: 'Browser',
+          cell: ({ row }) => {
+            if (!row.original.userAgent) {
+              return 'N/A';
+            }
+
+            parser.setUA(row.original.userAgent);
+
+            const result = parser.getResult();
+
+            return result.browser.name ?? 'N/A';
+          },
+        },
+        {
+          header: 'IP Address',
+          accessorKey: 'ipAddress',
+          cell: ({ row }) => row.original.ipAddress ?? 'N/A',
+        },
+        {
+          header: 'Action',
+          accessorKey: 'type',
+          cell: ({ row }) => USER_SECURITY_AUDIT_LOG_MAP[row.original.type],
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      hasFilters={parsedSearchParams.page !== undefined || parsedSearchParams.perPage !== undefined}
+      onClearFilters={() => router.push(pathname ?? '/')}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination table={table} />}
+    </DataTable>
+  );
+};
--- a/apps/web/src/app/(dashboard)/settings/security/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/page.tsx
@ -1,7 +1,10 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';

 import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';

 import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
 import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
@ -26,43 +29,74 @@ export default async function SecuritySettingsPage() {

      {user.identityProvider === 'DOCUMENSO' ? (
        <div>
-          <PasswordForm user={user} className="max-w-xl" />
+          <PasswordForm user={user} />

-          <hr className="mb-4 mt-8" />
+          <hr className="border-border/50 mt-6" />

-          <h4 className="text-lg font-medium">Two Factor Authentication</h4>
+          <Alert
+            className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+            variant="neutral"
+          >
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>Two factor authentication</AlertTitle>

-          <p className="text-muted-foreground mt-2 text-sm">
-            Add and manage your two factor security settings to add an extra layer of security to
-            your account!
-          </p>
-
-          <div className="mt-4 max-w-xl">
-            <h5 className="font-medium">Two-factor methods</h5>
+              <AlertDescription className="mr-4">
+                Create one-time passwords that serve as a secondary authentication method for
+                confirming your identity when requested during the sign-in process.
+              </AlertDescription>
+            </div>

            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-          </div>
+          </Alert>

          {user.twoFactorEnabled && (
-            <div className="mt-4 max-w-xl">
-              <h5 className="font-medium">Recovery methods</h5>
+            <Alert
+              className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>Recovery codes</AlertTitle>
+
+                <AlertDescription className="mr-4">
+                  Two factor authentication recovery codes are used to access your account in the
+                  event that you lose access to your authenticator app.
+                </AlertDescription>
+              </div>

              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
-            </div>
+            </Alert>
          )}
        </div>
      ) : (
-        <div>
-          <h4 className="text-lg font-medium">
+        <Alert className="p-6" variant="neutral">
+          <AlertTitle>
            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
-          </h4>
-          <p className="text-muted-foreground mt-2 text-sm">
+          </AlertTitle>
+
+          <AlertDescription>
            To update your password, enable two-factor authentication, and manage other security
            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
            settings.
-          </p>
-        </div>
+          </AlertDescription>
+        </Alert>
      )}
+
+      <Alert
+        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+        variant="neutral"
+      >
+        <div className="mb-4 mr-4 sm:mb-0">
+          <AlertTitle>Recent activity</AlertTitle>
+
+          <AlertDescription className="mr-2">
+            View all recent security activity related to your account.
+          </AlertDescription>
+        </div>
+
+        <Button asChild>
+          <Link href="/settings/security/activity">View activity</Link>
+        </Button>
+      </Alert>
    </div>
  );
 }
--- a/apps/web/src/components/forms/2fa/authenticator-app.tsx
+++ b/apps/web/src/components/forms/2fa/authenticator-app.tsx
@ -19,27 +19,14 @@ export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps)

  return (
    <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
-        <div className="flex-1">
-          <p>Authenticator app</p>
-
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
-            Create one-time passwords that serve as a secondary authentication method for confirming
-            your identity when requested during the sign-in process.
-          </p>
-        </div>
-
-        <div>
-          {isTwoFactorEnabled ? (
-            <Button variant="destructive" onClick={() => setModalState('disable')} size="sm">
-              Disable 2FA
-            </Button>
-          ) : (
-            <Button onClick={() => setModalState('enable')} size="sm">
-              Enable 2FA
-            </Button>
-          )}
-        </div>
+      <div className="flex-shrink-0">
+        {isTwoFactorEnabled ? (
+          <Button variant="destructive" onClick={() => setModalState('disable')}>
+            Disable 2FA
+          </Button>
+        ) : (
+          <Button onClick={() => setModalState('enable')}>Enable 2FA</Button>
+        )}
      </div>

      <EnableAuthenticatorAppDialog
--- a/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
@ -11,6 +11,7 @@ import {
  Dialog,
  DialogContent,
  DialogDescription,
+  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@ -145,8 +146,8 @@ export const DisableAuthenticatorAppDialog = ({
              />
            </fieldset>

-            <div className="flex w-full items-center justify-between">
-              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                Cancel
              </Button>

@ -157,7 +158,7 @@ export const DisableAuthenticatorAppDialog = ({
              >
                Disable 2FA
              </Button>
-            </div>
+            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@ -15,6 +15,7 @@ import {
  Dialog,
  DialogContent,
  DialogDescription,
+  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@ -190,15 +191,15 @@ export const EnableAuthenticatorAppDialog = ({
                    )}
                  />

-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                      Cancel
                    </Button>

                    <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
                      Continue
                    </Button>
-                  </div>
+                  </DialogFooter>
                </form>
              </Form>
            );
@ -251,15 +252,15 @@ export const EnableAuthenticatorAppDialog = ({
                  )}
                />

-                <div className="flex w-full items-center justify-between">
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                    Cancel
                  </Button>

                  <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
                    Enable 2FA
                  </Button>
-                </div>
+                </DialogFooter>
              </form>
            </Form>
          ))
--- a/apps/web/src/components/forms/2fa/recovery-codes.tsx
+++ b/apps/web/src/components/forms/2fa/recovery-codes.tsx
@ -7,7 +7,6 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ViewRecoveryCodesDialog } from './view-recovery-codes-dialog';

 type RecoveryCodesProps = {
-  // backupCodes: string[] | null;
  isTwoFactorEnabled: boolean;
 };

@ -16,22 +15,13 @@ export const RecoveryCodes = ({ isTwoFactorEnabled }: RecoveryCodesProps) => {

  return (
    <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
-        <div className="flex-1">
-          <p>Recovery Codes</p>
-
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
-            Recovery codes are used to access your account in the event that you lose access to your
-            authenticator app.
-          </p>
-        </div>
-
-        <div>
-          <Button onClick={() => setIsOpen(true)} disabled={!isTwoFactorEnabled} size="sm">
-            View Codes
-          </Button>
-        </div>
-      </div>
+      <Button
+        className="flex-shrink-0"
+        onClick={() => setIsOpen(true)}
+        disabled={!isTwoFactorEnabled}
+      >
+        View Codes
+      </Button>

      <ViewRecoveryCodesDialog
        key={isOpen ? 'open' : 'closed'}
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@ -11,6 +11,7 @@ import {
  Dialog,
  DialogContent,
  DialogDescription,
+  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@ -119,15 +120,15 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                    )}
                  />

-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                      Cancel
                    </Button>

                    <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
                      Continue
                    </Button>
-                  </div>
+                  </DialogFooter>
                </form>
              </Form>
            );
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@ -137,7 +137,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
          />
        </fieldset>

-        <div className="mt-4">
+        <div className="ml-auto mt-4">
          <Button type="submit" loading={isSubmitting}>
            {isSubmitting ? 'Updating password...' : 'Update password'}
          </Button>
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@ -12,7 +12,13 @@ import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
 import {
  Form,
  FormControl,
@ -111,7 +117,6 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =

      const result = await signIn('credentials', {
        ...credentials,
-
        callbackUrl: LOGIN_REDIRECT_PATH,
        redirect: false,
      });
@ -270,21 +275,23 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
                  )}
                />
              )}
+
+              <DialogFooter className="mt-4">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={onToggleTwoFactorAuthenticationMethodClick}
+                >
+                  {twoFactorAuthenticationMethod === 'totp'
+                    ? 'Use Backup Code'
+                    : 'Use Authenticator'}
+                </Button>
+
+                <Button type="submit" loading={isSubmitting}>
+                  {isSubmitting ? 'Signing in...' : 'Sign In'}
+                </Button>
+              </DialogFooter>
            </fieldset>
-
-            <div className="mt-4 flex items-center justify-between">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onToggleTwoFactorAuthenticationMethodClick}
-              >
-                {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
-              </Button>
-
-              <Button type="submit" loading={isSubmitting}>
-                {isSubmitting ? 'Signing in...' : 'Sign In'}
-              </Button>
-            </div>
          </form>
        </DialogContent>
      </Dialog>
--- a/apps/web/src/pages/api/auth/[...nextauth].ts
+++ b/apps/web/src/pages/api/auth/[...nextauth].ts
@ -1,17 +1,65 @@
-// import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
 import NextAuth from 'next-auth';

 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';

-export default NextAuth({
-  ...NEXT_AUTH_OPTIONS,
-  pages: {
-    signIn: '/signin',
-    signOut: '/signout',
-    error: '/signin',
-  },
-});
+export default async function auth(req: NextApiRequest, res: NextApiResponse) {
+  const { ipAddress, userAgent } = extractNextApiRequestMetadata(req);

-// export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
-//   res.json({ hello: 'world' });
-// }
+  return await NextAuth(req, res, {
+    ...NEXT_AUTH_OPTIONS,
+    pages: {
+      signIn: '/signin',
+      signOut: '/signout',
+      error: '/signin',
+    },
+    events: {
+      signIn: async ({ user }) => {
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId: user.id,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.SIGN_IN,
+          },
+        });
+      },
+      signOut: async ({ token }) => {
+        const userId = typeof token.id === 'string' ? parseInt(token.id) : token.id;
+
+        if (isNaN(userId)) {
+          return;
+        }
+
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.SIGN_OUT,
+          },
+        });
+      },
+      linkAccount: async ({ user }) => {
+        const userId = typeof user.id === 'string' ? parseInt(user.id) : user.id;
+
+        if (isNaN(userId)) {
+          return;
+        }
+
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.ACCOUNT_SSO_LINK,
+          },
+        });
+      },
+    },
+  });
+}