@axa-fr/react-oidc 7.22.16 → 7.22.18

package/README.md

@@ -8,14 +8,11 @@
 
 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**.
 
-- Try the react demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/ (most advanced)
+- Try the React demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/ (most advanced)
 - Try the pure javascript demo at https://icy-glacier-004ab4303.2.azurestaticapps.net/
 
-<p align="center">
-    <img src="https://raw.githubusercontent.com/AxaFrance/oidc-client/main/docs/img/introduction.gif"
-     alt="Sample React Oicd"
-      />
-</p>
+
+<img src="https://raw.githubusercontent.com/AxaFrance/oidc-client/main/docs/img/introduction.gif" alt="Sample React Oicd"/>
 
 - [About](#about)
 - [Getting Started](#getting-started)
@@ -120,6 +117,12 @@ trustedDomains.config_with_dpop = {
  }*/
 };
 
+// Setting allowMultiTabLogin to true will enable storing login-specific parameters (state, nonce, code verifier)
+// separately for each tab. This will prevent errors when logins are initiated from multiple tabs.
+trustedDomains.config_multi_tab_login = {
+  domains: ["https://demo.duendesoftware.com"],
+  allowMultiTabLogin: true
+};
 
 ```
 
@@ -139,7 +142,7 @@ pnpm start
 
 ### Application startup
 
-The library is router agnostic and use native History API.
+The library is router agnostic and will use native History API.
 
 The default routes used internally :
 
@@ -238,8 +241,8 @@ const configuration = {
 demonstrating_proof_of_possession_configuration: DemonstratingProofOfPossessionConfiguration // Optional, more details bellow
 };
 
-
-interface DemonstratingProofOfPossessionConfiguration {
+interface DemonstratingProofOfPossessionConfiguration 
+{
   generateKeyAlgorithm:  RsaHashedKeyGenParams | EcKeyGenParams,
           digestAlgorithm: AlgorithmIdentifier,
           importKeyAlgorithm: AlgorithmIdentifier | RsaHashedImportParams | EcKeyImportParams | HmacImportParams | AesKeyAlgorithm,
@@ -336,7 +339,7 @@ import { OidcSecure } from "@axa-fr/react-oidc";
 
 const AdminSecure = () => (
   <OidcSecure>
-    <h1>My sub component</h1>}
+    <h1>My sub component</h1>
   </OidcSecure>
 );
 
@@ -344,9 +347,9 @@ const AdminSecure = () => (
 export default AdminSecure;
 ```
 
-## How to secure a component : HOC method
+## How to secure a component: HOC method
 
-"withOidcSecure" act the same as "OidcSecure" it also trigger authentication in case user is not authenticated.
+`withOidcSecure` will act the same as `OidcSecure`,it will also trigger authentication in case the user is not authenticated.
 
 ```javascript
 import React from "react";
@@ -368,7 +371,7 @@ const Routes = () => (
 export default Routes;
 ```
 
-## How to get "Access Token" : Hook method
+## How to get "Access Token": Hook method
 
 ```javascript
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
@@ -399,7 +402,7 @@ const DisplayAccessToken = () => {
 };
 ```
 
-## How to get IDToken : Hook method
+## How to get IDToken: Hook method
 
 ```javascript
 import { useOidcIdToken } from "@axa-fr/react-oidc";
@@ -425,7 +428,7 @@ const DisplayIdToken = () => {
 };
 ```
 
-## How to get User Information : Hook method
+## How to get User Information: Hook method
 
 ```javascript
 import { useOidcUser, UserStatus } from "@axa-fr/react-oidc";
@@ -453,10 +456,10 @@ const DisplayUserInfo = () => {
 };
 ```
 
-## How to get a fetch that inject Access_Token : Hook method
+## How to get a fetch that inject Access_Token: Hook method
 
-If your are not using the service worker. Fetch function need to send AccessToken.
-This Hook give you a wrapped fetch that add the access token for you.
+If you are not using the service worker. The Fetch function needs to send AccessToken.
+This hook will give you a wrapped fetch that adds the access token for you.
 
 ```javascript
 import React, { useEffect, useState } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/react-oidc",
-  "version": "7.22.16",
+  "version": "7.22.18",
   "private": false,
   "type": "module",
   "main": "./dist/index.umd.cjs",
@@ -40,8 +40,8 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@axa-fr/oidc-client-service-worker": "7.22.16",
-    "@axa-fr/oidc-client": "7.22.16"
+    "@axa-fr/oidc-client-service-worker": "7.22.18",
+    "@axa-fr/oidc-client": "7.22.18"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/src/FetchToken.tsx

@@ -7,7 +7,7 @@ export interface ComponentWithOidcFetchProps {
 
 const defaultConfigurationName = 'default';
 
-const fetchWithToken = (fetch: Fetch, getOidcWithConfigurationName: () => OidcClient | null, demonstrating_proof_of_possession=false) => async (...params: Parameters<Fetch>) => {
+const fetchWithToken = (fetch: Fetch, getOidcWithConfigurationName: () => OidcClient | null, demonstrating_proof_of_possession: boolean = false) => async (...params: Parameters<Fetch>) => {
   const oidc = getOidcWithConfigurationName();
   const newFetch = oidc.fetchWithTokens(fetch, demonstrating_proof_of_possession);
   return await newFetch(...params);