Authorization is a process by which we can allow or restrict resources in an application. This is a very essential feature as it restricts who can see or change objects in an application e.g we’d only want a user who created a particular object in an application to be able to edit or delete it. In this article, I’ll walk you through how I set up authorization in the Whinst web app. Let’s dive in🏊🏽♂️
How I setup authorization🔧
To set authorization I started by adding a unique ID to the necessary database objects. By default, objects in the database have an ID field that is numeric i.e. 1,2,3,4 etc. Because of this, anyone can guess and type a number in the URL and then find themselves on an edit or delete page of an object that they did not create😕. Adding a unique ID field makes it harder for this to happen because the unique ID is a long character of random numbers and letters so it’s very difficult to guess.
I added this unique ID by first adding a database field to the required database objects which in the case of Whinst is the catalog and product objects. I then used the built-in JavaScript crypto library which contains a random UUID function that generates the actual unique ID which is then added to the objects when they are created. The URLs now look something like this: “http://localhost:3000/object/244dbd74-8880-4a29-96ef-5a797eb3e5b3“
For the actual authorization, I just added a simple if statement on the edit and delete pages that required restricting. If a user who didn’t create an object lands on any of these pages they’re immediately redirected to a view-only page, this is a piece of functionality that I took from Google Forms and modified to suit Whinst😄.
With Authorization and Authentication now complete I’m a step closer to completing the Whinst web app. I’ve since started working on adding media files to the database. Thanks for reading🙏.