For your frontend, this application will be using Next.js and Tailwind CSS. You will learn how to maneuver around an app and build a strong static pricing page. 

For your backend AND authentication, we will make use of Supabase. Supabase is open source and is all of the backend services that you will need to build your site. It includes a dedicated and scalable Postgres database and user management with Row Level Security! 

Lastly, for payments, you will be using Stripe. It will be an individual payment checkout system that will create and update users' subscriptions. 

Jon will take you through all of this and more in just 1 hour and 10 minutes!

Supabase is a backend-as-a-service (BaaS) that makes it super simple to create databases, tables, columns and input data.

Every project contains the infrastructure to handle database storage, authentication, authorization, file storage and real-time.

In this video, we look at setting up a Supabase project from scratch - creating an account, organisation and a project - with a geographically close region.

Create a Supabase Project

Supabase makes it super easy to create new tables, and change the structure of your database over time!

In this video, we look at creating a lesson table, which will store our publicly available data for each lesson. We add a column for `title` and `description`, and input some basic test data.

Create a Table in Supabase

Next.js is a super efficient web development framework, built on React. It handles both client-side and server-side code, making it a great tool for most web apps.

In this video, we use the `create-next-app` package to create a new Next.js application, and use the `with-tailwind` argument to configure TailwindCSS.

Additionally, we remove the boilerplate markup, and run our application in development mode with `npm run dev`.

Create a Next.js App with Tailwind CSS

`supabase-js` is a JavaScript library that makes interacting with your Supabase database simple!

In this video, we install the package with npm using `npm i @supabase/supabase.js`. We then create a reusable Supabase client that can be used throughout our application.

Additionally, we create environment variables for the Supabase `URL` and `key`, which are available in our Next.js client. Exposing these values to the client is not a security risk, as we will be enabling Row Level Security in a future lesson.

Lastly, we tell Next.js that we would like to pre-render our landing page at build time, by exporting out a `getStaticProps` function. This ensures that our lesson data is only fetched once - when we rebuild our application - rather than each time to user visits the page.

Query Data From Supabase Using Next.js

In this video, we look at building a pre-rendered static page for each of our lessons from Supabase. We use a Next.js dynamic route to create a page that can display the details for a lesson, and specify a finite list of possible urls with the `getStaticPaths` function.

The `getStaticProps` function will then be called for each of these lessons, and passed a params object to determine which page is currently being built. This is where we make a request for additional data from Supabase - in this case, the lesson's description. Again, the request will only happen once at build time, rather than each time the user requests the page.

Additionally, we use the Next.js `<Link>` component to enable client-side transitions from the landing page to each of the lesson details pages. This means we do not need to do a full page load from the server each time the user navigates to a new page. the `<Link>` component will pre-fetch each of our lesson's detail pages, while the user is browsing the list. 

Use Next.js to Query a Single Record From Supabase

Supabase offers a number of authentication options out of the box. In this video, we look at implementing third party auth using GitHub as a provider.

In order to do this, we need to register a new OAuth application in GitHub, and configure it to communicate with our Supabase project. Supabase automatically handles receiving tokens at the `/auth/v1/callback` endpoint.

Additionally, we implement `/login` and `/logout` pages to handle authentication in our Next.js application. We can use the `supabase-js` library to detect whether or not a user is signed in using the `supabase.auth.user()` function.

Implement Third Party Authentication with GitHub in Next.js Using Supabase

Supabase is a collection of tools around a PostgreSQL database. Postgres is a relational database, which means we can create tables that are related to other tables - by referencing columns with a foreign key relationship.

In this video, we query our `auth.users` table to inspect the data that Supabase stores about our user. This is a special table that is managed by Supabase, and not something we should modify ourselves.

In order to store additional data about our user, we create a profile table. This will contain our user's stripe customer ID and whether or not they are currently subscribed. A profile should only ever exist for a specific user, therefore, we can create a relationship between these two tables.

Additionally, this will enforce constraints to stop our data becoming corrupted. It will not be possible to create a profile for a user that does not exist, and we will not be able to delete a user that has a profile.

Add Relationships Between Tables in Supabase Using Foreign Keys

Each time a new user signs in, we want to create an associated profile. In PostgreSQL, we can use triggers to listen to events - such as `INSERT` - on specific tables - such as `auth.users` - and execute a Postgres function.

In this video, we use the Supabase UI to create a Postgres function that returns a trigger. This is a special kind of function that can be invoked when particular events occur in the database - covered in the next lesson. This function will be responsible for creating a new row in the `profile` table, using the ID from our `auth.users` record.

