feat(demo): better demo

AxaFrance · Nov 3, 2024 · 85835ac · 85835ac
1 parent 301acfe
commit 85835ac
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 25 deletions.
diff --git a/examples/oidc-client-demo/src/index.tsx b/examples/oidc-client-demo/src/index.tsx
@@ -128,7 +128,7 @@ export const execute = () => {
   const href = window.location.href;
 
   const vanillaOidc = OidcClient.getOrCreate(() => fetch)(configuration);
-
+    
   // @ts-ignore
   function logout() {
     vanillaOidc.logoutAsync();

diff --git a/examples/react-oidc-demo/package.json b/examples/react-oidc-demo/package.json
@@ -19,6 +19,7 @@
     "postinstall": "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public"
   },
   "dependencies": {
+    "@axa-fr/oidc-client": "workspace:*",
     "@axa-fr/react-oidc": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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": "script-src 'self' 'unsafe-eval'  ",
     "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
@@ -7,6 +7,7 @@ import { FetchUserHoc, FetchUserHook } from './FetchUser.js';
 import { Home } from './Home.js';
 import { MultiAuthContainer } from './MultiAuth.js';
 import { Profile, SecureProfile } from './Profile.js';
+import CodeExecutor from "./CodeExecutor";
 
 const OidcSecureHoc = withOidcSecure(Profile);
 
@@ -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,44 @@
+import { OidcClient } from '@axa-fr/oidc-client';
+import React, { useState } from 'react';
+
+// @ts-ignore
+window.OidcClient = OidcClient;
+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/Home.tsx b/examples/react-oidc-demo/src/Home.tsx
@@ -2,35 +2,23 @@ import { useOidc, useOidcUser } from '@axa-fr/react-oidc';
 import React, { useEffect } 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/Profile.tsx b/examples/react-oidc-demo/src/Profile.tsx
@@ -15,9 +15,7 @@ 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
@@ -16,7 +16,7 @@ export const configurationIdentityServer = {
   // monitor_session: true,
   extras: { youhou_demo: 'youhou' },
   token_renew_mode: TokenRenewMode.access_token_invalid,
-  token_automatic_renew_mode: TokenAutomaticRenewMode.AutomaticOnlyWhenFetchExecuted,
+  token_automatic_renew_mode: TokenAutomaticRenewMode.AutomaticBeforeTokenExpiration,
   demonstrating_proof_of_possession: false,
   preload_user_info: true,
 };

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