docs_quickstart.html

<!-- Docs - Quickstart -->
<div class="section">
  <h2><a href="/docs/">Docs</a> : Quickstart</h2>

  <p>
    In this tutorial we will build a very basic to-do web app. You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a functional web app. Making things pretty is left as an exercise to the reader.
  </p>

  <p>The entire web app we'll be building will fit in a <a href="https://github.com/encrypted-dev/userbase-samples/blob/master/ugliest-todo/index.html" target="_blank">single static HTML file of 182 lines</a>. You can also see a <a href="https://ugliest-todo.netlify.com/" target="_blank">live demo</a> of the final result.</p>

  <h3>Setting up</h3>

  <p>Let's get going. Open a new file in your favorite code editor.</p>

  <pre>
    <code class="language-bash">
      code ugly-todo.html
    </code>
  </pre>

  <p>And add some boilerplate HTML.</p>

  <div>
    <pre>
      <code class="language-markup">
        &#x3C;!DOCTYPE html&#x3E;
        &#x3C;html lang=&#x22;en&#x22;&#x3E;
        &#x3C;head&#x3E;
          &#x3C;meta charset=&#x22;UTF-8&#x22;&#x3E;
          &#x3C;title&#x3E;Ugliest To-Do&#x3C;/title&#x3E;
        &#x3C;/head&#x3E;

        &#x3C;body&#x3E;
          &#x3C;!-- application code --&#x3E;
          &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
          &#x3C;/script&#x3E;
        &#x3C;/body&#x3E;
        &#x3C;/html&#x3E;
      </code>
    </pre>
  </div>

  <p>
    Now, open this file in a web browser of your choosing. At this point all you'll see is a blank page. As we add functionality throughout the tutorial, you can refresh this page to see the changes.
  </p>

  <a class="anchor" id="creating-admin-account"></a>
  <h3>Creating an admin account</h3>

  <p>To complete this tutorial, you'll need to <a href="https://v1.userbase.com/#create-admin">create a Userbase admin account</a>. Upon creation, a default application named "Starter App" will be created. Take note of the App ID because we'll need it very soon.</p>

  <h3>Installing the SDK</h3>

  <p>We're going to load the Userbase SDK from a CDN with a <code class="language-markup">&lt;script&gt;</code> tag in the head of our page.</p>

  <pre data-line="4">
    <code class="language-markup"><!--
    <head>
      <meta charset="UTF-8">
      <title>Ugliest To-Do App</title>
      <script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script>
    </head>
    --></code>
  </pre>

  <p>The Userbase SDK will now be accessible via the <code class="language-javascript">userbase</code> variable. This will be our only dependency.</p>

  <h3>Initializing the SDK</h3>

  <p>
    Before doing anything with the Userbase SDK, we need to let it know our App ID. Simply replace <code class="language-javascript">'YOUR_APP_ID'</code> with the App ID you received when you created your admin account.
  </p>

  <pre data-line="4">
    <code class="language-markup">
    &#x3C;body&#x3E;
      &#x3C;!-- application code --&#x3E;
      &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
        userbase.init({ appId: 'YOUR_APP_ID' })
      &#x3C;/script&#x3E;
    &#x3C;/body&#x3E;
    &#x3C;/html&#x3E;
    </code>
  </pre>

  <h3>Letting new users create an account</h3>

  <p>Before our users can start creating to-dos, we need to give them a way to create an account with our app.</p>

  <p>First, let's add a sign up form.</p>

  <div>
    <pre data-line="2-11">
      <code class="language-markup">
      &lt;body&gt;
        &lt;!-- Auth View --&gt;
        &lt;div id=&quot;auth-view&quot;&gt;
          &lt;h1&gt;Create an account&lt;/h1&gt;
          &lt;form id=&quot;signup-form&quot;&gt;
            &lt;input id=&quot;signup-username&quot; type=&quot;text&quot; required placeholder=&quot;Username&quot;&gt;
            &lt;input id=&quot;signup-password&quot; type=&quot;password&quot; required placeholder=&quot;Password&quot;&gt;
            &lt;input type=&quot;submit&quot; value=&quot;Create an account&quot;&gt;
          &lt;/form&gt;
          &lt;div id=&quot;signup-error&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- application code --&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
    </code>
    </pre>
  </div>

  <p>Then, let's add the code to handle the form submission.</p>

  <div>
    <pre data-line="5-16">
      <code class="language-markup">
      &lt;!-- application code --&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
        userbase.init({ appId: 'YOUR_APP_ID' })

        function handleSignUp(e) {
          e.preventDefault()
  
          const username = document.getElementById('signup-username').value
          const password = document.getElementById('signup-password').value
  
          userbase.signUp({ username, password, rememberMe: 'none' })
            .then((user) =&gt; alert('You signed up!'))
            .catch((e) =&gt; document.getElementById('signup-error').innerHTML = e)
        }
  
        document.getElementById('signup-form').addEventListener('submit', handleSignUp)
      &lt;/script&gt;
      </code>
    </pre>
  </div>

  <p>
    Now, whenever someone submits the form, the <code class="language-javascript">handleSignUp</code> function will be called. This gets the values of the username and password inputs and calls <code class="language-javascript">userbase.signUp({ username, password, rememberMe: 'none' })</code> to create a new user account with Userbase. We are specifying <code class="language-javascript">rememberMe: 'none'</code> because we won't implement automatic login until the end of the guide.
  </p>

  <p>
    Go ahead and reload the page in your browser. Enter a username and password in the form and submit. You should get an alert saying that you signed up. And if you go to your Userbase admin account, you should also see the new user under your app.
  </p>

  <p>
    Now try signing up for another account using the same username and you'll see an error message displayed under the form.
  </p>

  <p>
    We'll come back to this function in a bit to make it do something more interesting.
  </p>

  <h3>Letting users log in</h3>

  <p>Now that our users can create accounts, let's give them the ability to login.</p>

  <p>First, let's add a "Login" form to the page above our "Create Account" form.</p>

  <pre data-line="4-10">
    <code class="language-markup">
    &lt;body&gt;
      &lt;!-- Auth View --&gt;
      &lt;div id=&quot;auth-view&quot;&gt;
        &lt;h1&gt;Login&lt;/h1&gt;
        &lt;form id=&quot;login-form&quot;&gt; 
          &lt;input id=&quot;login-username&quot; type=&quot;text&quot; required placeholder=&quot;Username&quot;&gt;
          &lt;input id=&quot;login-password&quot; type=&quot;password&quot; required placeholder=&quot;Password&quot;&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Sign in&quot;&gt;
        &lt;/form&gt;
        &lt;div id=&quot;login-error&quot;&gt;&lt;/div&gt;

        &lt;h1&gt;Create an account&lt;/h1&gt;
        &lt;form id=&quot;signup-form&quot;&gt;
    </code>
  </pre>

  <p>Then, let's add the code to handle the form submission.</p>

  <pre data-line="5-14">
    <code class="language-markup">
    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
      userbase.init({ appId: 'YOUR_APP_ID' })

      function handleLogin(e) {
        e.preventDefault()

        const username = document.getElementById(&#x27;login-username&#x27;).value
        const password = document.getElementById(&#x27;login-password&#x27;).value

        userbase.signIn({ username, password, rememberMe: 'none' })
          .then((user) =&#x3E; alert(&#x27;You signed in!&#x27;))
          .catch((e) =&#x3E; document.getElementById(&#x27;login-error&#x27;).innerHTML = e)
      }

      function handleSignUp(e) {
        e.preventDefault()

    …

    &lt;/script&gt;

    </code>
  </pre>

  <p>And finally, let's bind our login form with our login handler.</p>

  <pre data-line="9">
    <code class="language-markup">
    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;

    …

        .catch((e) => document.getElementById('signup-error').innerHTML = e)
      }

      document.getElementById('login-form').addEventListener('submit', handleLogin)
      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
    &#x3C;/script&#x3E;
    &#x3C;/body&#x3E;
    </code>
  </pre>

  <p>
    You'll notice that this looks very similar to the sign up code from before. The <code class="language-javascript">handleLogin</code> function gets the values of the username and password inputs, and calls <code class="language-javascript">userbase.signIn({ username, password, rememberMe: 'none' })</code>. This will attempt to sign in the user, handling a success with an alert and a failure by displaying the error.
  </p>

  <p>
    Reload the page and you should see our new login form. Enter the username and
    password you used to create an account in the previous step, and submit the form.
    You should get an alert saying that you signed in.
  </p>

  <p>
    Try submitting the form again with incorrect credentials and you'll see an error
    message displayed under the form.
  </p>

  <h3>Showing the to-do view</h3>

  <p>
    After a user signs in, we'll want to hide the authentication forms and display their to-do list. First, let's add a container for the to-do list under the authentication forms.</p>

  <pre data-line="8-14">
    <code class="language-markup">

    &#x3C;!-- Auth View --&#x3E;
    &#x3C;div id=&#x22;auth-view&#x22;&#x3E;

    …

    &#x3C;/div&#x3E;

    &#x3C;!-- To-dos View --&#x3E;
    &#x3C;div id=&#x22;todo-view&#x22;&#x3E;
      &#x3C;div id=&#x22;username&#x22;&#x3E;&#x3C;/div&#x3E;

      &#x3C;h1&#x3E;To-Do List&#x3C;/h1&#x3E;
      &lt;div id=&quot;todos&quot;&gt;&lt;/div&gt;
    &#x3C;/div&#x3E;

    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
      userbase.init({ appId: 'YOUR_APP_ID' })

    …

    &#x3C;/script&#x3E;
    </code>
  </pre>

  <p>Then, let's make this view hidden by default, and add a function to display it.</p>

  <div>
    <pre data-line="9-13,18">
      <code class="language-markup">
      &#x3C;!-- application code --&#x3E;
      &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;

      …

          .catch((e) => document.getElementById('signup-error').innerHTML = e)
        }

        function showTodos(username) {
          document.getElementById('auth-view').style.display = 'none'
          document.getElementById('todo-view').style.display = 'block'
          document.getElementById('username').innerHTML = username
        }
        
        document.getElementById('login-form').addEventListener('submit', handleLogin)
        document.getElementById('signup-form').addEventListener('submit', handleSignUp)
      
        document.getElementById('todo-view').style.display = 'none'
      &#x3C;/script&#x3E;
      </code>
    </pre>
  </div>

  <p>
    Now that we have a function to show a view for signed in users, let's change
    <code class="language-javascript">handleLogin</code> to call this function instead of showing an alert.
  </p>

  <pre data-line="8">
    <code class="language-javascript">
    function handleLogin(e) {
      e.preventDefault()

      const username = document.getElementById(&#x27;login-username&#x27;).value
      const password = document.getElementById('login-password').value

      userbase.signIn({ username, password, rememberMe: 'none' })
        .then((user) => showTodos(user.username))
        .catch((e) => document.getElementById('login-error').innerHTML = e)
    }
    </code>
  </pre>

  <p>And we do the same thing for <code class="language-javascript">handleSignUp</code>.</p>

  <pre data-line="7">
    <code class="language-javascript">
    function handleSignUp(e) {
      e.preventDefault()

      const password = document.getElementById('signup-password').value

      userbase.signUp({ username, password, rememberMe: 'none' })
        .then((user) => showTodos(user.username))
        .catch((e) => document.getElementById('signup-error').innerHTML = e)
    }
    </code>
  </pre>

  <p>
    Reload the page and login again using your username and password. You should see the
    authentication view disappear and your username show up along with the to-do list heading.
  </p>

  <h3>Using the database</h3>

  <p>
    Every time a user signs in, we need to establish a connection with the database that will hold the user's to-dos.
  </p>

  <p>
    First, let's add a couple of elements for showing a loading indicator and error messages.
  </p>

  <pre data-line="6-7">
    <code class="language-markup"><!--
    <div id="todo-view">
      <span id="username"></span>

      <h1>To-Do List</h1>
      <div id="todos"></div>
      <div id="db-loading">Loading to-dos...</div>
      <div id="db-error"></div>
    </div>
    --></code>
  </pre>

  <p>Then, let's change <code class="language-javascript">showTodos</code> to open a new database connection.</p>

  <pre data-line="5,7-12,15-25">
    <code class="language-javascript">
    function showTodos(username) {
      document.getElementById('auth-view').style.display = 'none'
      document.getElementById('todo-view').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({ databaseName: 'todos', changeHandler })
        .catch((e) => document.getElementById('db-error').innerText = e)
    }

    function changeHandler(items) {
      document.getElementById('db-loading').style.display = 'none'

      const todosList = document.getElementById('todos')

      if (items.length === 0) {
        todosList.innerText = 'Empty'
      } else {
        // render to-dos, not yet implemented
      }
    }

    document.getElementById('login-form').addEventListener('submit', handleLogin)
    document.getElementById('signup-form').addEventListener('submit', handleSignUp)
    </code>
  </pre>

  <p>
    We changed <code class="language-javascript">showTodos</code> to make a call to <code class="language-javascript">userbase.openDatabase({ databaseName: 'todos', changeHandler })</code>. After the <code class="language-javascript">'todos'</code>
    database is opened, our callback
    function <code class="language-javascript">changeHandler</code> will be called whenever data changes in the database. When the Promise is resolved, the database is ready for use and we hide the loading indicator.
  </p>

  <p>
    Reload the page and sign in again. You'll see "Loading to-dos..." while the connection
    to the database is getting established, followed by "Empty", indicating there are
    currently no to-dos in the database.
  </p>


  <h3>Showing the to-dos</h3>

  <p>
    If the database has items in it, we'll want to render those under our to-do list.
    Let's implement that in <code class="language-javascript">changeHandler</code>.
  </p>

  <pre data-line="9-24">
    <code class="language-javascript"><!--
    function changeHandler(items) {
      document.getElementById('db-loading').style.display = 'none'

      const todosList = document.getElementById('todos')

      if (items.length === 0) {
        todosList.innerText = 'Empty'
      } else {
        // clear the list
        todosList.innerHTML = ''

        // render all the to-do items
        for (let i = 0; i < items.length; i++) {

          // build the todo label
          const todoLabel = document.createElement('label')
          todoLabel.innerHTML = items[i].item.todo
          todoLabel.style.textDecoration = items[i].item.complete ? 'line-through' : 'none'

          // append the todo item to the list
          const todoItem = document.createElement('div')
          todoItem.appendChild(todoLabel)
          todosList.appendChild(todoItem)
        }
      }
    }
    --></code>
  </pre>

  <h3>Adding to-dos</h3>

  <p>Now, let's add a form for creating new to-dos.</p>

  <script type="text/plain" data-line="10-14" class="language-markup">
  <!-- To-dos View -->
  <div id="todo-view">
    <span id="username"></span>

    <h1>To-Do List</h1>
    <div id="todos"></div>
    <div id="db-loading">Loading to-dos...</div>
    <div id="db-error"></div>

    <form id="add-todo-form">
      <input id="add-todo" type="text" required placeholder="To-Do">
      <input type="submit" value="Add">
    </form>
    <div id="add-todo-error"></div>
  </div>
  </script>

  <p>Then, let's add the code to handle the form submission.</p>

  <pre data-line="5-13,17,20">
    <code class="language-markup">
    &lt;!-- application code --&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    …

      function addTodoHandler(e) {
        e.preventDefault()

        const todo = document.getElementById('add-todo').value

        userbase.insertItem({ databaseName: 'todos', item: { 'todo': todo }})
          .then(() =&gt; document.getElementById('add-todo').value = '')
          .catch((e) =&gt; document.getElementById('add-todo-error').innerHTML = e)
      }

      document.getElementById('login-form').addEventListener('submit', handleLogin)
      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
      document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)

      document.getElementById('todo-view').style.display = 'none'

    &lt;/script&gt;
    </code>
  </pre>

  <p>
    In <code class="language-javascript">addTodoHandler</code> we get the to-do text from the input, and then call <code class="language-javascript">userbase.insertItem</code>
    with the database name and the object we want the persist. This
    will return a Promise that resolves when the data is successfully persisted to
    the database.
  </p>

  <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>

  <h3>Updating to-dos</h3>

  <p>Now, let's add a checkbox to allow to-dos to be marked as completed.</p>

  <pre data-line="4-16,26">
    <code class="language-javascript">
    // render all the to-do items
    for (let i = 0; i < items.length; i++) {

      // build the todo checkbox
      const todoBox = document.createElement('input')
      todoBox.type = 'checkbox'
      todoBox.id = items[i].itemId
      todoBox.checked = items[i].item.complete ? true : false
      todoBox.onclick = (e) => {
        e.preventDefault()
        userbase.updateItem({ databaseName: 'todos', itemId: items[i].itemId, item: {
          'todo': items[i].item.todo,
          'complete': !items[i].item.complete
        }})
        .catch((e) => document.getElementById('add-todo-error').innerHTML = e)
      }

      // build the todo label
      const todoLabel = document.createElement('label')
      todoLabel.innerHTML = items[i].item.todo

    …

      // append the todo item to the list
      const todoItem = document.createElement('div')
      todoItem.appendChild(todoBox)
      todoItem.appendChild(todoLabel)
      todosList.appendChild(todoItem)
    }
    </code>
  </pre>

  <p>
    Reload the page and complete some to-dos. Their state should persist even after you reload the page and login again.
  </p>

  <h3>Deleting to-dos</h3>

  <p>And finally, let's create a button for deleting a to-do.</p>

  <pre data-line="4-11">
    <code class="language-javascript">
    // render all the to-do items
    for (let i = 0; i < items.length; i++) {

      // build the todo delete button
      const todoDelete = document.createElement('button')
      todoDelete.innerHTML = 'X'
      todoDelete.style.display = 'inline-block'
      todoDelete.onclick = () => {
        userbase.deleteItem({ databaseName: 'todos', itemId: items[i].itemId })
          .catch((e) => document.getElementById('add-todo-error').innerHTML = e)
      }

      // build the todo checkbox
      const todoBox = document.createElement('input')
      todoBox.type = 'checkbox'
    </code>
  </pre>

  <p>And now let's append the delete button to the to-do element.</p>

  <pre data-line="3">
    <code class="language-javascript">
    // append the todo item to the list
    const todoItem = document.createElement('div')
    todoItem.appendChild(todoDelete)
    todoItem.appendChild(todoBox)
    todoItem.appendChild(todoLabel)
    todosList.appendChild(todoItem)
    </code>
  </pre>

  <p>
    Reload the page and delete some to-dos. They should no longer show up even after you reload the page and login again.
  </p>

  <h3>Polishing up</h3>

  <p>Before we wrap up, let's add two final pieces of account functionality: user logout and automatic login for returning users.</p>

  <h3>Signing out users</h3>

  <p>First, let's add a logout button along with a container for error messages.</p>

  <script type="text/plain" data-line="4-5" class="language-markup">
  <!-- To-dos View -->
  <div id="todo-view">
    <span id="username"></span>
    <input type="button" value="Logout" id="logout-button">
    <div id="logout-error"></div>

    <h1>To-Do List</h1>
    <div id="todos"></div>
  </script>

  <p>Then, let's add the code to handle the logout.</p>

  <pre data-line="9-13,21-30,40">
    <code class="language-markup">
    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
    
    …

        .catch((e) => document.getElementById('signup-error').innerHTML = e)
      }

      function handleLogout() {
        userbase.signOut()
          .then(() => showAuth())
          .catch((e) => document.getElementById('logout-error').innerText = e)
      }

      function showTodos(username) {
        document.getElementById('auth-view').style.display = 'none'
        document.getElementById('todo-view').style.display = 'block'

    …

      function showAuth() {
        document.getElementById('todo-view').style.display = 'none'
        document.getElementById('auth-view').style.display = 'block'
        document.getElementById('login-username').value = ''
        document.getElementById('login-password').value = ''
        document.getElementById('login-error').innerText = ''
        document.getElementById('signup-username').value = ''
        document.getElementById('signup-password').value = ''
        document.getElementById('signup-error').innerText = ''
      }

      function changeHandler(items) {
        const todosList = document.getElementById('todos')

    …

      document.getElementById('login-form').addEventListener('submit', handleLogin)
      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
      document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
      document.getElementById('logout-button').addEventListener('click', handleLogout)

      document.getElementById('todo-view').style.display = 'none'
    &lt;/script&gt;
    </code>
  </pre>

  <p>The <code class="language-javascript">handleLogout</code> function calls <code class="language-javascript">userbase.signOut</code> which sends a request to end the user's session. A Promise is returned that resolves when the user is signed out, in which case we hide the to-do view and show the authentication view.</p>

  <h3>Automatically resuming a session</h3>

  <p>Let's modify our app to automatically sign in a returning user when the page loads. First, we'll add a loading indicator that will show while the app is trying to automatically sign in the user.</p>

  <pre data-line="4-5">
    <code class="language-markup">
    &lt;/head&gt;
 
    &lt;body&gt;
      &lt;!-- Loading View --&gt;
      &lt;div id=&quot;loading-view&quot;&gt;Loading...&lt;/div&gt;

      &lt;!-- Auth View --&gt;
      &lt;div id=&quot;auth-view&quot;&gt;
      &lt;h1&gt;Login&lt;/h1&gt;
    </code>
  </pre>

  <p>Then, let's add the following to our <code class="language-javascript">userbase.init</code> call.</p>

  <pre data-line="5-7, 17">
    <code class="language-markup">
    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
    
      userbase.init({ appId: 'YOUR_APP_ID' })
        .then((session) => session.user ? showTodos(session.user.username) : showAuth())
        .catch(() => showAuth())
        .finally(() => document.getElementById('loading-view').style.display = 'none')

    …
    
      document.getElementById('login-form').addEventListener('submit', handleLogin)
      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
      document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
      document.getElementById('logout-button').addEventListener('click', handleLogout)

      document.getElementById('todo-view').style.display = 'none'
      document.getElementById('auth-view').style.display = 'none'

    &lt;/script&gt;
    </code>
  </pre>

  <p>
    We are now hiding the authentication view by default so that it will only show if an existing session can't be resumed.
  </p>

  <p>
    The <code class="language-javascript">userbase.init</code> function returns a Promise that resolves when the SDK has determined if it can reuse the previous session. If so, the user gets automatically logged in, and the <code class="language-javascript">session.user</code> object gets set. If there was no previous session, or the session cannot be resumed, the <code class="language-javascript">session.user</code> object will not be set. If <code class="language-javascript">userbase.init</code> fails, we'll just send the user to the sign in page regardless of the reason.
  </p>

  <p>
    Next, we want to tell the SDK to persist the session even after we refresh the page or close the browser's window. To do that, we need to set the <code class="language-javascript">rememberMe</code> parameter to either <code class="language-javascript">'local'</code> (persists after the window gets closed) or <code class="language-javascript">'session'</code> (persists only when the page gets refreshed) when calling <code class="language-javascript">userbase.signIn</code> and <code class="language-javascript">userbase.signUp</code>. Let's set ours to <code class="language-javascript">'local'</code>.
  </p>

  <pre data-line="11,22">
    <code class="language-markup">
    &#x3C;!-- application code --&#x3E;
    &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
      userbase.init({ appId: 'YOUR_APP_ID' })

      function handleLogin(e) {
        e.preventDefault()

        const username = document.getElementById(&#x27;login-username&#x27;).value
        const password = document.getElementById(&#x27;login-password&#x27;).value

        userbase.signIn({ username, password, rememberMe: 'local' })
          .then((user) => showTodos(user.username))
          .catch((e) => document.getElementById('login-error').innerHTML = e)
      }

      function handleSignUp(e) {
        e.preventDefault()

        const username = document.getElementById('signup-username').value
        const password = document.getElementById('signup-password').value
  
        userbase.signUp({ username, password, rememberMe: 'local' })
         .then((user) => showTodos(user.username))
          .catch((e) => document.getElementById('signup-error').innerHTML = e)
      }
    …

    &lt;/script&gt;

    </code>
  </pre>

  <p>
    Now, if we sign in and close the page, we will get signed in automatically next time we open it, without having to re-enter our username and password.
  </p>

  <h3>What's next?</h3>

  <p>And that was it! A fully working (but ugly) web app in just 182 lines of code, including markup and comments. If you have any questions, or there's anything we can do to help you with your web app, please <a href="/contact/">get in touch</a>. Thank you!</p>
</div>

<hr>