@axa-fr/react-oidc 7.22.15 → 7.22.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -18
- package/package.json +3 -3
- package/src/FetchToken.tsx +1 -1
package/README.md
CHANGED
|
@@ -8,14 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
We provide a wrapper **@axa-fr/react-oidc** for **React** (compatible next.js) and we expect soon to provide one for **Vue**, **Angular** and **Svelte**.
|
|
10
10
|
|
|
11
|
-
- Try the
|
|
11
|
+
- Try the React demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/ (most advanced)
|
|
12
12
|
- Try the pure javascript demo at https://icy-glacier-004ab4303.2.azurestaticapps.net/
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
alt="Sample React Oicd"
|
|
17
|
-
/>
|
|
18
|
-
</p>
|
|
14
|
+
|
|
15
|
+
<img src="https://raw.githubusercontent.com/AxaFrance/oidc-client/main/docs/img/introduction.gif" alt="Sample React Oicd"/>
|
|
19
16
|
|
|
20
17
|
- [About](#about)
|
|
21
18
|
- [Getting Started](#getting-started)
|
|
@@ -139,7 +136,7 @@ pnpm start
|
|
|
139
136
|
|
|
140
137
|
### Application startup
|
|
141
138
|
|
|
142
|
-
The library is router agnostic and use native History API.
|
|
139
|
+
The library is router agnostic and will use native History API.
|
|
143
140
|
|
|
144
141
|
The default routes used internally :
|
|
145
142
|
|
|
@@ -238,8 +235,8 @@ const configuration = {
|
|
|
238
235
|
demonstrating_proof_of_possession_configuration: DemonstratingProofOfPossessionConfiguration // Optional, more details bellow
|
|
239
236
|
};
|
|
240
237
|
|
|
241
|
-
|
|
242
|
-
|
|
238
|
+
interface DemonstratingProofOfPossessionConfiguration
|
|
239
|
+
{
|
|
243
240
|
generateKeyAlgorithm: RsaHashedKeyGenParams | EcKeyGenParams,
|
|
244
241
|
digestAlgorithm: AlgorithmIdentifier,
|
|
245
242
|
importKeyAlgorithm: AlgorithmIdentifier | RsaHashedImportParams | EcKeyImportParams | HmacImportParams | AesKeyAlgorithm,
|
|
@@ -336,7 +333,7 @@ import { OidcSecure } from "@axa-fr/react-oidc";
|
|
|
336
333
|
|
|
337
334
|
const AdminSecure = () => (
|
|
338
335
|
<OidcSecure>
|
|
339
|
-
<h1>My sub component</h1>
|
|
336
|
+
<h1>My sub component</h1>
|
|
340
337
|
</OidcSecure>
|
|
341
338
|
);
|
|
342
339
|
|
|
@@ -344,9 +341,9 @@ const AdminSecure = () => (
|
|
|
344
341
|
export default AdminSecure;
|
|
345
342
|
```
|
|
346
343
|
|
|
347
|
-
## How to secure a component
|
|
344
|
+
## How to secure a component: HOC method
|
|
348
345
|
|
|
349
|
-
|
|
346
|
+
`withOidcSecure` will act the same as `OidcSecure`,it will also trigger authentication in case the user is not authenticated.
|
|
350
347
|
|
|
351
348
|
```javascript
|
|
352
349
|
import React from "react";
|
|
@@ -368,7 +365,7 @@ const Routes = () => (
|
|
|
368
365
|
export default Routes;
|
|
369
366
|
```
|
|
370
367
|
|
|
371
|
-
## How to get "Access Token"
|
|
368
|
+
## How to get "Access Token": Hook method
|
|
372
369
|
|
|
373
370
|
```javascript
|
|
374
371
|
import { useOidcAccessToken } from "@axa-fr/react-oidc";
|
|
@@ -399,7 +396,7 @@ const DisplayAccessToken = () => {
|
|
|
399
396
|
};
|
|
400
397
|
```
|
|
401
398
|
|
|
402
|
-
## How to get IDToken
|
|
399
|
+
## How to get IDToken: Hook method
|
|
403
400
|
|
|
404
401
|
```javascript
|
|
405
402
|
import { useOidcIdToken } from "@axa-fr/react-oidc";
|
|
@@ -425,7 +422,7 @@ const DisplayIdToken = () => {
|
|
|
425
422
|
};
|
|
426
423
|
```
|
|
427
424
|
|
|
428
|
-
## How to get User Information
|
|
425
|
+
## How to get User Information: Hook method
|
|
429
426
|
|
|
430
427
|
```javascript
|
|
431
428
|
import { useOidcUser, UserStatus } from "@axa-fr/react-oidc";
|
|
@@ -453,10 +450,10 @@ const DisplayUserInfo = () => {
|
|
|
453
450
|
};
|
|
454
451
|
```
|
|
455
452
|
|
|
456
|
-
## How to get a fetch that inject Access_Token
|
|
453
|
+
## How to get a fetch that inject Access_Token: Hook method
|
|
457
454
|
|
|
458
|
-
If
|
|
459
|
-
This
|
|
455
|
+
If you are not using the service worker. The Fetch function needs to send AccessToken.
|
|
456
|
+
This hook will give you a wrapped fetch that adds the access token for you.
|
|
460
457
|
|
|
461
458
|
```javascript
|
|
462
459
|
import React, { useEffect, useState } from "react";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axa-fr/react-oidc",
|
|
3
|
-
"version": "7.22.
|
|
3
|
+
"version": "7.22.17",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.umd.cjs",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"lint": "eslint src"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@axa-fr/oidc-client-service-worker": "7.22.
|
|
44
|
-
"@axa-fr/oidc-client": "7.22.
|
|
43
|
+
"@axa-fr/oidc-client-service-worker": "7.22.17",
|
|
44
|
+
"@axa-fr/oidc-client": "7.22.17"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "^17.0.0 || ^18.0.0"
|
package/src/FetchToken.tsx
CHANGED
|
@@ -7,7 +7,7 @@ export interface ComponentWithOidcFetchProps {
|
|
|
7
7
|
|
|
8
8
|
const defaultConfigurationName = 'default';
|
|
9
9
|
|
|
10
|
-
const fetchWithToken = (fetch: Fetch, getOidcWithConfigurationName: () => OidcClient | null, demonstrating_proof_of_possession=false) => async (...params: Parameters<Fetch>) => {
|
|
10
|
+
const fetchWithToken = (fetch: Fetch, getOidcWithConfigurationName: () => OidcClient | null, demonstrating_proof_of_possession: boolean = false) => async (...params: Parameters<Fetch>) => {
|
|
11
11
|
const oidc = getOidcWithConfigurationName();
|
|
12
12
|
const newFetch = oidc.fetchWithTokens(fetch, demonstrating_proof_of_possession);
|
|
13
13
|
return await newFetch(...params);
|