diff --git a/resources/assets/pterodactyl/scripts/bootstrap.js b/resources/assets/pterodactyl/scripts/bootstrap.js
index b101f9b80..8d2009067 100644
--- a/resources/assets/pterodactyl/scripts/bootstrap.js
+++ b/resources/assets/pterodactyl/scripts/bootstrap.js
@@ -30,6 +30,7 @@ let token = document.head.querySelector('meta[name="csrf-token"]');
 
 if (token) {
     window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+    window.X_CSRF_TOKEN = token.content;
 } else {
     console.error('CSRF token not found in document.');
 }
diff --git a/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue
index 21d727d3b..af46c1c06 100644
--- a/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue
+++ b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue
@@ -12,6 +12,7 @@
                 </div>
             </div>
             <div>
+                <csrf/>
                 <button class="btn btn-blue btn-jumbo" type="submit">
                     {{ $t('auth.recover_account') }}
                 </button>
@@ -26,11 +27,19 @@
 </template>
 
 <script>
+    import Csrf from "../shared/CSRF";
+
     export default {
+        components: {Csrf},
         name: 'forgot-password',
         props: {
             email: {type: String, required: true},
         },
+        data: function () {
+            return {
+                X_CSRF_TOKEN: window.X_CSRF_TOKEN,
+            };
+        },
         methods: {
             updateEmail: function (event) {
                 this.$emit('update-email', event.target.value);
diff --git a/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue
index 87013f2fd..bd85849b0 100644
--- a/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue
+++ b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue
@@ -17,6 +17,7 @@
                 </div>
             </div>
             <div>
+                <csrf/>
                 <button class="btn btn-blue btn-jumbo" type="submit">
                     {{ $t('auth.sign_in') }}
                 </button>
@@ -31,11 +32,19 @@
 </template>
 
 <script>
+    import Csrf from "../shared/CSRF";
+
     export default {
+        components: {Csrf},
         name: 'login-form',
         props: {
             email: { type: String, required: true },
         },
+        data: function () {
+            return {
+                X_CSRF_TOKEN: window.X_CSRF_TOKEN,
+            };
+        },
         methods: {
             updateEmail: function (event) {
                 this.$emit('update-email', event.target.value);
diff --git a/resources/assets/pterodactyl/scripts/components/shared/CSRF.vue b/resources/assets/pterodactyl/scripts/components/shared/CSRF.vue
new file mode 100644
index 000000000..b421a91da
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/components/shared/CSRF.vue
@@ -0,0 +1,14 @@
+<template>
+    <input type="hidden" name="_token" v-bind:value="X_CSRF_TOKEN" />
+</template>
+
+<script>
+    export default {
+        name: 'csrf',
+        data: function () {
+            return {
+                X_CSRF_TOKEN: window.X_CSRF_TOKEN,
+            };
+        },
+    }
+</script>