Use Postgres Functions to Implement Database Logic with Supabase

We now have a Postgres function that can handle creating a profile for a user. In this video, we implement a Postgres trigger to listen to `INSERT` events on the `auth.users` table and call our `create_profile_for_user` function. This will ensure that every new user that logs into our application has an associated profile.

Triggers are a super powerful feature of PostgreSQL! When combined with Supabase real-time - covered later in the course - our applications can have multiple users changing data in the db, and  UIs automatically updating without refreshing the page.

Use Supabase to Subscribe to Database Events with Postgres Triggers

Every transaction in Stripe is associated with a customer. Since we want our user to be able to see their transaction history in Stripe, we need to keep a track of their customer ID in our `profile` table.

In this video, we create a new Stripe account and configure our Next.js application to use its publishable and secret API keys. Additionally, we discuss by adding `NEXT_PUBLIC_` to our environment variable names, it exposes them to the client - running in the user's browser. This is entirely safe for our publishable key - which can be public - but not our secret key - which should always be kept private.

To create a Stripe customer, we need to use our private API key, meaninh this logic will need to be executed on the server. Next.js makes this simple with API routes - special serverless functions that will be created for any `.js` files in the `pages/api` directory.

We create a new API route to handle adding a stripe customer and updating the user's profile with their customer ID. 

Create a Stripe Customer with Next.js API Routes

Currently, our API route can be used by anyone navigating to its endpoint. To ensure that this function can only be executed by our application, we need to create a special secret value.

In this video, we generate a special key to secure our API route. This value must be provided as a query parameter on the request to our endpoint, or an error response will be sent back.

To confirm this is working correctly, we use the Thunder Client extension. When the `API_ROUTE_SECRET` is not provided we receive a 401 response. When the correct value is attached our serverless function executes, creating a stripe customer and updating our `profile` table in Supabase.

Generate a Custom API Key to Secure an API Route in Next.js

We want to call our API route to create a new Stripe customer anytime a new user signs into our application. Since this triggers an insert on our `profile` table, we can use hooks in Supabase to listen to insert events and call our API route.

Function hooks in Supabase are similar to PostgreSQL triggers, however, rather than executing a function, we can call a HTTP endpoint. Since our Next.js application is running locally on our machine it is not possible for Supabase to send a HTTP request directly to our API route.

Ngrok is a simple tool that allows us to tunnel traffic from a publicly accessible URL on the internet, through to our Next.js application running locally. 

In order for our API route to process the request, we need to tell our Supabase hook to also send our `API_ROUTE_SECRET`. Query parameters can be declared as HTTP params for our hook.

Lastly, we want our Stripe customer to be associated with our user via their email address. 

Automatically Create a Stripe Customer for Each User with Supabase Function Hooks

Using React Context, we can create global variables that are available throughout our Next.js application. In this video, we create a `useUser` hook that exposes the state of our Supabase user to our tree of React components.

To get the state of our Supabase user when our application loads, we can use `supabase.auth.user()`. When the state of our user changes - e.g. our user logs in - Supabase will call the `supabase.auth.onAuthStateChange` callback. We can use this to update the state of our user object whenever the user signs in or out.

In order to consume our user context, we need to wrap our root component in our Context Provider. This can be done in the `pages/_app.js` file. Now any component in our tree of decedents can call `useUser` to get the state of our global singleton user.

Lastly, our user object only contains values from the `auth.users` table. In order to enrich our user with data from the `profile` table, we need to add a request to our Supabase db within our user provider.

Make User State Globally Accessible in Next.js with React Context and Providers

Row level security is a feature of PostgreSQL, that secures our database by automatically denying all read and write requests. We can then create policies to enable particular actions for specific tables. This is similar to declaring an SQL `where` clause that is automatically appended to every query.

We use the Supabase dashboard to write a simple `select` policy. This allows anyone (signed in or not) to view rows from the lesson table. 

Taking this concept a little further, we create a `select` policy for the `profile` table. This will allow any logged in user to select their specific profile.

Row level security is a powerful way to implement authorization, as it is enforced by the database itself, and runs for each row returned by a query. No need to go through an API to determine whether the user should have access or not. This can drastically improve the performance and reliability of our data fetching, as we can remove an unnecessary hop! 🎉

Implement Authorization Using Row Level Security and Policies

We're using Row Level Security (RLS) to enforce authorization rules for each row in the database. This applies to the entire row, not specific columns. Therefore, if we want to create some premium content that is only available to our subscribed users, we need to create another table. Again, we can reference the `lesson` table's ID, using a foreign key relationship.

