Search code examples
javascriptfingerprint

Device Fingerprint on server-side

I want to generate a unique identifier for users (guests) on my website. I understand fingerprint.js uses browser APIs to generate a unique fingerprint that can be used as a session ID for a guest user. However, the confusing part for me is how to mimic its behavior at the server side. As a reference, I have a page which is a server component which makes API calls and we want to generate the unique IDs before these API calls as this ID is necessary for these server calls. What are the best practices to achieve these unique fingerprint IDs in server side frameworks?

I tried using FingerprintJS however the issue is that it is executed on the client side whereas, the API calls necessary for the server components to be rendered requires fingerprint.

Solution

  • Firstly, It is not possible to generate this unique fingerprint on server side.

    Now, a simple workaround is to add a client component and store the fingerprint in a cookie so that it is picked up automatically.

    You can access this cookie in server component as follows.

    import { cookies } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  const theme = cookieStore.get('fingerprint')
  return '...'
}