Preventing user to login in multiple device by sharing cookies

package.json

@@ -24,6 +24,7 @@
     "studio": "prisma studio"
   },
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@hookform/resolvers": "^3.6.0",
     "@icons-pack/react-simple-icons": "^9.4.0",
     "@prisma/client": "^5.18.0",

prisma/migrations/20241209080021_add_device_fingerprint_column_in_user_table/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "deviceFingerprint" TEXT;

prisma/schema.prisma

@@ -144,6 +144,7 @@ model User {
   name              String?
   email             String?            @unique
   token             String?
+  deviceFingerprint String?
   sessions          Session[]
   purchases         UserPurchases[]
   videoProgress     VideoProgress[]

src/actions/deviceFingerprintValidation/index.ts

@@ -0,0 +1,27 @@
+'use server';
+import db from '@/db';
+import { authOptions } from '@/lib/auth';
+import { getServerSession } from 'next-auth';
+
+export const validateFingerPrint = async (fingerprint: any) => {
+    const session = await getServerSession(authOptions);
+    if (!session || !session.user) throw new Error("User is not logged in");
+
+    if (!fingerprint) return { error: 'Fingerprint is not provided' };
+
+    const user = await db.user.findFirst({
+        where: {
+          email: session.user.email,
+        },
+        select: {
+            deviceFingerprint: true,
+            token: true
+          }
+      });
+
+    if (fingerprint !== user?.deviceFingerprint) {
+        throw new Error('Invalid fingerprint - Session expired');
+    }
+
+    return { message: 'Fingerprint validated', fingerprint  };    
+};

src/components/Signin.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
 import React, { useRef, useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { motion } from 'framer-motion';
+import { generateFingerprint } from '@/lib/utils';
 
 const emailDomains = [
   'gmail.com',
@@ -123,9 +124,11 @@ const Signin = () => {
       return;
     }
     setCheckingPassword(true);
+    const fingerprint = await generateFingerprint();
     const res = await signIn('credentials', {
       username: email.current,
       password: password.current,
+      deviceFingerprint: fingerprint,
       redirect: false,
     });
 

src/components/VideoPlayer2.tsx

@@ -9,14 +9,15 @@ import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
 import 'videojs-mobile-ui';
 import 'videojs-sprite-thumbnails';
 import 'videojs-seek-buttons';
-import { handleMarkAsCompleted } from '@/lib/utils';
-import { useSearchParams } from 'next/navigation';
+import { generateFingerprint, handleMarkAsCompleted } from '@/lib/utils';
+import { useRouter, useSearchParams } from 'next/navigation';
 import './QualitySelectorControllBar';
 import { YoutubeRenderer } from './YoutubeRenderer';
 import { toast } from 'sonner';
 import { createRoot } from 'react-dom/client';
 import { PictureInPicture2 } from 'lucide-react';
 import { AppxVideoPlayer } from './AppxVideoPlayer';
+import { validateFingerPrint } from '@/actions/deviceFingerprintValidation';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -46,6 +47,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player | null>(null);
   const [player, setPlayer] = useState<any>(null);
+  const router = useRouter();
   const searchParams = useSearchParams();
   const vidUrl = options.sources[0].src;
 
@@ -134,6 +136,35 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     };
   }, [player]);
 
+  useEffect(() => {
+    let timer: any;
+    const checkFingerprint = async () => {
+      try {
+        const fingerprint: string = await generateFingerprint();  
+        timer = setInterval(async () => {
+          try {
+            await validateFingerPrint(fingerprint);  
+          } catch (error) {
+            console.error('Fingerprint validation failed:', error);
+            router.push('/invalidsession');
+          }
+        }, 1000 * 60 * 2); 
+
+        return () => timer;
+      } catch (error) {
+        console.error('Error during fingerprint generation or validation:', error);
+      }
+    };
+
+    checkFingerprint();
+
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     const t = searchParams.get('timestamp');
     if (contentId && player && !t) {

src/lib/auth.ts

@@ -159,6 +159,7 @@ export const authOptions = {
               },
               data: {
                 token: jwt,
+                deviceFingerprint: credentials?.deviceFingerprint
               },
             });
 

src/lib/utils.ts

@@ -4,6 +4,8 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import Player from 'video.js/dist/types/player';
 import { Bookmark } from '@prisma/client';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
@@ -426,3 +428,17 @@ export function getFilteredContent(
 
   return [];
 }
+
+export const generateFingerprint = async (): Promise<string> => {
+  try {
+    const fp = await FingerprintJS.load();
+    const result = await fp.get();
+    const fingerprint: string = result.visitorId; 
+
+    return fingerprint;
+  } catch (error) {
+    console.error("Error generating fingerprint:", error);
+    throw new Error("Failed to generate fingerprint");
+  }
+};
+