How to build a web app with login & API in 15 minutes

Sven Frese — Mon, 18 Jan 2021 19:38:16 +0000

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.

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

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

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:

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

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

/* 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!

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

npx http-server . -p 3000

py -m http.server 3000

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

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.

How to deploy your Angular App to AWS S3

Sven Frese — Fri, 08 Jan 2021 19:39:08 +0000

Deploying your Angular app to AWS S3 can be a great choice if you're looking for an inexpensive hosting option that just scales with your audience and/or you're already using AWS for other things anyways. In this post I'll show you how to use the AWS CLI to deploy your Angular app to AWS S3 with just a few simple commands.

Prerequisites:

AWS CLI

1. Create an AWS S3 bucket

Creating a new AWS S3 bucket using the AWS CLI is as easy as it gets, just run the following command and make sure to replace with your own bucket name and with the region that you want to create the bucket in:

aws s3 mb s3://<bucket_name> --region=<region>

2. Configure AWS S3 bucket for static web hosting

Next, the bucket needs to be configured for static web hosting. Luckily, the AWS CLI has a single command that does most of the work for you:

aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html

To make your Angular app available to the public, all objects in the S3 bucket need to be publicly accessible. To set that up, create a document policy.json with the following content and make sure to fill in your bucket name:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket_name>/*"
            ]
        }
    ]
}

Then run this command to attach the policy to your S3 bucket:

aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json

3. Deploy your Angular app to AWS S3

Now you're ready to deploy your Angular app to the S3 bucket. Navigate to the root directory of your Angular app and run the following commands to build and deploy your Angular app:

ng build
aws s3 sync dist/<app_name> s3://<bucket_name>

That's it! Open http://<bucket_name>.s3-website.<region>.amazonaws.com in your browser and you'll see your Angular app deployed to AWS S3 🎉

Forem: Sven Frese