+ @axa-fr/oidc-client is one of the securest way to Authenticate. +
+
+
+ @axa-fr/oidc-client is one of the securest way to Authenticate.
+
+
+
+ Service Worker lifetime drawback.
+
+
+
+ @axa-fr/oidc-client is the simplest and cheapest.
+
+
+
+
+
+ The service worker catch access_token and refresh_token that will never be accessible to the client.
+
User Information are loading
; + case OidcUserStatus.Unauthenticated: + returnyou are not authenticated
; + case OidcUserStatus.LoadingError: + returnFail to load user information
; + default: + return ( +{JSON.stringify(oidcUser)}
+you are not authenticated
; + } + return ( ++ Please consider to configure the ServiceWorker in order to protect your application from + XSRF attacks. "access_token" and "refresh_token" will never be + accessible from your client side javascript. +
+ {Access Token: {JSON.stringify(accessToken)}
} + {accessTokenPayload != null && ( +Access Token Payload: {JSON.stringify(accessTokenPayload)}
+ )} +you are not authenticated
; + } + + return ( +IdToken: {JSON.stringify(idToken)}
} + {idTokenPayload != null && ( +IdToken Payload: {JSON.stringify(idTokenPayload)}
+ )} ++ OpenId Connect, OIDC client is free under licence MIT. Available on + github axa oidc-client +
+ + + + + diff --git a/examples/oidc-client-demo/package.json b/examples/oidc-client-demo/package.json new file mode 100644 index 000000000..861d153c9 --- /dev/null +++ b/examples/oidc-client-demo/package.json @@ -0,0 +1,34 @@ +{ + "name": "vanilla-demo", + "version": "1.0.0", + "private": true, + "dependencies": { + "@axa-fr/oidc-client": "workspace:~", + "typescript": "5.7.3", + "web-vitals": "4.2.4" + }, + "scripts": { + "start": "vite", + "build": "vite build", + "serve": "vite preview", + "clean": "rimraf dist", + "postinstall": "node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@types/node": "20.11.26", + "cross-env": "^7.0.3", + "vite": "5.1.6" + } +} diff --git a/examples/oidc-client-demo/public/OidcTrustedDomains.js b/examples/oidc-client-demo/public/OidcTrustedDomains.js new file mode 100644 index 000000000..656ff28f4 --- /dev/null +++ b/examples/oidc-client-demo/public/OidcTrustedDomains.js @@ -0,0 +1,32 @@ +// Add bellow trusted domains, access tokens will automatically injected to be send to +// trusted domain can also be a path like https://www.myapi.com/users, +// then all subroute like https://www.myapi.com/useers/1 will be authorized to send access_token to. +// Domains used by OIDC server must be also declared here +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const trustedDomains = { + default: ['https://demo.duendesoftware.com', 'https://kdhttps.auth0.com'], + config_classic: ['https://demo.duendesoftware.com'], + config_with_monitor_session: ['https://demo.duendesoftware.com'], + config_without_silent_login: ['https://demo.duendesoftware.com'], + config_without_refresh_token: ['https://demo.duendesoftware.com'], + config_without_refresh_token_silent_login: ['https://demo.duendesoftware.com'], + config_google: [ + 'https://oauth2.googleapis.com', + 'https://openidconnect.googleapis.com', + 'https://accounts.google.com', + ], + config_with_hash: ['https://demo.duendesoftware.com'], +}; +// 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, +}; +// This example defines domains used by OIDC server separately from domains to which access tokens will be injected. +trustedDomains.config_separate_oidc_access_token_domains = { + oidcDomains: ['https://demo.duendesoftware.com'], + accessTokenDomains: ['https://myapi'], +}; +//# sourceMappingURL=OidcTrustedDomains.js.map diff --git a/packages/context/public/favicon.ico b/examples/oidc-client-demo/public/favicon.ico similarity index 100% rename from packages/context/public/favicon.ico rename to examples/oidc-client-demo/public/favicon.ico diff --git a/packages/context/public/logo192.png b/examples/oidc-client-demo/public/logo192.png similarity index 100% rename from packages/context/public/logo192.png rename to examples/oidc-client-demo/public/logo192.png diff --git a/packages/context/public/logo512.png b/examples/oidc-client-demo/public/logo512.png similarity index 100% rename from packages/context/public/logo512.png rename to examples/oidc-client-demo/public/logo512.png diff --git a/packages/context/public/manifest.json b/examples/oidc-client-demo/public/manifest.json similarity index 100% rename from packages/context/public/manifest.json rename to examples/oidc-client-demo/public/manifest.json diff --git a/examples/oidc-client-demo/public/robots.txt b/examples/oidc-client-demo/public/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/examples/oidc-client-demo/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/examples/oidc-client-demo/public/staticwebapp.config.json b/examples/oidc-client-demo/public/staticwebapp.config.json new file mode 100644 index 000000000..ee582c8f9 --- /dev/null +++ b/examples/oidc-client-demo/public/staticwebapp.config.json @@ -0,0 +1,15 @@ +{ + "navigationFallback": { + "rewrite": "index.html", + "exclude": ["*.{svg,png,jpg,gif}", "*.{css,scss}", "*.js"] + }, + "globalHeaders": { + "content-security-policy": "script-src 'self' 'unsafe-eval'", + "Access-Control-Allow-Origin": "*", + "X-Frame-Options": "SAMEORIGIN", + "X-Permitted-Cross-Domain-Policies": "none", + "Referrer-Policy": "no-referrer", + "X-Content-Type-Options": "nosniff", + "Permissions-Policy": "autoplay=()" + } +} diff --git a/examples/oidc-client-demo/src/index.tsx b/examples/oidc-client-demo/src/index.tsx new file mode 100644 index 000000000..e23e1c11a --- /dev/null +++ b/examples/oidc-client-demo/src/index.tsx @@ -0,0 +1,194 @@ +import { OidcClient } from '@axa-fr/oidc-client'; + +class Router { + getCustomHistory() { + const generateKey = () => Math.random().toString(36).substr(2, 6); + + // Exported only for test + type WindowInternal = Window & { + CustomEvent?: newGame, let's try to make an XSS attacks to retrieve some secure tokens !
+Service Worker mode is not magic https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#payload-new-flow + So let try to hack it ! +
+Service Worker mode is secure if your follow 2 following rules:
++ Add CSP header to forbid to write dynamic iframe with javascript dynamic inside. + You should never add "unsafe-inline" in your CSP header. +
+ Content-Security-Policy: script-src 'self'; // Secure ++
To help you for this game, we set up 'unsafe-eval' in the CSP header to allow the eval function to be executed and allow you to hack the application like a big XSS attack.
++ Content-Security-Policy: script-src 'self' 'unsafe-eval'; ++ + + + +
${JSON.stringify(vanillaOidc.tokens, null, '\t')}
+ ${JSON.stringify(tokens, null, '\t')}
+ React Demo Application protected by OpenId Connect
+ {!isAuthenticated && ( + + )} + {isAuthenticated && ( + + )} + {isAuthenticated && ( + + )} +you are not authentified
; + } + return ( ++ Please consider to configure the ServiceWorker in order to protect your application from + XSRF attacks. ""access_token" and "refresh_token" will never be accessible from your + client side javascript. +
+ {{JSON.stringify(accessToken)}
} + {accessTokenPayload != null && ( +{JSON.stringify(accessTokenPayload)}
+ )} +you are not authentified
; + } + + return ( +{JSON.stringify(idToken)}
} + {idTokenPayload != null &&{JSON.stringify(idTokenPayload)}
} +User Information are loading
; + case UserStatus.Unauthenticated: + returnyou are not authenticated
; + case UserStatus.LoadingError: + returnFail to load user information
; + default: + return ( +{JSON.stringify(oidcUser)}
+{JSON.stringify(oidcUser)}
} +{JSON.stringify(oidcUser)}
} +Loading
; +const AuthenticatingError = () =>Authenticating error
; +const Authenticating = () =>Authenticating
; +const SessionLost = () =>Session Lost
; +const ServiceWorkerNotSupported = () =>Not supported
; +const CallBackSuccess = () =>Success
; + +//const [isSessionLost, setIsSessionLost] = useState(false); + +//const onSessionLost = ()=>{ +// setIsSessionLost(true); +//} + +const App = () => ( ++ {dateFormated} {e.name}: {JSON.stringify(e.data)} +
+ ); + })} +{output}
+ {JSON.stringify(oidcUser)}
} ++ React Demo Application protected by OpenId Connect. More info on about oidc on{' '} + GitHub @axa-fr/react-oidc +
+ {!isAuthenticated && ( ++ +
+ )} + {isAuthenticated && ( ++ +
+ )} + {isAuthenticated && ( ++ +
+ )} + {isAuthenticated && ( ++ +
+ )} + {isAuthenticated && ( ++ +
+ )} + {isAuthenticated && ( ++ +
+ )} ++ +
+
+ React Demo Application protected by OpenId Connect with MultipleAuthentication.
+
+ For example, config_1 can have other sensitive scope, config_2 does not ask for the
+ "offline_access" so it does not retrieve the most sensitive token
+ "refresh_token" for very sensitive operation, it retrive only access_token
+ valid for a small amout of time.
+
+ {dateFormated} {e.name}: {JSON.stringify(e.data)} +
+ ); + })} +you are not authentified
; + } + return ( + <> ++ Please consider to configure the ServiceWorker in order to protect your application from + XSRF attacks. "access_token" and "refresh_token" will never be + accessible from your client side javascript. +
+ {Access Token: {JSON.stringify(accessToken)}
} + {accessTokenPayload != null && ( +Access Token Payload: {JSON.stringify(accessTokenPayload)}
+ )} +Access Token Payload: {JSON.stringify(idTokenPayload)}
+ )} +User Information are loading
; + case OidcUserStatus.Unauthenticated: + returnyou are not authenticated
; + case OidcUserStatus.LoadingError: + returnFail to load user information
; + default: + return ( +{JSON.stringify(oidcUser)}
++ +
++ +
+ )} +you are not authenticated
; + } + return ( ++ Please consider to configure the ServiceWorker in order to protect your application from + XSRF attacks. "access_token" and "refresh_token" will never be + accessible from your client side javascript. +
+ {Access Token: {JSON.stringify(accessToken)}
} + {accessTokenPayload != null && ( +Access Token Payload: {JSON.stringify(accessTokenPayload)}
+ )} +you are not authenticated
; + } + + return ( +IdToken: {JSON.stringify(idToken)}
} + {idTokenPayload != null && ( +IdToken Payload: {JSON.stringify(idTokenPayload)}
+ )} +An error occurred during authentication.
+You will be redirected to the login page.
+You will be redirected to your application.
++ Your browser is not secure enough to make authentication work. Try updating your browser or + use a newer browser. +
++ Your session has expired. Please re-authenticate. +
+ + +
-
-
- A set of react components to make Oidc (OpenID Connect) client easy. It aim to simplify OAuth authentication between multiples providers. -
- -- [About](#about) -- [Getting Started](#getting-started) -- [Run The Demo](#run-the-demo) -- [Examples](#examples) -# About - -Easy set up of OIDC for react and use the new react context api as state management. -It use AppAuthJS behind the scene. - -- **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 -- **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) -- **Multiple Authentification** : - - You can authenticate many times to the same provider with different scope (for exemple 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 whithout for older browser (less secure) - -
-
-
- The service worker catch access_token and refresh_token that will never be accessible to the client.
-
React Demo Application protected by OpenId Connect
- {!isAuthenticated && } - {isAuthenticated && } -you are not authentified
- } - return ( -Please consider to configure the ServiceWorker in order to protect your application from XSRF attacks. ""access_token" and "refresh_token" will never be accessible from your client side javascript.
- {{JSON.stringify(accessToken)}
} - {accessTokenPayload != null &&{JSON.stringify(accessTokenPayload)}
} -you are not authentified
- } - - return ( -{JSON.stringify(idToken)}
} - {idTokenPayload != null &&{JSON.stringify(idTokenPayload)}
} -User Information are loading
; - case UserStatus.Unauthenticated: - returnyou are not authenticated
; - case UserStatus.LoadingError: - returnFail to load user information
; - default: - return ( -{JSON.stringify(oidcUser)}
-{JSON.stringify(oidcUser)}
} -React Demo Application protected by OpenId Connect. More info on about oidc on GitHub
- {!isAuthenticated && } - {isAuthenticated && } -React Demo Application protected by OpenId Connect with MultipleAUthentication.
-
For example, config_1 can have other sensitive scope, config_2 does not ask for the "offline_access" so it does not retrieve the most sensitive token "refresh_token" for very sensitive operation, it retrive only access_token valid for a small amout of time.
you are not authentified
- } - return ( -Please consider to configure the ServiceWorker in order to protect your application from XSRF attacks. "access_token" and "refresh_token" will never be accessible from your client side javascript.
- {Access Token: {JSON.stringify(accessToken)}
} - {accessTokenPayload != null &&Access Token Payload: {JSON.stringify(accessTokenPayload)}
} -User Information are loading
; - case UserStatus.Unauthenticated: - returnyou are not authenticated
; - case UserStatus.LoadingError: - returnFail to load user information
; - default: - return ( -{JSON.stringify(oidcUser)}
-you are not authenticated
- } - return ( -Please consider to configure the ServiceWorker in order to protect your application from XSRF attacks. "access_token" and "refresh_token" will never be accessible from your client side javascript.
- {Access Token: {JSON.stringify(accessToken)}
} - {accessTokenPayload != null &&Access Token Payload: {JSON.stringify(accessTokenPayload)}
} -you are not authenticated
- } - - return ( -IdToken: {JSON.stringify(idToken)}
} - {idTokenPayload != null &&IdToken Payload: {JSON.stringify(idTokenPayload)}
} -Une erreur est survenu lors de l'authentification
-Vous allez être redirigé sur la page de login
-Vous allez être redirigé sur votre application.
-Votre navigateur n'est pas assez sécurisé pour faire fonctionner l'authentification. Essayer de mettre à jour votre navigateur ou utilisera un navigateur plus récent.
-- Votre session est expirée. Veuillez vous ré-authentifier. -
-
+
+
${JSON.stringify(tokens, null, '\t')}
+ React Demo Application protected by OpenId Connect
+ {!isAuthenticated && ( + + )} + {isAuthenticated && ( + + )} + {isAuthenticated && ( + + )} +you are not authentified
; + } + return ( ++ Please consider to configure the ServiceWorker in order to protect your application from + XSRF attacks. ""access_token" and "refresh_token" will never be accessible from your + client side javascript. +
+ {{JSON.stringify(accessToken)}
} + {accessTokenPayload != null && ( +{JSON.stringify(accessTokenPayload)}
+ )} +you are not authentified
; + } + + return ( +{JSON.stringify(idToken)}
} + {idTokenPayload != null &&{JSON.stringify(idTokenPayload)}
} +User Information are loading
; + case UserStatus.Unauthenticated: + returnyou are not authenticated
; + case UserStatus.LoadingError: + returnFail to load user information
; + default: + return ( +{JSON.stringify(oidcUser)}
+{JSON.stringify(oidcUser)}
} +{JSON.stringify(oidcUser)}
} +Loading
; +const AuthenticatingError = () =>Authenticating error
; +const Authenticating = () =>Authenticating
; +const SessionLost = () =>Session Lost
; +const ServiceWorkerNotSupported = () =>Not supported
; +const CallBackSuccess = () =>Success
; + +//const [isSessionLost, setIsSessionLost] = useState(false); + +//const onSessionLost = ()=>{ +// setIsSessionLost(true); +//} + +const App = () => ( +An error occurred during authentication.
+You will be redirected to the login page.
+You will be redirected to your application.
++ Your browser is not secure enough to make authentication work. Try updating your browser or + use a newer browser. +
++ Your session has expired. Please re-authenticate. +
+
-
-
- A set of react components to make Oidc (OpenID Connect) client easy. It aim to simplify OAuth authentication between multiples providers. -
- -- [About](#about) -- [Getting Started](#getting-started) -- [Run The Demo](#run-the-demo) -- [How It Works](#how-it-works) -- Packages - - [`@axa-fr/react-oidc-context`](./packages/context#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Freact-oidc-context) - - [`@axa-fr/vanilla-oidc`](./packages/vanilla#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Fvanilla-oidc) - - [`@axa-fr/react-oidc-context-fetch`](./packages/context-fetch#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Freact-oidc-context-fetch) **Deprecated in v4** - - [`@axa-fr/react-oidc-redux`](./packages/redux#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Freact-oidc-redux) **Deprecated in v4 : use react-oidc-context which works with redux and in fact does not use any react context** - - [`@axa-fr/react-oidc-redux-fetch`](./packages/redux-fetch#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Freact-oidc-redux-fetch) **Deprecated in v4** - - [`@axa-fr/react-oidc-fetch-observable`](./packages/fetch-observable#readme.md) [](https://badge.fury.io/js/%40axa-fr%2Freact-oidc-fetch-observable) **Deprecated in v4** -- [Migrations](#migrations) -- [Contribute](#contribute) - -## About - -These libraries is used to manage client authentication. - -- **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 -- **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) -- **Multiple Authentification** : - - You can authenticate many times to the same provider with different scope (for exemple 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 whithout for older browser (less secure) - -
-
-
- The service worker catch access_token and refresh_token that will never be accessible to the client.
-
you are not authentified
- } - - return ( -{JSON.stringify(idToken)}
} - {idTokenPayload != null &&{JSON.stringify(idTokenPayload)}
} -User Information are loading
; - case UserStatus.Unauthenticated: - returnyou are not authenticated
; - case UserStatus.LoadingError: - returnFail to load user information
; - default: - return ( -{JSON.stringify(oidcUser)}
-