December 31, 2020

How to build a web app in 15 minutes

How to build a web app in 15 minutes

In this tutorial I'll show you how to build a complete web application with user login and a REST API to manage data in 15 minutes. We'll be building a small app for managing personal notes with a simple front-end written in HTML & JavaScript. We'll build the REST API with Stackprint and user authentication will be handled by Auth0.

1. Configure authentication with Auth0

In the first step we're going to set up user authentication and -management with Auth0.

Create Auth0 Account

To get started, you'll have to create an Auth0 account and configure some things so we can use it for in our web app:

  • Navigate to https://auth0.com/ and click Sign Up
  • Choose an email address, password and again click Sign Up
  • In the next step, choose a tenant domain and select your preferred region.

Configure Application

The next step is to create an Application in Auth0 and configure it so we can access it from our front-end later on:

  • Under Getting Started select Create Application
  • In the next step, enter the name of your application and select Single Page Web Applications
  • Navigate to Settings and set the following properties:
  • Allowed Callback URLs: http://localhost:3000
  • Allowed Logout URLs: http://localhost:3000
  • Allowed Web Origins: http://localhost:3000

Configure API

In addition to the Application, we'll have to create an API in Auth0. The API configuration ensures that Auth0 generates the right kind of access tokens for us:

2. Build API with Stackprint

The next step is to build and deploy a REST API to store personal notes with Stackprint:

  • If you don't have a Stackprint account yet, sign up
  • On your Stackprint Dashboard, click Create your first API
  • In the next step, enter a name and a unique path for your API
  • Enable Allow JWT Authentication and enter the JWKS URL for your Auth0 account, e.g. https://stackprint-notes.eu.auth0.com/.well-known/jwks.json
  • Click Continue
  • In the next step you can configure the REST API. The default API configuration already defines an object type Note that is ideal for our web app. It contains a property text that we can use to store the content of notes. Access to notes is configured so that users can only see and edit their own notes.
  • Click Deploy.

3. Build front-end

The front-end will be a single page written in HTML and plain Javascript for simplicity. It won't be particularly pretty but it'll contain all necessary logic to login, logout as well as create and list personal notes.

Define structure and initialize Auth0

{% c-block language="html" %}
<!DOCTYPE html>
<html>
 <head>
   <title>Stackprint Example</title>
   <script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script>
 </head>
 <body>
   <button id="login">Login</button>
   <button id="logout">Logout</button>
   <div id="notes" style="visibility: hidden;">
     <div id="note-list"></div>
     <div id="create-note">
       <input id="note" /><button id="submit-note">Submit</button>
     </div>
   </div>
   <script>
     (async () => {
       const apiBaseUrl =
         "<stackprint API base url, e.g. https://apis.stackprint.io/stackprint-notes>";
       const auth0 = await createAuth0Client({
         domain: "<auth0 account url, e.g. stackprint-examples.eu.auth0.com>",
         client_id: "<auth0 application client id>",
         redirect_uri: "http://localhost:3000",
         audience: projectBaseUrl
       });
       /* all following code goes here */
     })();
   </script>
 </body>
</html>
{% c-block-end %}

Create a single file index.html and paste the content from the snippet. Here we're setting up a basic HTML document defining the structure of our front-end. We create two buttons, one to login and one to logout. An additional block wraps the list of existing notes as well as an input field and button to create a new note.

In the JavaScript section we're initializing an Auth0 client from the auth0-spa-js library that we're going to be using for user authentication in the next step. Make sure to fill in your Stackprint API base URL, your Auth0 account URL and the client id of your Auth0 Application.

Login & logout

{% c-block language="js" %}
/* handle click on login */
document.getElementById("login").addEventListener("click", async () => {
  await auth0.loginWithRedirect();
});

/* handle click on logout */
document.getElementById("logout").addEventListener("click", () => {
  auth0.logout();
});

/* handle login callback  */
try {
  await auth0.handleRedirectCallback();
} catch (err) {
  /* not coming from redirect */
}
{% c-block-end %}

Next, we're adding click listeners for the login & logout buttons. Clicking the login button will forward the user to a login page hosted by Auth0. Once the user has successfully signed up or logged in on that page, it redirects back to our web app. We're handling that redirect from the Auth0 login page in the last block.

Load personal notes

{% c-block language="javascript" %}
/* get user access token, load notes on success  */
const accessToken = await auth0.getTokenSilently();
document.getElementById("notes").style.visibility = "visible";
const loadNotes = async () => {
  document.getElementById("note-list").innerHTML = "";
  const result = await fetch(`${apiBaseUrl}/notes`, {
    method: "GET",
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });

  const notes = await result.json();
  notes.forEach(note => {
    const noteElem = document.createElement("p");
    noteElem.innerHTML = note.text;
    document.getElementById("note-list").appendChild(noteElem);
  });
};

await loadNotes();
{% c-block-end %}

Once the user has successfully logged in, we can request an access token from Auth0. That token has the JWT format and holds signed user information that Stackprint uses to determine the identity of the user to load personal notes for.

We're requesting the user's notes from the Stackprint API and append them to the HTML document.

Create personal notes

At this point the note list will always be empty since there's no way to create notes yet. Let's fix that!

{% c-block language="javascript" %}
/* create note  */
document
  .getElementById("submit-note")
  .addEventListener("click", async () => {
    await fetch(`${apiBaseUrl}/notes`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
      body: JSON.stringify({
        text: document.getElementById("note").value
      })
    });
    loadNotes();
  });

{% c-block-end %}

We're adding a handler for the button to create a note that sends the content from the input field to the Stackprint API. Upon success, the list of notes will be refreshed and include the newly created note.

Test the app

Run a local HTTP server on port 3000 to test the web application you have just created. You can do so with npm or Python by executing either

{% c-block language="bash" %}
npx http-server . -p 3000
{% c-block-end %}

or

{% c-block language="bash" %}
py -m http.server 3000
{% c-block-end %}

in the directory you've created you index.html in.

How to build a web app result

That's it, you've successfully built a web app with Auth0 and Stackprint, feel free to play around and add some notes! 🎉

The full front-end code can be found here: https://github.com/stackprint/example-notes-javascript.

Start Building

Build REST APIs in minutes without writing any code

Our latest blog posts