diff --git a/README.md b/README.md index 9781a67..70c3d49 100644 --- a/README.md +++ b/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. diff --git a/src/admin-components/index.js b/src/admin-components/index.ts similarity index 100% rename from src/admin-components/index.js rename to src/admin-components/index.ts diff --git a/src/admin-core/data-provider-extension.tsx b/src/admin-core/data-provider-extension.ts similarity index 100% rename from src/admin-core/data-provider-extension.tsx rename to src/admin-core/data-provider-extension.ts diff --git a/src/admin-core/hooks/useQueryEngine.js b/src/admin-core/hooks/useQueryEngine.js index 4b00c10..c1d1197 100644 --- a/src/admin-core/hooks/useQueryEngine.js +++ b/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 } : {}), diff --git a/src/admin-core/index.js b/src/admin-core/index.ts similarity index 100% rename from src/admin-core/index.js rename to src/admin-core/index.ts diff --git a/src/authProvider.ts b/src/authProvider.ts index b405813..6988dce 100644 --- a/src/authProvider.ts +++ b/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(); },