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,27 +1,10 @@
 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 }) => {
-    let response;
+    const responseLogin = await login(username, password);
 
-    try {
+    if (responseLogin.status < 200 || responseLogin.status >= 300) {
-      response = await fetch(
-        new Request(`${import.meta.env.VITE_AUTH_URL}/atsp-idp/token`, {
-          method: "POST",
-          credentials: "include",
-          body: new URLSearchParams({
-            grant_type: "authorization_code",
-            code: "code",
-            client_id: "client_id",
-          }),
-          headers: new Headers({
-            "Content-Type": "application/x-www-form-urlencoded",
-          }),
-        }),
-      );
-    } catch (_error) {
       return Promise.reject(
         new HttpError("Unauthorized", 401, {
           message: "Invalid username or password",
@@ -29,15 +12,11 @@ export const authProvider: AuthProvider = {
       );
     }
 
-    if (response.status < 200 || response.status >= 300) {
+    const responseCSRF = await csrf();
-      return Promise.reject(
-        new HttpError("Unauthorized", 401, {
-          message: "Invalid username or password",
-        }),
-      );
-    }
 
-    const { access_token } = await response.json();
+    console.log(responseCSRF);
+
+    const { access_token } = await responseLogin.json();
     localStorage.setItem("user", access_token);
     localStorage.setItem("token", access_token);
 
@@ -61,4 +40,57 @@ export const authProvider: AuthProvider = {
   },
 };
 
-export default authProvider;
+// @ts-ignore
+const login = async (username, password) => {
+  let response;
+
+  try {
+    response = await fetch(
+      new Request(`${import.meta.env.VITE_AUTH_URL}/atsp-idp/token`, {
+        method: "POST",
+        credentials: "include",
+        body: new URLSearchParams({
+          grant_type: "authorization_code",
+          code: "code",
+          client_id: "client_id",
+        }),
+        headers: new Headers({
+          "Content-Type": "application/x-www-form-urlencoded",
+        }),
+      }),
+    );
+  } catch (_error) {
+    return Promise.reject(
+      new HttpError("Unauthorized", 401, {
+        message: "Invalid username or password",
+      }),
+    );
+  }
+
+  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",
+      }),
+    );
+  }
+
+  return response;
+};