все скрипты для фронта страницы с формой аутентификации

resources/js/components/MagicLogin.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { getCsrfToken } from './../services/getCsrfService';
+
+function MagicLogin ()
+{
+  //Состояние с введенным логином
+  const [userLogin, setUserLogin] = useState<string>('');
+
+  return (
+    <div id="login-container">
+      <div id="login-container__magic-name">Magic</div>
+      <div id="login-container__form">
+        <form action="login" method="POST" autoComplete="on">
+          <input 
+            type="hidden" 
+            name="_token" 
+            value={getCsrfToken()}
+          />
+          <input name="_auth_login" type="text" onChange={ (e) => setUserLogin(e.target.value) } placeholder="Логин" required/>
+          <input name="_auth_password" type="password" placeholder="Пароль" required/>
+          <button type="submit" onClick={ () => {
+            //При сабмите кладем логин в локалсторадж для того, чтобы при вызове api ендпоинтов передавать его в заголовках
+            //гаврилов
+            //ТОЧНО ЛИ ЭТО НУЖНО? МОЖЕТ, ЛУЧШЕ ВСЕ API ЕНДПОИНТЫ ПЕРЕПИСАТ ПОД ВЫЗОВ WEB РОУТОВ?
+            localStorage.setItem('magic_auth_login', userLogin);
+            } }>Вход</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default MagicLogin;

resources/js/magicLogin.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import MagicLogin from './components/MagicLogin.tsx';
+import React from 'react';
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(<MagicLogin />);

resources/js/services/getCsrfService.tsx

@@ -0,0 +1,20 @@
+/**
+ * Сервис для полуения csrt токена для размещения в формах
+ * @date 24.07.2025
+ * @author dgavrilov
+ */
+
+export const getCsrfToken = ():string => {
+  const METATAG:HTMLElement|null = document.querySelector('meta[name="csrf-token"]');
+
+  if (!METATAG) {
+    return '';
+  }
+
+  const CSRFTOKEN:string|null = METATAG.getAttribute('content');
+  if (!CSRFTOKEN) {
+    return '';
+  }
+
+  return CSRFTOKEN;
+}