How to build a web app with login & API in 15 minutes
Tags: javascript, tutorial, webdev
Published: 2021-01-18 19:38:16

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](https://stackprint.io) and user authentication will be handled by [Auth0](https://auth0.com).

# 1. Configure authentication with Auth0

In the first step we're going to set up user authentication and -management with [Auth0](https://auth0.com).

To get started, you'll have to create an Auth0 account and configure some things so it can be used for the web app:

- Navigate to [https://auth0.com](https://auth0.com), click **Sign Up** and follow the instructions.

## Configure Application

After successfully creating your Auth0 account, 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** click **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

![Auth0 Application configuration](https://dev-to-uploads.s3.amazonaws.com/i/i0o53nl96xa10i30zp0l.png)

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

- Navigate to **Applications** &rarr; **APIs** and click **Create API**
- As Name enter the URL that will be the base URL of your Stackprint API, e.g. https://apis.stackprint.io/stackprint-notes
- Ensure the Signing Algorithm is set to **RS256**

# 2. Build API with Stackprint

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

- Navigate to [Stackprint](https://stackprint.io), click **Get Started** and follow the instructions.
- 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**

![Stackprint API configuration](https://dev-to-uploads.s3.amazonaws.com/i/yq8a3yfjq7jdelbhzztl.png)


# 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

Create a single file **index.html** and copy the content from this snippet:

```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>
```
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
```javascript
/* 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 */
}
```

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
```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();
```

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!

```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();
  });
```

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

```bash
npx http-server . -p 3000
```
or
```bash
py -m http.server 3000
```

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

![Personal notes app](https://dev-to-uploads.s3.amazonaws.com/i/mjrfjvj617app37rvqxa.png)

That's it, you've successfully built a web app with [Auth0](https://auth0.com) and [Stackprint](https://stackprint.io), 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.