Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Building Production-Grade Web Applications with Supabase
  • Table Of Contents Toc
  • Feedback & Rating feedback
Building Production-Grade Web Applications with Supabase

Building Production-Grade Web Applications with Supabase

By : David Lorenz
4.5 (11)
Buy this Book
close
close
Building Production-Grade Web Applications with Supabase

Building Production-Grade Web Applications with Supabase

4.5 (11)
By: David Lorenz
Buy this Book

Overview of this book

Discover the powerful capabilities of Supabase, the cutting-edge, open-source platform flipping the script on backend architecture. Guided by David Lorenz, a battle-tested software architect with over two decades of development experience, this book will transform the way you approach your projects and make you a Supabase expert. In this comprehensive guide, you'll build a secure, production-grade multi-tenant ticket system, seamlessly integrated with Next.js. You’ll build essential skills for effective data manipulation, authentication, and file storage, as well as master Supabase's advanced capabilities including automating tasks with cron scheduling, performing similarity searches with artificial intelligence, testing your database, and leveraging real-time updates. By the end of the book, you'll have a deeper understanding of the platform and be able to confidently utilize Supabase in your own web applications, all thanks to David's excellent expertise.
Table of Contents (20 chapters)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Download the example code files
Icon
Conventions used
Icon
Get in touch
Icon
Join Us on Discord
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book
Lock Free Chapter
1
Part 1:Creating the Foundations of the Ticket System App
Icon
Part 1:Creating the Foundations of the Ticket System App
2
Chapter 1: Unveiling the Inner Workings of Supabase and Introducing the Book’s Project
Icon
Chapter 1: Unveiling the Inner Workings of Supabase and Introducing the Book’s Project
Icon
Technical requirements (and some preamble)
Icon
Understanding why Supabase is the stack you want
Icon
Demystifying the inner workings of Supabase with Postgres
Icon
Supabase Studio – the convenient web dashboard
Icon
Supabase Auth (GoTrue) – the authentication handler
Icon
PostgREST – a REST and GraphQL API for your database
Icon
Realtime – elevating the user experience
Icon
Storage – simple and scalable object storage
Icon
Image Proxy – helping to transform images on the fly
Icon
Edge Functions – completing the optimization stack
Icon
pg-meta – an internal helper service for the database
Icon
Kong – the overarching service orchestrator
Icon
Introducing the production-grade ticket system project
Icon
Summary
3
Chapter 2: Setting Up Supabase with Next.js
Icon
Chapter 2: Setting Up Supabase with Next.js
Icon
Technical requirements
Icon
Getting ready with Next.js
Icon
Installing the Supabase CLI
Icon
Running your first Supabase instance on your machine
Icon
Managing multiple local Supabase instances
Icon
Connecting to Supabase with the Supabase JavaScript client
Icon
Connecting directly to the database
Icon
Using Supabase with TypeScript
Icon
Connecting Supabase to other frameworks
Icon
Summary
4
Chapter 3: Creating the Ticket Management Pages, Layout, and Components
chevron up
Icon
Chapter 3: Creating the Ticket Management Pages, Layout, and Components
Icon
Technical requirements
Icon
Setting up Pico.css with Next.js
Icon
Building the login form
Icon
Visualizing the Ticket Management UI
Icon
Creating a shared UI layout with navigation elements
Icon
Designing the Ticket List page
Icon
Constructing the Ticket Details page
Icon
Implementing a page to create a new ticket
Icon
Implementing a user overview
Icon
Enhancing the navigation component
Icon
Summary
5
Part 2: Adding Multi-Tenancy and Learning RLS
Icon
Part 2: Adding Multi-Tenancy and Learning RLS
6
Chapter 4: Adding Authentication and Application Protection
Icon
Chapter 4: Adding Authentication and Application Protection
Icon
Technical requirements
Icon
Adding authentication protection with Supabase
Icon
Adding a log out button
Icon
Understanding server authentication
Icon
Enhancing the password login
Icon
Authenticating with magic links
Icon
Adding password recovery
Icon
Learning about the Site URL and redirect URLs
Icon
Optional knowledge: adapting built-in templates
Icon
Summary
7
Chapter 5: Crafting Multi-Tenancy through Database and App Design
Icon
Chapter 5: Crafting Multi-Tenancy through Database and App Design
Icon
Technical requirements
Icon
What kind of multi-tenancy do we need?
Icon
Designing the database for multi-tenancy
Icon
Committing your database state (if you don’t seed it, you lose it)
Icon
Making our Next.js application tenant-aware
Icon
Summary
8
Chapter 6: Enforcing Tenant Permissions with RLS and Handling Tenant Domains
Icon
Chapter 6: Enforcing Tenant Permissions with RLS and Handling Tenant Domains
Icon
Technical requirements
Icon
Learning to work with RLS
Icon
Minimizing RLS complexity with custom claims
Icon
Making the authentication process tenant-based
Icon
Matching a tenant per domain instead of per path
Icon
Summary
9
Chapter 7: Adding Tenant-Based Signups, including Google Login
Icon
Chapter 7: Adding Tenant-Based Signups, including Google Login
Icon
Technical requirements
Icon
Understanding the impact of disabling signups
Icon
Implementing the registration page
Icon
Processing the registration with a Route Handler
Icon
Enabling OAuth/Sign-in with Google
Icon
Dealing with invalid user registration
Icon
Summary
10
Part 3: Managing Tickets and Interactions
Icon
Part 3: Managing Tickets and Interactions
11
Chapter 8: Implementing Dynamic Ticket Management
Icon
Chapter 8: Implementing Dynamic Ticket Management
Icon
Technical requirements
Icon
Creating the tickets table in the database
Icon
Creating tickets and using triggers
Icon
Viewing the ticket details
Icon
Listing and filtering tickets
Icon
Deleting tickets
Icon
Summary
12
Chapter 9: Creating a User List with RPCs and Setting Ticket Assignees
Icon
Chapter 9: Creating a User List with RPCs and Setting Ticket Assignees
Icon
Technical requirements
Icon
Adding a user list with an RPC
Icon
Allowing the setting and editing of an assignee to a ticket
Icon
Summary
13
Chapter 10: Enhancing Interactivity with Realtime Comments
Icon
Chapter 10: Enhancing Interactivity with Realtime Comments
Icon
Technical requirements
Icon
Creating the comments table
Icon
Adding a trigger to set the tenant automatically
Icon
Adding and optimizing RLS policies
Icon
Implementing comment creation
Icon
Listing existing comments from the server
Icon
Implementing Realtime comments
Icon
Embracing additional Realtime insights and learning about potential pitfalls
Icon
Summary
14
Chapter 11: Adding, Securing, and Serving File Uploads with Supabase Storage
Icon
Chapter 11: Adding, Securing, and Serving File Uploads with Supabase Storage
Icon
Technical requirements
Icon
Creating and understanding Storage buckets
Icon
Enabling the addition of comments with file attachments
Icon
Serving image attachments directly in the UI
Icon
Writing RLS policies directly on buckets and objects table
Icon
Diving into advanced storage restrictions
Icon
Summary
15
Part 4: Diving Deeper into Security and Advanced Features
Icon
Part 4: Diving Deeper into Security and Advanced Features
16
Chapter 12: Avoiding Unwanted Data Manipulation and Undisclosed Exposures
Icon
Chapter 12: Avoiding Unwanted Data Manipulation and Undisclosed Exposures
Icon
Technical requirements
Icon
Understanding PostgREST’s OpenAPI Schema exposure
Icon
Being careful with current_user usage and understanding auth.role()
Icon
Generating new Anonymous Keys, Service Role Keys, and database passwords
Icon
Benefiting from Supabase Vault
Icon
Utilizing silent resets to avoid data manipulation
Icon
Enabling column-level security/working with roles
Icon
Understanding security on views and manually created tables
Icon
Changing the max_rows configuration
Icon
Understanding safe-guarded API updates or deletion
Icon
Adding middleware inside Postgres for each API request
Icon
Using the Security Advisor
Icon
Allowing a listing of IPs for database connections
Icon
Enforcing SSL on direct database connections
Icon
Summary
17
Chapter 13: Adding Supabase Superpowers and Reviewing Production Hardening Tips
Icon
Chapter 13: Adding Supabase Superpowers and Reviewing Production Hardening Tips
Icon
Technical requirements
Icon
Making sense of search_path
Icon
Familiarizing yourself with database extensions
Icon
Adding an AI-based semantic ticket search
Icon
Using anonymous sign-ins
Icon
Transforming external APIs into tables with foreign data wrappers
Icon
Using webhooks
Icon
Understanding Edge Functions
Icon
Using cronjobs to notify about due tickets
Icon
Using pg_jsonschema for JSON data integrity
Icon
Testing the database with pgTAP
Icon
Setting the auth.storageKey to avoid migration problems
Icon
Extending supabase.ts with custom typings
Icon
Improving RLS and query performance
Icon
Identifying database performance problems and bloat
Icon
Working with complex table joins
Icon
Reviewing the underestimated benefit of using an external database client
Icon
Understanding migrations
Icon
Utilizing database branching
Icon
Disabling GraphQL or PostgREST (if you don’t need it)
Icon
Using a dead-end built-in mailing setup
Icon
Retrieving table data with the REST API and cURL
Icon
Summary
18
Index
Icon
Index
Icon
Why subscribe?
19
Other Books You May Enjoy
Icon
Other Books You May Enjoy
Icon
Packt is searching for authors like you
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book

Setting up Pico.css with Next.js

Since this isn’t a CSS book, we don’t want to be bothered by designing too much, but everybody loves a clean UI. That’s why we will add Pico.css (https://picocss.com/) to our project now. It is a CSS file that will set default styles without the need to add CSS classes – everything gets useful default styles. On top of that, it also seamlessly supports dark and light themes out of the box.

The easiest way to install Pico.css is by using a public content delivery network (CDN). All you need to do is pop a <link>- tag into your Next.js project’s root layout, app/layout.js, like so:

<head>
  <link
    rel="stylesheet"
    href="https://cdn.js
           delivr.net/npm/@picocss/pico@1/css/pico.min.css"
  />
</head>

In that same file, in the <body> tag...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Building Production-Grade Web Applications with Supabase
End of Section 4
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon