From 57214ab517661b7e1f0d4a5b085c10cd1b596684 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sat, 30 Mar 2024 15:00:24 +0800
Subject: [PATCH] Add AuthenticityToken component in makerkit

This new component, AuthenticityToken, is added to fetch CSRF token from the 'meta' tags. This is used to prevent Cross Site Request Forgery on forms by embedding a CSRF token as a hidden input field. When the form is submitted, the server can verify whether the request was legitimate by checking the CSRF token. This enhances the security of the application.
---
 packages/ui/src/makerkit/AuthenticityToken.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 packages/ui/src/makerkit/AuthenticityToken.tsx

diff --git a/packages/ui/src/makerkit/AuthenticityToken.tsx b/packages/ui/src/makerkit/AuthenticityToken.tsx
new file mode 100644
index 000000000..a9bc433b2
--- /dev/null
+++ b/packages/ui/src/makerkit/AuthenticityToken.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+export function AuthenticityToken() {
+  const token = useCsrfToken();
+
+  return <input type="hidden" name="csrf_token" value={token} />;
+}
+
+function useCsrfToken() {
+  if (typeof window === 'undefined') return '';
+
+  return (
+    document
+      .querySelector('meta[name="csrf-token"]')
+      ?.getAttribute('content') ?? ''
+  );
+}