Building a Secure Web Application with .NET 8, Supabase, Vue.js 3 and AG Grid

Introduction

In this guide, we will create a web application named TravelBlog. The tutorial begins by setting up authentication and managing data through Supabase. We will then develop a .NET 8 Web API to handle users and roles provided by Supabase. Lastly, we'll build the user interface using Vue.js 3 and integrate AG Grid for efficient data display and management on the frontend. The guide also demonstrates securing the application with JWT (JSON Web Token) for authentication and authorisation.

Prerequisites

Before starting, make sure you have the following:

• Basic knowledge of C#, .NET, and JavaScript.
• Familiarity with Vue.js concepts.
• Node.js installed.
• An IDE such as Visual Studio 2022/Rider.
• Basic understanding of Supabase.

Introduction to Supabase

Supabase is an open-source backend-as-a-service platform designed to simplify web and mobile application development. It provides a suite of tools and services, including authentication, database management, real-time updates, and cloud functions, all built on top of PostgreSQL.

Supabase integrates a robust authentication system directly with PostgreSQL, enabling seamless user management and data security. Here's how it works:

1. Authentication: Supabase offers an easy-to-use authentication system that supports multiple providers such as email/password, OAuth (e.g., Google, GitHub), and third-party integrations. This system allows developers to manage user sign-ups, logins, and sessions effortlessly.
2. PostgreSQL Integration.
3. Real-Time Sync: By leveraging PostgreSQL's built-in functionality, Supabase provides real-time capabilities that automatically sync changes to the database with the frontend, ensuring data consistency and reducing the need for manual updates.

The authorisation system in a Supabase backed application often involves a few key tables to manage users, roles, and permissions. Here's a summary of used tables in TravelBlog:

These tables work together to create a robust and scalable authorisation system. By combining Supabase's built-in authentication features with custom tables for roles and permissions, we can implement detailed access control policies and ensure data security at the application level.

After setting up the database schema, custom SQL functions can streamline user management tasks and enhance JWT customisation. These functions can automatically handle user-related operations and ensure the JWT includes relevant information, such as user roles.

1. Automating Profile Creation

When a new user registers, you can automatically create a corresponding profile entry using a database trigger and function.

2. Including Role in JWT Tokens

To include the user's role in the JWT, you can use what is called Web Hook in Supabase and call from there a Postgres function that retrieves the role from the roles table and appends it to the token payload.

Other helpful functions include:

• Automatically assigning default roles to new users.
• Syncing or updating user data between auth.users and related tables, such as profiles.

These custom functions and triggers help automate routine operations and enrich the JWT payload, resulting in a more efficient and secure application.

Setting up the .net solution

The .NET Web API serves as the backend layer, exposing endpoints that interact with data managed in Supabase. This architecture allows the Web API to act as a bridge between the frontend and the Supabase backend, consuming its services for authentication, data retrieval, and updates.

Key Features of the .NET Web API

• Authentication Integration
• Role-Based Access Control (RBAC)
• CRUD Operations

Benefits of this Approach are:

• Centralised API: The .NET Web API consolidates Supabase data and business logic into a single access layer.
• Scalability: Allows for future enhancements such as caching or additional services.
• Security: Enables centralised handling of authentication and role-based access control.

This design ensures a robust, secure, and scalable system, making the Web API a critical component in the overall architecture.

Setting up the UI solution

At the core of TravelBlog’s user interface (UI) lies VueJS 3, a progressive JavaScript framework known for its reactivity and component-based architecture. By leveraging VueJS 3, the developers have crafted a highly interactive and dynamic UI that adapts seamlessly to user inputs. Here’s what makes the TravelBlog interface remarkable:

1. Dynamic Data Handling: TravelBlog uses AG Grid, a feature-rich grid component, to manage and display complex datasets. Whether users are exploring blog statistics, filtering travel stories, or analyzing audience engagement, AG Grid ensures a smooth, fast, and customizable experience.
2. Intuitive User Experience: Features like drag-and-drop data columns, responsive layout designs, and built-in sorting and filtering make the application accessible and enjoyable for users of all skill levels.
3. Responsive Design: Designed with mobile-first principles, the application ensures flawless performance across devices, whether on desktops, tablets, or smartphones.

What the app can do so far?

At the moment of writing, the following core functionalities are available:

1. User Registration: Using the register section of the app, the user can register on TravelBlog and access the home page once authentication succeeds. Supabase automatically creates a default profile for the user and assigns a Reader access role.
2. Secure Login and Logout: Behind the scenes, the app checks if the JWT is still valid and, one minute before it expires, sends a refresh token request to the backend to keep the session alive.
3. Profile Management: In the profile section, the user can add a few details, such as the nickname they want to use on TravelBlog.
4. Assign a role to an user: Admin users can assign different roles to users.

With these foundational features in place, TravelBlog is shaping up to be a comprehensive platform for the travel community. Future updates are expected to bring even more functionality and interactivity to the platform.

References and Acknowledgments

I would like to extend my gratitude to the following resources and contributors:

• Supabase: For providing a robust backend-as-a-service platform to manage authentication and data effortlessly.
• Microsoft .NET: For the tools and framework that powered the backend API development.
• Vue.js Team: For an excellent front-end framework that simplifies building interactive user interfaces.
• AG Grid: For the powerful data grid library that enhanced the frontend functionality.

It’s also worth mentioning the following videos that inspired me to write this article and begin the development of TravelBlog:

How to start with VueJS:

https://jasonwatmore.com/vue-3-pinia-jwt-authentication-with-refresh-tokens-example-tutorial

Supabase tutorials:

https://www.youtube.com/watch?v=A--UI93tGbM

https://www.youtube.com/watch?v=4uUZ8nq0ePs

https://supabase.com/docs/guides/database/postgres/custom-claims-and-role-based-access-control-rbac

Special thanks to the open-source community for their invaluable contributions and for sharing knowledge that made this project possible. A heartfelt thanks to Kam for generously sharing his expertise and providing invaluable support in helping me get acquainted with Supabase and Vue.

GitHub Repository

The source code for this project is available on GitHub. If you’re interested in contributing to the development of future features for TravelBlog, I would be delighted to have your support! Your ideas, feedback, and code contributions are highly appreciated and play a crucial role in improving the application.

Feel free to explore the repository, raise issues, and submit pull requests. Together, we can make TravelBlog even better!