You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: admin/authentication-support.md
+82-55Lines changed: 82 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,24 @@
1
1
# Authentication Support
2
2
3
3
API Platform Admin delegates the authentication support to React Admin.
4
-
Refer to [the chapter dedicated to authentication in the React Admin documentation](https://marmelab.com/react-admin/Authentication.html)
5
-
for more information.
4
+
5
+
Refer to the [Auth Provider Setup](https://marmelab.com/react-admin/Authentication.html) documentation for more information.
6
+
7
+
**Tip:** Once you have set up the authentication, you can also configure React Admin to perform client-side Authorization checks. Refer to the [Authorization](https://marmelab.com/react-admin/Permissions.html) documentation for more information.
6
8
7
9
## HydraAdmin
8
10
9
-
The authentication layer for [HydraAdmin component](https://api-platform.com/docs/admin/components/#hydra)
10
-
consists of a few parts, which need to be integrated together.
11
+
Enabling authentication support for [`<HydraAdmin>` component](./components.md#hydra) consists of a few parts, which need to be integrated together.
12
+
13
+
In the following steps, we will see how to:
14
+
15
+
- Make authenticated requests to the API (i.e. include the `Authorization` header)
16
+
- Redirect users to the login page if they are not authenticated
17
+
- Clear expired tokens when encountering unauthorized `401` response
11
18
12
-
### Authentication
19
+
### Make Authenticated Requests
13
20
14
-
Add the Bearer token from `localStorage` to request headers.
21
+
First, we need to implement a `getHeaders` function, that will add the Bearer token from `localStorage`(if there is one) to the `Authorization` header.
15
22
16
23
```typescript
17
24
const getHeaders = () =>
@@ -20,9 +27,13 @@ const getHeaders = () =>
20
27
: {};
21
28
```
22
29
23
-
Extend the Hydra fetch function with custom headers for authentication.
30
+
Then, extend the Hydra `fetch` function to use the `getHeaders` function to add the `Authorization` header to the requests.
Redirect users to a `/login` path, if no token is available in the `localStorage`.
47
+
Then, we'll create a `<RedirectToLogin>` component, that will redirect users to the `/login` route if no token is available in the `localStorage`, and call the dataProvider's `introspect` function otherwise.
Extend the `parseHydraDocumentaion` function from the [API Doc Parser library](https://github.com/api-platform/api-doc-parser)
53
-
to handle the documentation parsing. Customize it to clear
54
-
expired tokens when encountering unauthorized `401` response.
66
+
Now, we will extend the `parseHydraDocumentaion` function (imported from the [@api-platform/api-doc-parser](https://github.com/api-platform/api-doc-parser) library).
67
+
68
+
We will customize it to clear expired tokens when encountering unauthorized `401` response.
Initialize the hydra data provider with custom headers and the documentation parser.
94
+
Now, we can initialize the Hydra data provider with the custom `fetchHydra` (with custom headers) and `apiDocumentationParser` functions created earlier.
For the implementation of the admin component, you can find a working example in the [API Platform's demo application](https://github.com/api-platform/demo/blob/4.0/pwa/components/admin/Admin.tsx).
151
172
152
173
## OpenApiAdmin
153
174
154
-
This section explains how to set up and customize the [OpenApiAdmin component](https://api-platform.com/docs/admin/components/#openapi) authentication layer.
155
-
It covers:
156
-
* Creating a custom HTTP Client
157
-
* Data and rest data provider configuration
158
-
* Implementation of an auth provider
175
+
This section explains how to set up and customize the [`<OpenApiAdmin>` component](./components.md/#openapi) to enable authentication.
159
176
160
-
### Data Provider & HTTP Client
177
+
In the following steps, we will see how to:
161
178
162
-
Create a custom HTTP client to add authentication tokens to request headers.
163
-
Configure the `openApiDataProvider`, and
164
-
inject the custom HTTP client into the [Simple REST Data Provider for React-Admin](https://github.com/Serind/ra-data-simple-rest).
179
+
- Make authenticated requests to the API (i.e. include the `Authorization` header)
180
+
- Implement an authProvider to redirect users to the login page if they are not authenticated, and clear expired tokens when encountering unauthorized `401` response
181
+
182
+
### Making Authenticated Requests
183
+
184
+
First, we need to create a custom `httpClient` to add authentication tokens (via the the `Authorization` HTTP header) to requests.
185
+
186
+
We will then configure `openApiDataProvider` to use [`ra-data-simple-rest`](https://github.com/marmelab/react-admin/blob/master/packages/ra-data-simple-rest/README.md), a simple REST dataProvider for React Admin, and make it use the `httpClient` we created earlier.
> The `simpleRestProvider` provider expect the API to include a `Content-Range` header in the response.
189
-
> You can find more about the header syntax in the [Mozilla’s MDN documentation: Content-Range](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Range).
190
-
>
191
-
> The `getAccessToken` function retrieves the JWT token stored in the browser.
212
+
**Note:** The `simpleRestProvider` provider expect the API to include a `Content-Range` header in the response. You can find more about the header syntax in the [Mozilla’s MDN documentation: Content-Range](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Range).
213
+
214
+
**Note:** The `getAccessToken` function retrieves the JWT token stored in the browser's localStorage. Replace it with your own logic in case you don't store the token that way.
192
215
193
-
### Authentication and Authorization
216
+
### Creating The AuthProvider
194
217
195
-
Create and export an `authProvider` object that handles authentication and authorization logic.
218
+
Now let's create and export an `authProvider` object that handles authentication and authorization logic.
0 commit comments