fix(demo): better demo (#1480)

* feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo * feat(demo): better demo
AxaFrance · Nov 5, 2024 · 08a21f8 · 08a21f8
1 parent 301acfe
commit 08a21f8
Show file tree

Hide file tree

Showing 14 changed files with 170 additions and 225 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/examples/oidc-client-demo/public/OidcTrustedDomains.js b/examples/oidc-client-demo/public/OidcTrustedDomains.js
diff --git a/examples/react-oidc-demo/public/OidcTrustedDomains.js b/examples/react-oidc-demo/public/OidcTrustedDomains.js
diff --git a/examples/react-oidc-demo/public/staticwebapp.config.json b/examples/react-oidc-demo/public/staticwebapp.config.json
@@ -4,7 +4,7 @@
     "exclude": ["*.{svg,png,jpg,gif}", "*.{css,scss}", "*.js"]
   },
   "globalHeaders": {
-    "content-security-policy": "script-src 'self'",
+    "content-security-policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://demo.duendesoftware.com; media-src 'self'; object-src 'none'; frame-src 'self' https://demo.duendesoftware.com; base-uri 'self'; form-action 'self'; frame-ancestors 'self' https://demo.duendesoftware.com; block-all-mixed-content; upgrade-insecure-requests;",
     "Access-Control-Allow-Origin": "*",
     "X-Frame-Options": "SAMEORIGIN",
     "X-Permitted-Cross-Domain-Policies": "none",

diff --git a/examples/react-oidc-demo/src/App.tsx b/examples/react-oidc-demo/src/App.tsx
@@ -2,6 +2,7 @@ import { OidcProvider, withOidcSecure } from '@axa-fr/react-oidc';
 import React, { useReducer } from 'react';
 import { BrowserRouter, NavLink, Route, Routes } from 'react-router-dom';
 
+import CodeExecutor from './CodeExecutor';
 import { configurationIdentityServer } from './configurations.js';
 import { FetchUserHoc, FetchUserHook } from './FetchUser.js';
 import { Home } from './Home.js';
@@ -111,6 +112,7 @@ function App() {
           </div>
         </BrowserRouter>
       </OidcProvider>
+
       <div className="container-fluid mt-3">
         <div className="card">
           <div className="card-body">
@@ -129,6 +131,7 @@ function App() {
           </div>
         </div>
       </div>
+      <CodeExecutor />
     </>
   );
 }

diff --git a/examples/react-oidc-demo/src/CodeExecutor.tsx b/examples/react-oidc-demo/src/CodeExecutor.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+const CodeExecutor: React.FC = () => {
+  const [code, setCode] = useState<string>('');
+  const [output, setOutput] = useState<string>('');
+
+  const executeCode = () => {
+    try {
+      const result = eval(`
+                (function() {
+                    ${code}
+                })()
+            `);
+      setOutput(String(result));
+    } catch (error) {
+      setOutput(`Erreur : ${(error as Error).message}`);
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+      <h2>Execute your JavaScript Code</h2>
+      <textarea
+        value={code}
+        onChange={e => setCode(e.target.value)}
+        placeholder="Write your JavaScript code here..."
+        rows={10}
+        style={{ width: '100%', marginBottom: '10px' }}
+      ></textarea>
+      <button onClick={executeCode} style={{ padding: '10px 20px' }}>
+        Execute the code
+      </button>
+      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f5f5f5' }}>
+        <h3>Result :</h3>
+        <pre>{output}</pre>
+      </div>
+    </div>
+  );
+};
+
+export default CodeExecutor;
diff --git a/examples/react-oidc-demo/src/FetchUser.tsx b/examples/react-oidc-demo/src/FetchUser.tsx
@@ -50,7 +50,11 @@ export const FetchUserHoc = () => (
 );
 
 export const FetchUserHook = (props: any) => {
-  const { fetch } = useOidcFetch(window.fetch, props.configurationName);
+  const { fetch } = useOidcFetch(
+    window.fetch,
+    props.configurationName,
+    props.demonstratingProofOfPossession ?? false,
+  );
   return (
     <OidcSecure configurationName={props.configurationName}>
       <DisplayUserInfo fetch={fetch} />

diff --git a/examples/react-oidc-demo/src/Home.tsx b/examples/react-oidc-demo/src/Home.tsx
@@ -1,36 +1,23 @@
-import { useOidc, useOidcUser } from '@axa-fr/react-oidc';
-import React, { useEffect } from 'react';
+import { useOidc } from '@axa-fr/react-oidc';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-const createIframeHack = () => {
-  const iframe = document.createElement('iframe');
-  const html = '<body>Foo<script>alert("youhou");</script></body>';
-  iframe.srcdoc = html;
-  document.body.appendChild(iframe);
-};
-
 export const Home = () => {
   const { login, logout, renewTokens, isAuthenticated } = useOidc();
-  const { oidcUser, oidcUserLoadingState } = useOidcUser();
-  console.log(oidcUser, oidcUserLoadingState);
   const navigate = useNavigate();
 
   const navigateProfile = () => {
     navigate('/profile');
   };
 
-  useEffect(() => {
-    createIframeHack();
-  }, []);
-
   return (
     <div className="container-fluid mt-3">
       <div className="card">
         <div className="card-body">
           <h5 className="card-title">Home</h5>
           <p className="card-text">
             React Demo Application protected by OpenId Connect. More info on about oidc on{' '}
-            <a href="https://github.com/AxaGuilDEv/react-oidc">GitHub @axa-fr/react-oidc</a>
+            <a href="https://github.com/AXAFrance/oidc-client">GitHub @axa-fr/react-oidc</a>
           </p>
           {!isAuthenticated && (
             <p>

diff --git a/examples/react-oidc-demo/src/MultiAuth.tsx b/examples/react-oidc-demo/src/MultiAuth.tsx
@@ -56,6 +56,7 @@ const MultiAuth = ({ configurationName, handleConfigurationChange }) => {
           </p>
           <select value={configurationName} onChange={handleConfigurationChange}>
             <option value="config_classic">config_classic</option>
+            <option value="config_with_monitor_session">config_with_monitor_session</option>
             <option value="config_without_refresh_token">config_without_refresh_token</option>
             <option value="config_without_silent_login">config_without_silent_login</option>
             <option value="config_without_refresh_token_silent_login">
@@ -151,6 +152,12 @@ export const MultiAuthContainer = () => {
       silent_redirect_uri: '',
       scope: 'openid profile email api offline_access',
     },
+    config_with_monitor_session: {
+      ...configurationIdentityServer,
+      redirect_uri: callBack,
+      silent_redirect_uri,
+      monitor_session: true,
+    },
     config_without_refresh_token_silent_login: {
       ...configurationIdentityServer,
       redirect_uri: callBack,
@@ -258,7 +265,7 @@ export const MultiAuthContainer = () => {
 const DisplayAccessToken = ({ configurationName }) => {
   const { accessToken, accessTokenPayload } = useOidcAccessToken(configurationName);
   const { idTokenPayload } = useOidcIdToken(configurationName);
-
+  const demonstratingProofOfPossession = configurationName == 'config_with_dpop';
   if (!accessToken) {
     return <p>you are not authentified</p>;
   }
@@ -282,7 +289,10 @@ const DisplayAccessToken = ({ configurationName }) => {
           )}
         </div>
       </div>
-      <FetchUserHook configurationName={configurationName} />
+      <FetchUserHook
+        configurationName={configurationName}
+        demonstratingProofOfPossession={demonstratingProofOfPossession}
+      />
     </>
   );
 };
diff --git a/examples/react-oidc-demo/src/Profile.tsx b/examples/react-oidc-demo/src/Profile.tsx
@@ -16,8 +16,6 @@ interface OidcUserRoleInfo extends OidcUserInfo {
 const DisplayUserInfo = () => {
   const { oidcUser, oidcUserLoadingState, reloadOidcUser } = useOidcUser<OidcUserRoleInfo>();
 
-  console.log('oidcUser', oidcUser);
-  console.log('oidcUserLoadingState', oidcUserLoadingState);
   switch (oidcUserLoadingState) {
     case OidcUserStatus.Loading:
       return <p>User Information are loading</p>;

diff --git a/examples/react-oidc-demo/src/configurations.ts b/examples/react-oidc-demo/src/configurations.ts
@@ -4,38 +4,13 @@ export const configurationIdentityServer = {
   client_id: 'interactive.public.short',
   redirect_uri: window.location.origin + '/authentication/callback',
   silent_redirect_uri: window.location.origin + '/authentication/silent-callback',
-  // silent_login_uri: window.location.origin + '/authentication/silent-login',
   scope: 'openid profile email api offline_access',
   authority: 'https://demo.duendesoftware.com',
-  // authority_time_cache_wellknowurl_in_second: 60* 60,
   refresh_time_before_tokens_expiration_in_second: 40,
+  token_renew_mode: TokenRenewMode.access_token_invalid,
+  token_automatic_renew_mode: TokenAutomaticRenewMode.AutomaticBeforeTokenExpiration,
   service_worker_relative_url: '/OidcServiceWorker.js',
   service_worker_only: false,
-  // storage: localStorage,
-  // silent_login_timeout: 3333000
-  // monitor_session: true,
-  extras: { youhou_demo: 'youhou' },
-  token_renew_mode: TokenRenewMode.access_token_invalid,
-  token_automatic_renew_mode: TokenAutomaticRenewMode.AutomaticOnlyWhenFetchExecuted,
-  demonstrating_proof_of_possession: false,
-  preload_user_info: true,
-};
-
-export const configurationIdentityServer1 = {
-  client_id: 'balosar-blazo',
-  redirect_uri: window.location.origin + '/authentication/callback',
-  silent_redirect_uri: window.location.origin + '/authentication/silent-callback',
-  // silent_login_uri: window.location.origin + '/authentication/silent-login',
-  scope: 'openid offline_access profile email',
-  authority: 'https://localhost:44310',
-  // authority_time_cache_wellknowurl_in_second: 60* 60,
-  refresh_time_before_tokens_expiration_in_second: 40,
-  // service_worker_relative_url: '/OidcServiceWorker.js',
-  service_worker_only: false,
-  // storage: localStorage,
-  // silent_login_timeout: 3333000
-  // monitor_session: true,
-  token_renew_mode: TokenRenewMode.access_token_invalid,
 };
 
 export const configurationIdentityServerWithHash = {
@@ -71,16 +46,6 @@ export const configurationIdentityServerWithoutDiscovery = {
   service_worker_only: false,
 };
 
-export const configurationAuth0 = {
-  client_id: 'xGZxEAJhzlkuQUlWl90y1ntIX-0UDWHx',
-  redirect_uri: window.location.origin + '/callback',
-  scope: 'openid profile email api offline_access',
-  authority: 'https://kdhttps.auth0.com',
-  refresh_time_before_tokens_expiration_in_second: 10,
-  service_worker_relative_url: '/OidcServiceWorker.js',
-  service_worker_only: false,
-};
-
 export const configurationGoogle = {
   client_id: '908893276222-f2drloh56ll0g99md38lv2k810d0nk0p.apps.googleusercontent.com',
   redirect_uri: `${window.location.origin}/multi-auth/callback-google`,

diff --git a/packages/oidc-client/public/OidcTrustedDomains.js b/packages/oidc-client/public/OidcTrustedDomains.js
@@ -7,6 +7,7 @@
 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'],

diff --git a/packages/oidc-client/src/fetch.ts b/packages/oidc-client/src/fetch.ts
@@ -43,7 +43,7 @@ export const fetchWithTokens =
             url.toString(),
             optionTmp.method,
           );
-        headers.set('Authorization', `PoP ${accessToken}`);
+        headers.set('Authorization', `DPoP ${accessToken}`);
         headers.set('DPoP', demonstrationOdProofOfPossession);
       } else {
         headers.set('Authorization', `Bearer ${accessToken}`);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml