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
Notethat is ideal for our web app. It contains a propertytextthat 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
or
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.
Top comments (0)