try to get the CSRF token - w/o success & error 406

.env

@@ -1,2 +1,3 @@
 VITE_AUTH_URL=http://localhost:8080
+VITE_SECURITY_REST_URL=http://localhost:8081/security
 VITE_GATEWAY_REST_URL=http://localhost:8081/core/api/admin

.eslintrc.cjs

@@ -1,21 +0,0 @@
-module.exports = {
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-};

src/App.tsx

@@ -1,6 +1,6 @@
 import { Admin, Resource } from "react-admin";
 import { Layout } from "./Layout";
-import { AdminDashboard, PersonList, PersonShow } from "@admin";
+import { AdminDashboard, PersonList, PersonShow, PersonEdit } from '@admin';
 import { authProvider, dataProvider } from "@core";
 
 export const App = () => (
@@ -15,6 +15,7 @@ export const App = () => (
       options={{ label: "Users" }}
       list={PersonList}
       show={PersonShow}
+      edit={PersonEdit}
     />
   </Admin>
 );

src/admin-components/resources/person/edit.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  BooleanField, BooleanInput,
+  DateInput,
+  Edit,
+  Labeled,
+  SimpleForm,
+  TextInput,
+} from 'react-admin';
+import { Box, Card, CardContent, CardHeader, Stack } from "@mui/material";
+
+export const PersonEdit = () => {
+  return (
+    <Edit>
+      <SimpleForm>
+        <Card sx={{ width: "100%", m: 1 }}>
+          <CardHeader title="General info" />
+          <CardContent>
+            <Stack
+              sx={{
+                flexWrap: "wrap",
+                justifyContent: "flex-start",
+                alignItems: "center",
+              }}
+              direction="row"
+              columnGap={5}
+              rowGap={2}
+            >
+              <Labeled label="Name">
+                <Stack direction="row" gap={1}>
+                  <TextInput sx={{ textTransform: "" }} source="title" />
+                  <TextInput source="firstName" />
+                  <TextInput source="lastName" />
+                </Stack>
+              </Labeled>
+              <TextInput source="email" fullWidth="false" />
+              <BooleanInput
+                source="userAccess"
+                label="Access to the Platform"
+              />
+              <Labeled label="Position">
+                <TextInput source="jobPosition" />
+              </Labeled>
+              <Labeled label="Phone number">
+                <TextInput source="phoneNumber" />
+              </Labeled>
+              <Labeled label="Mobile number">
+                <TextInput source="mobileNumber" />
+              </Labeled>
+              <Box />
+            </Stack>
+          </CardContent>
+        </Card>
+        <Card sx={{ width: "100%", m: 1 }}>
+          <CardHeader title="Platform info" />
+          <CardContent>
+            <Stack
+              sx={{ justifyContent: "flex-start", alignItems: "center" }}
+              direction="row"
+              gap={5}
+            >
+              <Labeled label="Last changes date">
+                <DateInput source="updateDate" />
+              </Labeled>
+              <Labeled label="User Access Active From">
+                <DateInput source="userAccessFrom" />
+              </Labeled>
+              <Labeled label="User Access Active To">
+                <DateInput source="userAccessTo" />
+              </Labeled>
+            </Stack>
+          </CardContent>
+        </Card>
+      </SimpleForm>
+    </Edit>
+  );
+};

src/admin-components/resources/person/index.ts

@@ -1,3 +1,4 @@
 export { PersonList } from './list.tsx';
 export { PersonShow } from './show.tsx';
+export { PersonEdit } from './edit.tsx';
 export * from './components';

src/admin-core/authProvider.ts

@@ -1,9 +1,47 @@
 import { AuthProvider, HttpError } from "react-admin";
 
 export const authProvider: AuthProvider = {
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   login: async ({ username, password }) => {
+    const responseLogin = await login(username, password);
+
+    if (responseLogin.status < 200 || responseLogin.status >= 300) {
+      return Promise.reject(
+        new HttpError("Unauthorized", 401, {
+          message: "Invalid username or password",
+        }),
+      );
+    }
+
+    const responseCSRF = await csrf();
+
+    console.log(responseCSRF);
+
+    const { access_token } = await responseLogin.json();
+    localStorage.setItem("user", access_token);
+    localStorage.setItem("token", access_token);
+
+    return Promise.resolve();
+  },
+  logout: () => {
+    localStorage.removeItem("user");
+    return Promise.resolve();
+  },
+  checkError: () => Promise.resolve(),
+  checkAuth: () =>
+    localStorage.getItem("user") ? Promise.resolve() : Promise.reject(),
+  getPermissions: () => {
+    return Promise.resolve(undefined);
+  },
+  getIdentity: () => {
+    const persistedUser = localStorage.getItem("user");
+    const user = persistedUser ? JSON.parse(persistedUser) : null;
+
+    return Promise.resolve(user);
+  },
+};
+
+// @ts-ignore
+const login = async (username, password) => {
   let response;
 
   try {
@@ -29,7 +67,24 @@ export const authProvider: AuthProvider = {
     );
   }
 
-    if (response.status < 200 || response.status >= 300) {
+  return response;
+};
+
+const csrf = async () => {
+  let response;
+
+  try {
+    response = await fetch(
+      new Request(`${import.meta.env.VITE_SECURITY_REST_URL}/csrf`, {
+        method: "GET",
+        credentials: "include",
+        headers: new Headers({
+          Accept: "Accept application/json, text/plain, */*",
+          Priority: "u=4",
+        }),
+      }),
+    );
+  } catch (_error) {
     return Promise.reject(
       new HttpError("Unauthorized", 401, {
         message: "Invalid username or password",
@@ -37,28 +92,5 @@ export const authProvider: AuthProvider = {
     );
   }
 
-    const { access_token } = await response.json();
-    localStorage.setItem("user", access_token);
-    localStorage.setItem("token", access_token);
-
-    return Promise.resolve();
-  },
-  logout: () => {
-    localStorage.removeItem("user");
-    return Promise.resolve();
-  },
-  checkError: () => Promise.resolve(),
-  checkAuth: () =>
-    localStorage.getItem("user") ? Promise.resolve() : Promise.reject(),
-  getPermissions: () => {
-    return Promise.resolve(undefined);
-  },
-  getIdentity: () => {
-    const persistedUser = localStorage.getItem("user");
-    const user = persistedUser ? JSON.parse(persistedUser) : null;
-
-    return Promise.resolve(user);
-  },
+  return response;
 };
-
-export default authProvider;