We will create a `premium_content` table that will store the `video_url` column for each lesson. We will fetch this data on the lesson details page, and write an RLS policy that will only enable read access for subscribed users. 

This will ensure that our logged-in user has an active subscription, in order to view the video for our lesson. If the user is not signed in or has not paid for a subscription, they will only see the content from the `lesson` table.

Lastly, we want to display our video (hosted on YouTube) in an inline video player. For this, we can use the `react-player` package, and set some simple styling defaults that look great!

Implement Gated Content Using Row Level Security with Supabase

Each of our subscription options will be a product in Stripe. In this video, we create a `/pricing` page to display our new products. We use the Stripe package to fetch these options at build time and add some simple styling to make it look nice!

Annoyingly, the `prices` list is what we need to request for pricing information, but does not contain product information - such as `name`. This means we need to make an additional request for the product information for each price. Good thing we are only doing this once at build time, as the request time could add up pretty quickly, if we needed to do this on every request!

Lastly, we sort the list of plans from Stripe, to ensure that the prices go up in ascending order. Since each plan has a price, we can use a simple native JS sorting technique.

Use Stripe.js to Query Product Data and Pre-Render with Next.js

Manually typing the URL to navigate between our different pages is becoming cumbersome. Let's create a shared navigation bar that will display on every page in our application.

In this video, we create a new component to display our `Nav` options - `/` and `/pricing`. Each of our routes uses the Next.js `<Link>` component to make transitions between pages client-side. By rendering our `<Nav>` component in `pages/_app.js`, our navbar will display on every page.

Additionally, we would like to dynamically swap out our `login` and `logout` options, based on the user's signed in status. In order to do this, we can use the `useUser` hook and conditionally render each link based on our user's state.

Create Shared Nav Bar in Next.js with _app.js

Pre-rendered static pages are great for performance, however, they can reduce the quality of our user's experience. Content may feel less relevant and engaging if it doesn't change based on the information our user has already the app.

We will use the state of our user to dynamically change the call to action button for each plan. If we don't have a user, we want them to create an account; if we have a user but they are not subscribed, we want them to subscribe; and if we have a user that is subscribed, we want to give them the option to manage their subscription.

Additionally, we implement a loading state for our `useUser` hook, which can be used to determine whether we are waiting for our `auth.users` data to be enriched with the columns from our `profile` table.

By using the `isLoading` state, our pricing page can delay the rendering of the call to action button until we have the necessary state to display the correct one.

Query Dynamic Supabase Data in Static Pages Using Next.js

Supabase does not automatically set an auth cookie for our signed-in user. If we want to know who our user is on the server, we need to call `supabase.auth.api.setAuthCookie`.

We will create an API route to set a Supabase auth cookie. Additionally, we modify our `useUser` hook to call this endpoint anytime the state of our user changes. In order to make our HTTP requests slightly more readable, we install the `axios` library.

Now that we have a cookie being automatically sent with every request, we can use the `getUserByCookie` function to get the requesting user. If our API route requires a signed-in user, we can immediately send a `401` response if a user is not present.

We need to know our user's stripe_customer to initiate a checkout session with Stripe (next lesson), so need to enrich this user data with their profile.

While our request from the client to the API route contains our auth cookie, it is not automatically attached to server-side calls using our Supabase client. 

Pass Supabase Session Cookie to API Route to Identify User

Stripe makes taking payments easy. We can use the Stripe library to create a checkout session. This takes a configuration object, which describes how we want to charge our customer, the method we would like to use, and where we want to redirect the user based on a successful transaction or cancellation.

In this video, we create a new API route to initiate a Stripe session to charge for a particular subscription option. This API route returns the session's ID, which we can use to redirect the client. In order to do this, we install the `stripe-js` library - which is used client-side to interact with Stripe - and initialize it using our `publishable` key.

Lastly, we can use the test credit card for Stripe to confirm everything is working in test mode.

Charge Customer for Stripe Subscription in Next.js

Webhooks allow us to subscribe to particular events, and have Stripe let us know when they occur. From the Stripe dashboard we can specify an endpoint to call, and which events we care about. For subscriptions, we want to know when a new subscription occurs, is updated, or deleted.

In this video, we create a new API route to handle webhook events from Stripe. We can call the `stripe.webhooks.constructEvent` function which returns the event object. It also takes the `req`, `signature` and `signingSecret` to verify the request is valid and came from Stripe.

