@axa-fr/react-oidc 6.25.6 → 7.0.0

package/README.md

@@ -1,13 +1,21 @@
 # @axa-fr/react-oidc
 
-[![Continuous Integration](https://github.com/AxaGuilDEv/react-oidc/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/AxaGuilDEv/react-oidc/actions/workflows/npm-publish.yml)
+[![Continuous Integration](https://github.com/AxaFrance/react-oidc/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/AxaFrance/react-oidc/actions/workflows/npm-publish.yml)
 [![Quality Gate](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-oidc&metric=alert_status)](https://sonarcloud.io/dashboard?id=AxaGuilDEv_react-oidc) [![Reliability](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-oidc&metric=reliability_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-oidc&metric=reliability_rating) [![Security](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-oidc&metric=security_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-oidc&metric=security_rating) [![Code Corevage](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-oidc&metric=coverage)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-oidc&metric=Coverage) [![Twitter](https://img.shields.io/twitter/follow/GuildDEvOpen?style=social)](https://twitter.com/intent/follow?screen_name=GuildDEvOpen)
 
-Try the demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/
+**@axa-fr/oidc-client** the lightest and securest library to manage authentication with OpenID Connect (OIDC) and OAuth2 protocol. It is compatible with all OIDC providers.
+**@axa-fr/oidc-client** is a pure javascript library. It works with any JavaScript framework or library.
 
-![Sample React OIDC](https://github.com/AxaGuilDEv/react-oidc/blob/master/docs/img/introduction.gif?raw=true)
+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**.
 
-A set of react components to make OIDC (OpenID Connect) client easy. It aim to simplify OAuth authentication between multiples providers.
+- 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://github.com/AxaFrance/react-oidc/blob/master/docs/img/introduction.gif?raw=true"
+     alt="Sample React Oicd"
+      />
+</p>
 
 - [About](#about)
 - [Getting Started](#getting-started)
@@ -20,22 +28,21 @@ A set of react components to make OIDC (OpenID Connect) client easy. It aim to s
 
 ## About
 
-Easy set up of OIDC for react.
-It is a real alternative to existing oidc-client libraries.
+@axa-fr/react is:
 
 - **Secure** :
-  - With the use of Service Worker, your tokens (refresh_token and access_token) are not accessible to the JavaScript client code (big protection against XSRF attacks)
-  - OIDC using client side Code Credential Grant with PKCE only
-- **Lightweight**
-- **Simple** :
+  - With the use of Service Worker, your tokens (refresh_token and access_token) are not accessible to the JavaScript client code (big protection against XSS attacks)
+  - OIDC using client side Code Credential Grant with pkce only
+- **Lightweight** : Unpacked Size on npm is **274 kB**
+- **Simple**
   - refresh_token and access_token are auto refreshed in background
-  - with the use of the Service Worker, you do not need to inject the access_token in every fetch, you have only to configure `OidcTrustedDomains.js` file
-- **No cookies problem** : You can disable silent signin (that internally use an iframe). For your information, your OIDC server should be in the same domain of your website in order to be able to send OIDC server cookies from your website via an internal IFRAME, else, you may encounter COOKIES problem.
+  - with the use of the Service Worker, you do not need to inject the access_token in every fetch, you have only to configure OidcTrustedDomains.js file
 - **Multiple Authentication** :
   - You can authenticate many times to the same provider with different scope (for example you can acquire a new 'payment' scope for a payment)
   - You can authenticate to multiple different providers inside the same SPA (single page application) website
 - **Flexible** :
-  - Work with Service Worker (more secure) and without for older browser (less secure)
+  - Work with Service Worker (more secure) and without for older browser (less secure).
+  - You can disable Service Worker if you want (but less secure) and just use SessionStorage or LocalStorage mode.
 
 ![](https://github.com/AxaGuilDEv/react-oidc/blob/master/docs/img/schema_pcke_client_side_with_service_worker.png?raw=true)
 
@@ -63,23 +70,32 @@ The only file you should edit is "OidcTrustedDomains.js".
 
 // Domains used by OIDC server must be also declared here
 const trustedDomains = {
-  default: ["https://demo.duendesoftware.com", "https://www.myapi.com/users"],
+  default: {
+    oidcDomains :["https://demo.duendesoftware.com"],
+    accessTokenDomains : ["https://www.myapi.com/users"]
+  },
 };
 
 // Service worker will continue to give access token to the JavaScript client
 // Ideal to hide refresh token from client JavaScript, but to retrieve access_token for some
 // scenarios which require it. For example, to send it via websocket connection.
-trustedDomains.config_show_access_token = { domains : ["https://demo.duendesoftware.com"], showAccessToken: true };
+trustedDomains.config_show_access_token = { 
+    oidcDomains :["https://demo.duendesoftware.com"],
+    accessTokenDomains : ["https://www.myapi.com/users"], 
+    showAccessToken: true 
+};
 
 ```
 
 ## Run The Demo
 
 ```sh
-git clone https://github.com/AxaGuilDEv/react-oidc.git
-cd react-oidc/packages/react
-npm install
-npm start
+git clone https://github.com/AxaFrance/oidc-client.git
+cd oidc-client
+pnpm install
+cd /examples/react-oidc-demo
+pnpm install
+pnpm start
 # then navigate to http://localhost:4200
 ```
 
@@ -111,7 +127,7 @@ const configuration = {
     window.location.origin + "/authentication/silent-callback",
   scope: "openid profile email api offline_access", // offline_access scope allow your client to retrieve the refresh_token
   authority: "https://demo.duendesoftware.com",
-  service_worker_relative_url: "/OidcServiceWorker.js",
+  service_worker_relative_url: "/OidcServiceWorker.js", // just comment that line to disable service worker mode
   service_worker_only: false,
 };
 
@@ -128,49 +144,50 @@ render(<App />, document.getElementById("root"));
 ```
 
 ```javascript
-const propTypes = {
-  loadingComponent: PropTypes.elementType, // you can inject your own loading component
-  sessionLostComponent: PropTypes.elementType, // you can inject your own session lost component
-  authenticating: PropTypes.elementType, // you can inject your own authenticationg component
-  authenticatingErrorComponent: PropTypes.elementType,
-  callbackSuccessComponent: PropTypes.elementType, // you can inject your own call back success component
-  serviceWorkerNotSupportedComponent: PropTypes.elementType, // you can inject your page that explain your require a more modern browser
-  onSessionLost: PropTypes.function, // If set "sessionLostComponent" is not displayed and onSessionLost callback is called instead
-  configuration: PropTypes.shape({
-    client_id: PropTypes.string.isRequired, // oidc client id
-    redirect_uri: PropTypes.string.isRequired, // oidc redirect url
-    silent_redirect_uri: PropTypes.string, // Optional activate silent-signin that use cookies between OIDC server and client javascript to restore sessions
-    silent_login_uri: PropTypes.string, // Optional, route that trigger the signin
-    silent_login_timeout: PropTypes.number, // Optional default is 12000 milliseconds
-    scope: PropTypes.string.isRequired, // oidc scope (you need to set "offline_access")
-    authority: PropTypes.string.isRequired,
-    storage: Storage, // Default sessionStorage, you can set localStorage but it is less secure to XSS attacks
-    authority_configuration: PropTypes.shape({
-      // Optional for providers that does not implement OIDC server auto discovery via a .wellknowurl
-      authorization_endpoint: PropTypes.string,
-      token_endpoint: PropTypes.string,
-      userinfo_endpoint: PropTypes.string,
-      end_session_endpoint: PropTypes.string,
-      revocation_endpoint: PropTypes.string,
-      check_session_iframe: PropTypes.string,
-      issuer: PropTypes.string,
-    }),
-    refresh_time_before_tokens_expiration_in_second: PropTypes.number, // default is 120 seconds
-    service_worker_relative_url: PropTypes.string,
-    service_worker_only: PropTypes.boolean, // default false
-    service_worker_convert_all_requests_to_cors: PropTypes.boolean, // force all requests that servie worker upgrades to have 'cors' mode. This allows setting authentication token on requests initialted by html parsing(e.g. img tags, download links etc).
-    extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that are send to the oidc server (more info: https://github.com/openid/AppAuth-JS)
-    token_request_extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that are send to the oidc server during token request (more info: https://github.com/openid/AppAuth-JS)
-    withCustomHistory: PropTypes.function, // Override history modification, return instance with replaceState(url, stateHistory) implemented (like History.replaceState())
-    authority_time_cache_wellknowurl_in_second: 60 * 60, // Time to cache in second of openid wellknowurl, default is 1 hour
-    authority_timeout_wellknowurl_in_millisecond: 10000, // Timeout in millisecond of openid wellknowurl, default is 10 seconds, then error is throwed
-    monitor_session: PropTypes.boolean, // Add OpenId monitor session, default is false (more information https://openid.net/specs/openid-connect-session-1_0.html), if you need to set it to true consider https://infi.nl/nieuws/spa-necromancy/
-    onLogoutFromAnotherTab: Function, // Optional, can be set to override the default behavior, this function is triggered when user with the same subject is logged out from another tab when session_monitor is active
-    onLogoutFromSameTab: Function, // Optional, can be set to override the default behavior, this function is triggered when user is logged out from same tab when session_monitor is active
-    token_renew_mode: PropTypes.string, // Optional, update tokens base on the selected token(s) lifetime: "access_token_or_id_token_invalid" (default), "access_token_invalid" , "id_token_invalid"
-    logout_tokens_to_invalidate : Array<string> // Optional tokens to invalidate during logout, default: ['access_token', 'refresh_token']
-  }).isRequired,
+const configuration = {
+  loadingComponent: ReactComponent, // you can inject your own loading component
+  sessionLostComponent: ReactComponent, // you can inject your own session lost component
+  authenticating: ReactComponent, // you can inject your own authenticating component
+  authenticatingErrorComponent: ReactComponent,
+  callbackSuccessComponent: ReactComponent, // you can inject your own call back success component
+  serviceWorkerNotSupportedComponent: ReactComponent, // you can inject your page that explains you require a more modern browser
+  onSessionLost: Function, // If set, "sessionLostComponent" is not displayed, and onSessionLost callback is called instead
+  configuration: {
+    client_id: String.isRequired, // oidc client id
+    redirect_uri: String.isRequired, // oidc redirect url
+    silent_redirect_uri: String, // Optional activate silent-signin that use cookies between OIDC server and client javascript to restore sessions
+    silent_login_uri: String, // Optional, route that triggers the signin
+    silent_login_timeout: Number, // Optional, default is 12000 milliseconds
+    scope: String.isRequired, // oidc scope (you need to set "offline_access")
+    authority: String.isRequired,
+    storage: Storage, // Default sessionStorage, you can set localStorage, but it is less secure against XSS attacks
+    authority_configuration: {
+      // Optional for providers that do not implement OIDC server auto-discovery via a .wellknown URL
+      authorization_endpoint: String,
+      token_endpoint: String,
+      userinfo_endpoint: String,
+      end_session_endpoint: String,
+      revocation_endpoint: String,
+      check_session_iframe: String,
+      issuer: String,
+    },
+    refresh_time_before_tokens_expiration_in_second: Number, // default is 120 seconds
+    service_worker_relative_url: String,
+    service_worker_only: Boolean, // default false
+    service_worker_convert_all_requests_to_cors: Boolean, // force all requests that service worker upgrades to have 'cors' mode. This allows setting an authentication token on requests initiated by HTML parsing (e.g., img tags, download links, etc.).
+    extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that is sent to the OIDC server (more info: https://github.com/openid/AppAuth-JS)
+    token_request_extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that is sent to the OIDC server during token request (more info: https://github.com/openid/AppAuth-JS)
+    withCustomHistory: Function, // Override history modification, return an instance with replaceState(url, stateHistory) implemented (like History.replaceState())
+    authority_time_cache_wellknowurl_in_second: 60 * 60, // Time to cache in seconds of the openid well-known URL, default is 1 hour
+    authority_timeout_wellknowurl_in_millisecond: 10000, // Timeout in milliseconds of the openid well-known URL, default is 10 seconds, then an error is thrown
+    monitor_session: Boolean, // Add OpenID monitor session, default is false (more information https://openid.net/specs/openid-connect-session-1_0.html), if you need to set it to true consider https://infi.nl/nieuws/spa-necromancy/
+    onLogoutFromAnotherTab: Function, // Optional, can be set to override the default behavior, this function is triggered when a user with the same subject is logged out from another tab when session_monitor is active
+    onLogoutFromSameTab: Function, // Optional, can be set to override the default behavior, this function is triggered when a user is logged out from the same tab when session_monitor is active
+    token_renew_mode: String, // Optional, update tokens based on the selected token(s) lifetime: "access_token_or_id_token_invalid" (default), "access_token_invalid", "id_token_invalid"
+    logout_tokens_to_invalidate: Array<string>, // Optional tokens to invalidate during logout, default: ['access_token', 'refresh_token']
+  }.isRequired,
 };
+
 ```
 
 ## How to consume
@@ -626,10 +643,3 @@ export const configurationIdentityServerWithHash = {
   service_worker_only: false,
 };
 ```
-
-## Service Worker Support
-
-- Firefox : tested on Firefox 98.0.2
-- Chrome/Edge : tested on version upper to 90
-- Opera : tested on version upper to 80
-- Safari : tested on Safari/605.1.15

package/dist/FetchToken.d.ts

@@ -1,4 +1,4 @@
-import { Fetch } from '@axa-fr/vanilla-oidc';
+import { Fetch } from '@axa-fr/oidc-client';
 export interface ComponentWithOidcFetchProps {
     fetch?: Fetch;
 }
@@ -6,4 +6,3 @@ export declare const withOidcFetch: (fetch?: Fetch, configurationName?: string)
 export declare const useOidcFetch: (fetch?: Fetch, configurationName?: string) => {
     fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
 };
-//# sourceMappingURL=FetchToken.d.ts.map

package/dist/OidcProvider.d.ts

@@ -1,8 +1,8 @@
-import { Fetch, OidcConfiguration, VanillaOidc } from '@axa-fr/vanilla-oidc';
+import { Fetch, OidcConfiguration, OidcClient } from '@axa-fr/oidc-client';
 import { ComponentType, FC, PropsWithChildren } from 'react';
 import { CustomHistory } from './core/routes/withRouter.js';
 export type oidcContext = {
-    (name?: string): VanillaOidc;
+    (name?: string): OidcClient;
 };
 export type OidcProviderProps = {
     callbackSuccessComponent?: ComponentType<any>;
@@ -27,4 +27,3 @@ export type OidcSessionProps = {
 };
 export declare const OidcProvider: FC<PropsWithChildren<OidcProviderProps>>;
 export default OidcProvider;
-//# sourceMappingURL=OidcProvider.d.ts.map

package/dist/OidcSecure.d.ts

@@ -1,4 +1,4 @@
-import { StringMap } from '@axa-fr/vanilla-oidc';
+import { StringMap } from '@axa-fr/oidc-client';
 import { FC, PropsWithChildren } from 'react';
 export type OidcSecureProps = {
     callbackPath?: string;
@@ -7,4 +7,3 @@ export type OidcSecureProps = {
 };
 export declare const OidcSecure: FC<PropsWithChildren<OidcSecureProps>>;
 export declare const withOidcSecure: (WrappedComponent: FC<PropsWithChildren<OidcSecureProps>>, callbackPath?: any, extras?: any, configurationName?: string) => (props: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=OidcSecure.d.ts.map

package/dist/ReactOidc.d.ts

@@ -1,4 +1,4 @@
-import { StringMap } from '@axa-fr/vanilla-oidc';
+import { StringMap } from '@axa-fr/oidc-client';
 export declare const useOidc: (configurationName?: string) => {
     login: (callbackPath?: string | undefined, extras?: StringMap, silentLoginOnly?: boolean) => Promise<unknown>;
     logout: (callbackPath?: string | null | undefined, extras?: StringMap) => Promise<void>;
@@ -15,4 +15,3 @@ export type OidcIdToken = {
     idTokenPayload?: any;
 };
 export declare const useOidcIdToken: (configurationName?: string) => OidcIdToken;
-//# sourceMappingURL=ReactOidc.d.ts.map

package/dist/User.d.ts

@@ -1,4 +1,4 @@
-import { type OidcUserInfo } from '@axa-fr/vanilla-oidc';
+import { type OidcUserInfo } from '@axa-fr/oidc-client';
 export declare enum OidcUserStatus {
     Unauthenticated = "Unauthenticated",
     Loading = "Loading user",
@@ -14,4 +14,3 @@ export declare const useOidcUser: <T extends OidcUserInfo = OidcUserInfo>(config
     oidcUserLoadingState: OidcUserStatus;
     reloadOidcUser: () => void;
 };
-//# sourceMappingURL=User.d.ts.map

package/dist/core/default-component/AuthenticateError.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const AuthenticatingError: ComponentType<any>;
 export default AuthenticatingError;
-//# sourceMappingURL=AuthenticateError.component.d.ts.map

package/dist/core/default-component/Authenticating.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const Authenticating: ComponentType<any>;
 export default Authenticating;
-//# sourceMappingURL=Authenticating.component.d.ts.map

package/dist/core/default-component/Callback.component.d.ts

@@ -2,4 +2,3 @@ import { ComponentType } from 'react';
 export declare const CallBackSuccess: ComponentType<any>;
 declare const CallbackManager: ComponentType<any>;
 export default CallbackManager;
-//# sourceMappingURL=Callback.component.d.ts.map

package/dist/core/default-component/Loading.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const Loading: ComponentType<any>;
 export default Loading;
-//# sourceMappingURL=Loading.component.d.ts.map

package/dist/core/default-component/ServiceWorkerNotSupported.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const ServiceWorkerNotSupported: ComponentType<any>;
 export default ServiceWorkerNotSupported;
-//# sourceMappingURL=ServiceWorkerNotSupported.component.d.ts.map

package/dist/core/default-component/SessionLost.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 export declare const SessionLost: ComponentType<any>;
 export default SessionLost;
-//# sourceMappingURL=SessionLost.component.d.ts.map

package/dist/core/default-component/SilentCallback.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const SilentCallbackManager: ComponentType<any>;
 export default SilentCallbackManager;
-//# sourceMappingURL=SilentCallback.component.d.ts.map

package/dist/core/default-component/SilentLogin.component.d.ts

@@ -1,4 +1,3 @@
 import { ComponentType } from 'react';
 declare const SilentLogin: ComponentType<any>;
 export default SilentLogin;
-//# sourceMappingURL=SilentLogin.component.d.ts.map

package/dist/core/default-component/index.d.ts

@@ -4,4 +4,3 @@ export { default as Callback, CallBackSuccess } from './Callback.component.js';
 export { default as Loading } from './Loading.component.js';
 export { default as ServiceWorkerNotSupported } from './ServiceWorkerNotSupported.component.js';
 export { default as SessionLost } from './SessionLost.component.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/core/routes/OidcRoutes.d.ts

@@ -12,4 +12,3 @@ type OidcRoutesProps = {
 };
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<OidcRoutesProps>>;
 export default _default;
-//# sourceMappingURL=OidcRoutes.d.ts.map

package/dist/core/routes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/src/core/routes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/routes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/core/routes/withRouter.d.ts

@@ -17,4 +17,3 @@ export type CustomHistory = {
 };
 export declare const getCustomHistory: () => CustomHistory;
 export {};
-//# sourceMappingURL=withRouter.d.ts.map

package/dist/index.d.ts

@@ -3,6 +3,5 @@ export { OidcProvider } from './OidcProvider.js';
 export { OidcSecure, withOidcSecure } from './OidcSecure.js';
 export { useOidc, useOidcAccessToken, useOidcIdToken } from './ReactOidc.js';
 export { OidcUserStatus, useOidcUser } from './User.js';
-export type { AuthorityConfiguration, Fetch, OidcConfiguration, StringMap, } from '@axa-fr/vanilla-oidc';
-export { type OidcUserInfo, TokenRenewMode } from '@axa-fr/vanilla-oidc';
-//# sourceMappingURL=index.d.ts.map
+export type { AuthorityConfiguration, Fetch, OidcConfiguration, StringMap, } from '@axa-fr/oidc-client';
+export { type OidcUserInfo, TokenRenewMode } from '@axa-fr/oidc-client';