diff --git a/package-lock.json b/package-lock.json
index c3540ec..0498267 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1718,12 +1718,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-prismjs": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz",
-      "integrity": "sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ==",
-      "dev": true
-    },
     "babel-polyfill": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
@@ -4199,7 +4193,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4220,12 +4215,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4240,17 +4237,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4367,7 +4367,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4379,6 +4380,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4393,6 +4395,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4400,12 +4403,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4424,6 +4429,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4504,7 +4510,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4516,6 +4523,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4601,7 +4609,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4637,6 +4646,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4656,6 +4666,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4699,12 +4710,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/pages/docs.html b/src/pages/docs.html
index 92fdac9..59e54fd 100644
--- a/src/pages/docs.html
+++ b/src/pages/docs.html
@@ -588,7 +588,7 @@
 
   <p>Then, let's add the code to handle the form submission:</p>
 
-  <pre data-line="5-13,17">
+  <pre data-line="5-13,17,20">
     <code class="language-markup">
     &lt;!-- application code --&gt;
     &lt;script type=&quot;text/javascript&quot;&gt;
@@ -609,7 +609,8 @@
       document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
 
       document.getElementById('todo-view').style.display = 'none'
-      
+      document.getElementById('add-todo-form').style.display = 'none'
+
     &lt;/script&gt;
     </code>
   </pre>
@@ -622,6 +623,36 @@
     the database.
   </p>
 
+  <p>
+    We hide the <code class="language-markup">add-todo-form</code> element until
+    the user logs in:
+  </p>
+
+  <pre data-line="8">
+    <code class="language-markup">
+    &lt;!-- application code --&gt;
+    &lt;script type=&quot;text/javascript&quot;&gt;
+    …
+
+      function showTodos(username) {
+        document.getElementById('auth-view').style.display = 'none'
+        document.getElementById('todo-view').style.display = 'block'
+        document.getElementById('add-todo-form').style.display = 'block'
+
+        // reset the todos view
+        document.getElementById('username').innerHTML = username
+        document.getElementById('todos').innerText = ''
+        document.getElementById('db-loading').style.display = 'block'
+        document.getElementById('db-error').innerText = ''
+
+        userbase.openDatabase('todos', handleDatabaseChange)
+          .catch((e) => document.getElementById('db-error').innerText = e)
+      }
+
+    &lt;/script&gt;
+    </code>
+  </pre>
+
   <p>
     Reload the page and add some to-dos. Then, reload the page again and the to-dos should automatically appear after you login. These to-dos have been successfully persisted in the end-to-end encrypted Userbase database.
   </p>