the auth provider has been improved and the README was extended

README.md

@@ -1,13 +1,15 @@
-# tfp-frontend-poc
+# TFP Frontend PoC
 
 ## Installation
 
+**Requirements**:
+ * [Node.js](https://nodejs.org/en) v20+
+ * [pnpm](https://pnpm.io/) v9+
+
 Install the application dependencies by running:
 
 ```sh
-npm install
-# or
-yarn install
+pnpm i
 ```
 
 ## Development
@@ -15,33 +17,28 @@ yarn install
 Start the application in development mode by running:
 
 ```sh
-npm run dev
-# or
-yarn dev
+pnpm dev
 ```
 
-## Production
-
-Build the application in production mode by running:
-
-```sh
-npm run build
-# or
-yarn build
-```
-
-## DataProvider
-
-The included data provider use [ra-data-simple-rest](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest). It fits REST APIs using simple GET parameters for filters and sorting. This is the dialect used for instance in [FakeRest](https://github.com/marmelab/FakeRest).
-
-You'll find an `.env` file at the project root that includes a `VITE_JSON_SERVER_URL` variable. Set it to the URL of your backend.
-
 ## Authentication
 
-The included auth provider should only be used for development and test purposes.
-You'll find a `users.json` file in the `src` directory that includes the users you can use.
+`src/authProvider.ts` -> get the token in authProvider.login method
 
-You can sign in to the application with the following usernames and password:
-- janedoe / password
-- johndoe / password
+The user/pass can be anything. The token will come from `http://localhost:8080/atsp-idp/token` and it will forwarded
+to the UI that can handle from this point.
 
+## DataProvider
+
+`src/admin-core/data-provider-extension.ts` -> Here is the user's list entry point but it can be rewrote to anything.
+This is not working from this because authentication and CORS error.
+
+I think, the authentication access_token is not enought.* I do not know what is the purpose of the three token
+ * `id_token`
+ * `access_token`
+ * & the `refresh_token`
+
+It seems, the backend always wanted to redirect to somewhere when authentication or authorization happens. This purpose is not normal for a REST API.
+A **REST API** back-end have to communicate through JSON only. Any redirection have to be handled by the front-end. In my opinion the Keycloak/oauth communication
+should be "masked" by the backend.
+
+The cleanest solution is that; on the REST api should have an entry point for authentication that can be used by front-end. After that, the authorization happens w/ the token only.

src/admin-core/hooks/useQueryEngine.js

@@ -31,7 +31,7 @@ export const useQueryEngine = () => {
             : {
               headers: {
                 ...defaultHeaders,
-                Authorization: `Bearer ${localStorage.getItem('token')}`,
+                Authorization: `Bearer ${localStorage.getItem('user')}`,
                 ...(options?.headers ? { ...options.headers } : {}),
               },
             }),
@@ -50,7 +50,7 @@ export const useQueryEngine = () => {
              * @see https://stackoverflow.com/a/71392989/3111514
              */
             // 'Content-Type': 'multipart/form-data',
-            Authorization: `Bearer ${localStorage.getItem('token')}`,
+            Authorization: `Bearer ${localStorage.getItem('user')}`,
           },
           ...options,
         }),
@@ -66,7 +66,7 @@ export const useQueryEngine = () => {
               headers: {
                 'Content-Type': 'application/json',
                 ...(options?.headers ? { headers: options.headers } : {}),
-                ...(withAuth ? { Authorization: `Bearer ${localStorage.getItem('token')}` } : {}),
+                ...(withAuth ? { Authorization: `Bearer ${localStorage.getItem('user')}` } : {}),
               },
             }),
           ...(options?.body ? { body: options.body } : {}),

src/authProvider.ts

@@ -36,9 +36,9 @@ export const authProvider: AuthProvider = {
       );
     }
 
-    const { access_token } = await response.json();
-    localStorage.setItem("token", access_token);
-    localStorage.setItem("user", access_token);
+    const { refresh_token } = await response.json();
+    localStorage.setItem("token", refresh_token);
+    localStorage.setItem("user", refresh_token);
 
     return Promise.resolve();
   },