The `signature` can be extracted from the request's headers, and the signing secret is available in the Stripe dashboard, however, the Next.js `req` object is a different structure to what `constructEvent` is expecting. Therefore, we need to install the `micro` package and use its `buffer` function to get the `reqBuffer`. We also need to export a config object from our page component, setting `bodyParser` to `false`.

Subscribe to Stripe Webhooks Using Next.js API Routes

Stripe will call our `/stripe-hooks` API route anytime a subscription is created, updated, or deleted. By inspecting the `event.type`, we can specify what we want to do for each type of event. We will create a `switch` statement to process events from Stripe. If we are creating a subscription, we want to set `is_subscribed` to `true`.

This request to Supabase is happening on the server and does not have a session automatically attached. Since this endpoint is actually called by Stripe, we don't have a cookie that we can manually send along, so our request to update the user is being denied by RLS.

RLS can be bypassed by using Supabase's Service key. We can export a function from our `utils/supabase.js` file that returns a Supabase client - instantiated using the environment variable for the service key, rather than the anon key. Since this environment variable is only available server-side, this value will not be leaked to the client, and our database is still securely protected with RLS.

Use the Supabase Service Key to Bypass Row Level Security

We can create protected client pages that require a user to be signed in with Supabase to view, by exporting a `getServerSideProps` function from our page component. This will allow us to execute some logic on the server, before Next.js renders our component.

We will create a new page for `/dashboard`. It doesn't make sense for this page to be rendered unless we have a user, therefore, we can redirect the user to the `/login` route if they are not signed in.

We can extract our user from the Supabase auth cookie by calling the `getUserByCookie` function. If we don't have a user, we can redirect the request to our login page, otherwise, we can display our dashboard page.

We want it to be easy to navigate to this page if we have a user, therefore, we add a link to our `<Navbar>` component, and conditionally render it based on whether or not we have a user signed in.

Lastly, we implement an isLoading state and only display our user's subscription information in the dashboard.

Create a Client Page that Requires Authentication in Next.js Using getServerSideProps

We can use Stripe's Customer Portal to allow our users to manage their subscription and payment information. We will configure the Customer Portal in the Stripe Dashboard and create the required pages for `/terms` and `/privacy`.

Additionally, we create an API route to initiate our customer portal session. Similarly to our API route that charges for a subscription, we need to get the token from the cookie, add it to the Supabase session and fetch the associated `profile` data. 

Since the `updated` event gets triggered for creating a new subscription, as well as updating an existing one, and we want to perform the same changes in our Supabase DB, we can replace our case statement to handle `customer.subscription.updated`.

Lastly, we implement a case for `deleted`, setting `is_subscribed` to `false` and `interval` to `null`. Since this event doesn't actually trigger until the end of the customer's billing cycle, we can manually cancel the user's subscription from the Stripe dashboard.

Allow Customer to Manage Their Subscription with Stripe Customer Portal

The cancellation event from stripe doesn't get triggered until the end of the billing cycle. Therefore, our customer may still be using our app when their subscription status changes, with their dashboard confusingly displaying the incorrect data.

In this video, we implement Supabase real-time to subscribe the UI to changes in the database. We can initiate the subscription in our `useUser` hook, and specify that we only care about updates to our currently logged in user.

In order for Supabase to broadcast these changes on our websocket connection, we need to enable replication for the specific tables we want to subscribe to.

This means that anytime our `is_subscribed` value changes in the `profile` table, our `useUser` hook will automatically be updated with the new value, and the dashboard will immediately update to display the correct data.

Subscribe the UI to Database Changes with Supabase Real-Time

There are a few steps to go through to push our application and all of our services to production!

1. In order to "activate" our Stripe account, we need to fill out some details about our business. 

2. Update everywhere `[http://localhost:3000](http://localhost:3000)` is referenced in our application to use the `CLIENT_URL` environment variable, which can be set to localhost in `.env.local`.

3. Create a GitHub repo, and commit and push all of our changes.

4. Create a Vercel account, import project from GitHub, configure all environment variables and deploy!

5. Use our Vercel domain to configure our Customer Portal and Webhooks in Stripe.

6. Update `STRIPE_SIGNING_SECRET` environment variable in Vercel and manually redeploy.

7. Update our Site URL in Supabase and remove our test `user` and `profile` records.

8. Create a function hook in Supabase to use our Vercel domain

We now have a SaaS application deployed to the Internet that we can start making that side hustle money from!! 🎉

Build a SaaS product with Next.js, Supabase and Stripe

Instructor

Course content (26 lessons)

Instructor