Ory & Supabase Url Shortener Part 2: Frontend

The previous blog post covers the implementation of the backend for the showcase using Ory and Supabase. Here's an overview of the backend architecture we built in the previous post including Ory Kratos, Supabase, and Ory Oathkeeper:

Supabase Kratos Architecture

This article will show you an example of building a front-end for our URL shortener to complete the project. Here's the end result:

Frontend Screenshot

You can find the full backend and frontend source code for this project on GitHub.

Let's start hacking!

What we will use

  • Nuxt is an open source framework built on Vue.js. Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
  • TailwindCSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
  • Axios In a nutshell, Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

I chose these products to build a frontend because of their simplicity. It's easier to build frontend apps today because React, Next, Vue and Nuxt frameworks exist with built-in es6 feature compatibility in the browser. I started building JS apps in 2013 and quit in 2015 because I had a bad experience with ES5 and backbone. I needed to write a lot of boilerplate code to add new CRUD views for any new datatype for my backbone application. Nowadays it became easier with project generators and useful frameworks. You can concentrate on writing code without useless actions like copying and pasting boilerplate code.

We will use the following parts of the NuxtJS framework:

Creating layout for our application

We will use the default layout created by create-nuxt-app. The code of layouts/default.vue is simple. I took the basic example of the URl shortener frontend from jonathanjameswilliams26 URL Shortener project.

mkdir client
cd client
npx create-nuxt-app

Use the following settings to create the starter application:

Frontend Screenshot

We need to have a simple layout with an application header with Sign-in/Sign-up buttons for unauthenticated user. Let's create the AppHeader component and add it to our layout. Create components/AppHeader.vue file with the following content

Tke a closer look at two important parts of our AppHeader:

Let's create a store for sessions for our application:

Also, Nuxt uses publicRuntimeConfig object for application configuration using environment variables, hence we need to add these lines to our nuxt.config.js

Let's make an URLInput that only lets authenticated users create shortened URls. Create a components/URLInput.vue file with the following content:

Building everything together

We do not call Kratos APIs yet, and we need to make two API calls:

Let's create a pages/index.vue file with the following content

asyncData is a hook for universal data fetching in Nuxt.js. Unlike fetch, which requires you to set properties on the component instance (or dispatch Vuex actions) to save your async state. Nuxt waits for the asyncData hook to be finished before navigating to the next page or display the error page.

We commit the fetched data to our store and make it available for all our components once we get the result of async API calls.

Displaying shortened URLs component

Let's create a components/URLView.vue with the following content:

Run npm run dev to run the example locally.

You can find the full backend and frontend source code for this project on the Ory example repository.

Next steps

  • Move Kratos API calls to middleware/plugins directory. That would be the best place for this code.
  • Add more pages with analytical information (for example Views,Top Referrals, or Highcharts.js graphs).
  • Go to production with free tiers of the following services:
Never miss an article - Subscribe to our newsletter!