♻️ no more fixed tokens in demos (#768)

* 🔧 fix demo tokens * ♻️ random tokens in simple demos too * 📗 changeset
jupyter-book · Sep 5, 2024 · 68ba668 · 68ba668
1 parent 508c70b
commit 68ba668
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 46 deletions.
diff --git a/.changeset/strange-readers-hang.md b/.changeset/strange-readers-hang.md
@@ -0,0 +1,7 @@
+---
+'demo-react': minor
+'demo-core': minor
+'demo-simple': minor
+---
+
+Removing `test-secret` as a suggested token and enabling unique (timestamp based) tokens per user "session"
diff --git a/apps/demo-core/src/app.ts b/apps/demo-core/src/app.ts
@@ -23,6 +23,7 @@ class App {
   options: Record<string, any>;
   serverType: ServerType;
   exampleType: ExampleType;
+  token: string;
 
   localMessageEl: HTMLDivElement;
   connectEl: HTMLDivElement;
@@ -42,6 +43,7 @@ class App {
   thebeErrorEl: HTMLElement;
 
   outputEl: HTMLElement;
+  tokenEl: HTMLElement;
 
   events: ThebeEvents;
   server: ThebeServer | null;
@@ -67,6 +69,7 @@ class App {
     this.thebeErrorEl = document.getElementById('thebe-error') as HTMLSpanElement;
 
     this.outputEl = document.querySelector('[data-output]') as HTMLDivElement;
+    this.tokenEl = document.getElementById('local-token') as HTMLInputElement;
 
     this.serverType = 'local';
     this.exampleType = 'basic';
@@ -76,6 +79,8 @@ class App {
     this.server = null;
     this.session = null;
     this.notebook = null;
+    this.token = shortId();
+    options.local.serverSettings.token = this.token;
 
     this.setupUI();
   }
@@ -127,6 +132,8 @@ class App {
       this.connect();
     };
 
+    this.tokenEl.innerText = this.token;
+
     this.typeLocalEl.onclick = this.handleServerTypeChange.bind(this);
     this.typeLiteEl.onclick = this.handleServerTypeChange.bind(this);
     this.typeBinderEl.onclick = this.handleServerTypeChange.bind(this);

diff --git a/apps/demo-core/src/setup.ts b/apps/demo-core/src/setup.ts
@@ -192,7 +192,7 @@ for i in tqdm(range(100)):
   ],
 };
 
-export const options = {
+export const options: any = {
   lite: {
     requestKernel: true,
     kernelOptions: {
@@ -203,11 +203,11 @@ export const options = {
   local: {
     kernelOptions: {
       name: 'python3',
-      serverSettings: {
-        appendToken: true,
-        baseUrl: 'http://localhost:8888',
-        token: 'test-secret',
-      },
+    },
+    serverSettings: {
+      appendToken: true,
+      baseUrl: 'http://localhost:8888',
+      token: undefined,
     },
   },
   binder: {

diff --git a/apps/demo-core/static/index.html b/apps/demo-core/static/index.html
@@ -54,8 +54,9 @@ <h3>Set Server Type</h3>
       <div id="local-message">
         <p>You'll need to start your local jupyter server on port 8888 and like this:</p>
         <div style="padding: 0 20px">
-          <code
-            >jupyter notebook --NotebookApp.token=test-secret --NotebookApp.allow_origin="*"</code
+          <code>
+            jupyter lab --NotebookApp.token=<span id="local-token">test-secret</span>
+            --NotebookApp.allow_origin="*"</code
           >
         </div>
       </div>

diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -4,6 +4,7 @@ import { NavLink, Outlet, useLocation } from 'react-router-dom';
 import './App.css';
 import { Connect } from './Connect';
 import { ServerMode, ServerModeType } from './ServerMode';
+import { shortId } from 'thebe-core';
 
 function App() {
   const [mode, setMode] = useState<ServerModeType>('local');
@@ -21,7 +22,7 @@ function App() {
         repo: 'executablebooks/thebe-binder-base',
       },
       serverSettings: {
-        token: 'test-secret',
+        token: shortId(),
       },
     }),
     [path],
@@ -55,6 +56,17 @@ function App() {
           useJupyterLite={mode === 'lite'}
         >
           <ServerMode mode={mode} setMode={setMode} />
+          {mode === 'local' && (
+            <div className="pb-4 space-y-1">
+              <div>start a local jupyter server using:</div>
+              <div>
+                <code className="p-1 font-mono text-sm bg-gray-200 rounded">
+                  jupyter lab --NotebookApp.token={options.serverSettings.token}{' '}
+                  --NotebookApp.allow_origin='*' --no-browser
+                </code>
+              </div>
+            </div>
+          )}
           <Connect />
           <Outlet />
         </ThebeServerProvider>

diff --git a/apps/demo-react/src/ServerMode.tsx b/apps/demo-react/src/ServerMode.tsx
@@ -14,7 +14,7 @@ export function ServerMode({
     <div className="flex justify-center mb-6">
       <fieldset>
         <legend>Choose connection type:</legend>
-        <div className="my-2 flex space-x-3">
+        <div className="flex my-2 space-x-3">
           <div className="flex flex-row cursor-pointer">
             <input
               className="cursor-pointer"

diff --git a/apps/simple/static/ipywidgets-local.html b/apps/simple/static/ipywidgets-local.html
@@ -3,19 +3,24 @@
   <head>
     <title>ipywidgets - Thebe Demo</title>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
@@ -45,7 +50,10 @@ <h1>ipywidgets using a local server</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -138,5 +146,23 @@ <h2>ipywidgets + matplotlib</h2>
     </pre
       >
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>
diff --git a/apps/simple/static/jupyter.html b/apps/simple/static/jupyter.html
@@ -3,19 +3,24 @@
   <head>
     <title>Jupyter - Thebe Demo</title>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -43,7 +48,10 @@ <h1>Simple plots using a local server</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -61,5 +69,23 @@ <h1>Simple plots using a local server</h1>
 ax.set(title="Wow, an interactive plot!")
       </pre>
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>
diff --git a/apps/simple/static/maths.html b/apps/simple/static/maths.html
@@ -10,19 +10,24 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
     ></script>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link rel="stylesheet" href="thebe.css" />
     <link rel="stylesheet" href="main.css" />
     <script src="index.js"></script>
@@ -54,7 +59,10 @@ <h1>Math Rendering Example</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -76,5 +84,23 @@ <h2>maths with LaTeX magic</h2>
     </pre
       >
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>