In this course, we build a Twitter clone from scratch, using the [Next.js App Router](https://nextjs.org/docs/app) and [Supabase](https://supabase.com/). We dive deep on the Next.js App Router, learning about:

- Client Components
- Server Components
- Route Handlers
- Server Actions
- Middleware
- Implementing Optimistic UI

On the Supabase side we look at:

- Configuring Supabase Auth to use cookies
- Using Row Level Security (RLS) policies to implement Authorization
- Querying data across multiple tables
- Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI
- Subscribing to realtime database changes

This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

[Supabase](https://supabase.com/) is a collection of open source tools that wrap around a PostgreSQL database - Hosting, Auth, Realtime, File Storage, Edge Functions etc. In this lesson, we go to [database.new](https://database.new) to create a free Supabase project.

Additionally, we create a `tweets` table and populate it with some seed data.

## Code Snippets

**Create a `tweets` table**

```sql
create table if not exists tweets (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  title text not null
);
```

**Insert tweets**

```sql
insert into tweets(title)
values
  ('first tweet'),
  ('second tweet'),
  ('third tweet');
```

## Resources

- [Supabase docs](https://supabase.com/docs)
- [Supabase SQL Editor](https://app.supabase.com/project/_/sql)

Create a New Supabase Project and Basic PostgreSQL Schema

[Next.js](https://nextjs.org/) is a full-stack React framework that provides the client and server building blocks to create powerful web applications. In this lesson we run the `create-next-app` CLI command to create a new Next.js application, configured with:

- [App Router](https://nextjs.org/docs)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)

## Code Snippets

**Create Next.js app**

```bash
npx create-next-app blue-bird
```

## Resources

- [Next.js App Router docs](https://nextjs.org/docs)
- [TypeScript docs](https://www.typescriptlang.org/)
- [Tailwind CSS docs](https://tailwindcss.com/)

Create a Next.js App with the create-next-app CLI

Our [Supabase](https://supabase.com) project is a hosted PostgreSQL database. In this lesson, we install the [Supabase Auth Helpers](https://www.npmjs.com/package/@supabase/auth-helpers-nextjs) and [Supabase.js](https://www.npmjs.com/package/@supabase/supabase-js) npm packages, and configure environment variables to query data from Supabase:

```
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```

These values can be found in [your Supabase project's API Settings](https://app.supabase.com/project/_/settings/api).

Additionally, we create a new Supabase instance using the `createServerComponentClient` function, then make our Server Component Async and suspend its rendering until our request for Supabase data resolves.

Lastly, we implement a Row Level Security (RLS) policy to enable read access for the `tweets` table.

## Code Snippets

**Install Supabase packages**

```bash
npm i @supabase/auth-helpers-nextjs @supabase/supabase-js
```

**Import createServerComponentClient function**

```tsx
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
```

**Create Supabase client in Server Component**

```tsx
const supabase = createServerComponentClient({ cookies });
```

**Fetch data from Supabase**

```tsx
const { data: tweets } = await supabase.from("tweets").select();
```

**Pretty print data with JSON.stringify**

```tsx
<pre>{JSON.stringify(tweets, null, 2)}</pre>
```

**Enable read access with RLS policy**

```sql
create policy "anyone can select tweets" ON "public"."tweets"
as permissive for select
to public
using (true);
```

## Resources

- [Supabase Auth Helpers for Next.js](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Supabase.js docs](https://supabase.com/docs/reference/javascript/installing)
- [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security)

Query Supabase Data from Next.js Server Components

[Supabase](https://supabase.com/) includes many ways to authenticate users - Email and password, magic link, mobile OTP etc. In this lesson we implement social login with GitHub by registering a new OAuth Application and providing Supabase with the Client ID and Secret.

## Resources

- [Supabase guide to Login with GitHub](https://supabase.com/docs/guides/auth/social-login/auth-github)

Create an OAuth App with GitHub

[Supabase](https://supabase.com) includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub.

Additionally, we discuss the differences between Client and Server Components in the [Next.js App Router](https://nextjs.org/docs/app):

- Client Components: user interactivity
- Server Components: data fetching

Lastly, we create a Route Handler to exchange an authentication code from GitHub for their Supabase session.

## Code Snippets

**Authenticate with GitHub OAuth**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
  options: {
    redirectTo: "http://localhost:3000/auth/callback",
  },
});
```

**Exchange code for Supabase session**

```tsx
await supabase.auth.exchangeCodeForSession(code);
```

## Resources

- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Next.js App Router docs](https://nextjs.org/docs/app)

Authenticate Users with GitHub OAuth using Supabase and Next.js Client Components

Server Components cannot set cookies in the [Next.js App Router](https://nextjs.org/docs/app). In this lesson, we implement middleware to refresh expired [Supabase](https://supabase.com/) sessions.

[Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) runs immediately before the route is loaded. By using it to refresh our user's session, we ensure it is valid by the time it loads the Server Component and attempts to fetch data from Supabase.

## Code Snippets

**Refresh expired sessions**

```tsx
supabase.auth.getSession();
```

## Resources

- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Next.js App Router docs](https://nextjs.org/docs/app)
- [Next.js Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware)

Refresh Session Cookie for Next.js Server Components with Middleware

Since we're using [Supabase](https://supabase.com/) to authenticate our users, it knows who our user is throughout the rest of the Supabase environment.

In this lesson, we modify our Row Level Security (RLS) policy to only apply to the `authenticated` role to ensure that only authenticated users can select tweets.

Additionally, we use the `useRouter` hook and `router.refresh()` to run our Server Component again and fetch fresh data from Supabase, after the user signs in or out.

## Code Snippets

**Enable authenticated read access with RLS policy**

```sql
create policy "anyone can select tweets" ON "public"."tweets"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)
- [useRouter hook](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter)

Restrict Access to Authenticated Users with Supabase RLS Policies

The first render of a Client Component happens on the server. This is called Server-side rendering (SSR). However, Client Components are synchronous, so they cannot suspend rendering while fetching data - such as the user's session. This means we either need to display a loading spinner or render the logged out state, while fetching that async data, causing a flash of incorrect state for the user.

In this lesson, we look at rendering a Client Component from a Server Component that can asynchronously fetch the user's [Supabase](https://supabase.com/) session, and pass it as a prop to the Client Component, making the user's session available on its first SSR render.

## Code Snippets

**Render Client Component from Server Component**

```tsx
const {
  data: { session },
} = await supabase.auth.getSession();

return <ClientComponent session={session} />;
```

## Resources

- [Client and Server Components docs](https://nextjs.org/docs/getting-started/react-essentials)
- [Supabase Auth Helpers for Next.js docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)

Dynamically Render UI Based on User Session with SSR in Next.js Client Components

Since [Supabase](https://supabase.com/) requires our user to be authenticated to fetch tweets, it doesn't make sense for an unauthenticated user to visit the landing page. In this lesson, we implement protected routes that are only accessible to authenticated users.

Additionally, we create a `/login` route to redirect unauthenticated users, which allows them to sign in with GitHub.

## Code Snippets

**Redirect unauthenticated users**

```tsx
const {
  data: { session },
} = await supabase.auth.getSession();

if (!session) {
  redirect("/login");
}
```

## Resources

- [Supabase Auth Helpers for Next.js docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)

Implement Protected Routes for Authenticated Users with Supabase Auth

[Typescript](https://www.typescriptlang.org/) reduces runtime errors and makes our code more maintainable. [Supabase](https://supabase.com/) allows us to introspect our PostgreSQL schema and generate TypeScript definitions.

In this lesson we generate an access token to use the [Supabase CLI](https://supabase.com/docs/guides/cli) and generate TypeScript definitions. Additionally, we write our types to a file, which can be passed to our Supabase client, giving our application full type-safety across client, server and database.

Lastly, we make our Database types globally available so we don't need to import them every time we create a Supabase client.

## Code Snippets

**Login to Supabase CLI**

```bash
npx supabase login
```

**Generate TS definitions file**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [Generate Supabase access token](https://app.supabase.com/account/tokens)
- [TypeScript docs](https://www.typescriptlang.org/)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Generate TypeScript Definitions from PostgreSQL Schema with Supabase CLI

[Supabase](https://supabase.com/) uses the `auth.users` table to store information about our users and their sessions. In this lesson, we add a column to the `tweets` table to associate each tweet with one of our users.

Additionally, we set up cascading deletes, so when a user is deleted from the `auth.users` table, their tweets are also deleted.

Lastly, because our database schema has changed, our TypeScript definitions are now incorrect. Therefore, we use the Supabase CLI to introspect our PostgreSQL schema and create a new `database.types.ts` file.

## Code Snippets

**Add foreign key relationship to auth.users**

```sql
alter table public.tweets
add user_id uuid references auth.users on delete cascade not null;
```

**Generate TypeScript definitions**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [Supabase Auth docs](https://supabase.com/docs/guides/auth)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Setup a Foreign Key relationship between PostgreSQL tables

[Supabase](https://supabase.com/) has an `auth.users` table that contains information about our user and their session. We want to display the user's name, username and avatar alongside their tweets, but the `auth.users` table cannot be publicly accessible, as it contains sensitive information.

In this lesson, we create a new table called `profiles` and populate it with the data we want to display from the `auth.users` table. Additionally, we set up a PostgreSQL Function and Trigger to create a new profile for any user added to the `auth.users` table.

Lastly, we create an RLS policy for the `profiles` table to enable read access, and re-generate our TypeScript definitions file to contain our new table.

## Code Snippets

**Create profiles table**

```sql
create table public.profiles (
  id uuid not null references auth.users on delete cascade primary key,
  name text not null,
  username text not null,
  avatar_url text not null
);
```

**Enable Row Level Security**

```sql
alter table public.profiles enable row level security;
```

**Enable read access with RLS policy**

```sql
create policy "anyone can select profiles" ON "public"."profiles"
as permissive for select
to public
using (true);
```

**Create PostgreSQL Function to create profile**

```sql
create function public.create_profile_for_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, name, username, avatar_url)
  values (
    new.id,
    new.raw_user_meta_data->'name',
    new.raw_user_meta_data->'user_name',
    new.raw_user_meta_data->'avatar_url'
  );
  return new;
end;
$$;
```

**Create PostgreSQL Trigger to create profile**

```sql
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.create_profile_for_user();
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Automatically Generate a Profile for Every User with PostgreSQL Function Triggers

[Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) are a way to perform server-side mutations in the [Next.js App Router](https://nextjs.org/docs/app). In this lesson, we create a `<NewTweet />` component that renders a form for the user to enter a new tweet. This form is submitted to a Server Action, which writes this data to [Supabase](https://supabase.com/).

Additionally, we create a Server Action Supabase client and call the `getUser` function to fetch the currently signed in user.

Lastly, we write a Row Level Security (RLS) policy to enable the `insert` action for `authenticated` users.

## Code Snippets

**Posting form to Server Action**

```tsx
export default function NewTweet() {
  const addTweet = async () => {
    "use server";
  };

  return <form action={addTweet}>...</form>;
}
```

**Create Supabase client in Server Action**

```tsx
const supabase = createServerActionClient<Database>({ cookies });
```

**Get user from Supabase client**

```tsx
const {
  data: { user },
} = await supabase.auth.getUser();
```

**Insert tweet with Supabase**

```tsx
await supabase.from("tweets").insert({...});
```

## Resources

- [Server Action docs](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)
- [Supabase Auth Helpers for Next.js](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Inserting data with supabase-js](https://supabase.com/docs/reference/javascript/insert)

Run Authenticated Server-side Mutations with Next.js Server Actions

We create a PostgreSQL join table for `likes` in the [Supabase](https://supabase.com) dashboard. This has a many-to-many relationship between the `profiles` and `tweets` table, allowing us to store each instance of a like between a user and a tweet.

Additionally, we create Row Level Security (RLS) polices to enable `select`, `insert` and `delete`.

## Code Snippets

**Create likes table**

```sql
create table public.likes (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  user_id uuid references public.profiles on delete cascade not null,
  tweet_id uuid references public.tweets on delete cascade not null
);
```

**Enable Row Level Security**

```sql
alter table public.likes enable row level security;
```

**Enable insert action with RLS policy**

```sql
create policy "authenticated users can insert their own likes" ON "public"."likes"
as permissive for select
to authenticated
using (user_id = auth.uid());
```

**Enable delete action with RLS policy**

```sql
create policy "authenticated users can delete their own likes" ON "public"."likes"
as permissive for delete
to authenticated
using (user_id = auth.uid());
```

**Enable select action with RLS policy**

```sql
create policy "authenticated users can select likes" ON "public"."likes"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Create a PostgreSQL Join Table in Supabase Studio

In this lesson, we create a new component to display the likes from [Supabase](https://supabase.com/). This component will be interactive so it needs to be a Client Component.

Additionally, we extend our Supabase query for `tweets`, and join the columns from our `likes` table.

Lastly, we make this button dynamic by checking whether the user has previously liked this tweet. If they have not, we increment the likes by 1, otherwise, we decrement them by 1.

## Code Snippets

**Querying data across tables**

```tsx
const { data } = await supabase
  .from("tweets")
  .select("*, profiles(*), likes(*)");
```

## Resources

- [Client Component docs](https://nextjs.org/docs/getting-started/react-essentials#client-components)
- [Querying across tables with supabase-js](https://supabase.com/docs/reference/javascript/select)

Implement Dynamic Buttons with Next.js Client Components

[TypeScript](https://www.typescriptlang.org/) reduces runtime errors and makes code more maintainable. In this lesson, we use the [Supabase](https://supabase.com/) CLI to introspect our PostgreSQL schema and generate TypeScript definitions.

Additionally, we resolve a collection of TypeScript errors and create a custom union type for our transformed tweets - making it globally available throughout our Next.js application.

## Code Snippets

**Custom type for TweetWithAuthor**

```tsx
type TweetWithAuthor = Tweet & {
  author: Profile;
  likes: number;
  user_has_liked_tweet: boolean;
};
```

**Generate TypeScript definitions**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [TypeScript docs](https://www.typescriptlang.org/)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Declare Global Intersection Types for Transformed Supabase Data with Typescript

"Optimistic UI" is a pattern for updating the page immediately with the data you have available, rather than waiting for the database query to resolve. In this lesson, we use React's `useOptimistic` hook to create an array of tweets that we can instantly update with our new state, when the user clicks the like button.

## Code Snippets

**Call useOptimistic hook**

```tsx
const [optimisticState, addOptimisticState] = useOptimistic(
  initialState,
  (currentState, newState) => {
    // merge state
    // return new state
  }
);
```

**Add optimistic tweet**

```tsx
addOptimisticTweet({
  ...tweet,
  likes: tweet.likes - 1,
  user_has_liked_tweet: !tweet.user_has_liked_tweet,
});
```

## Resources

- [useOptimistic hook](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#enhancements)

Implement Optimistic UI with the React useOptimistic hook in Next.js

[Supabase](https://supabase.com/) allows us to subscribe to changes in the database, and update our UI, without the user needing to refresh the page. In this lesson, we create a subscription for `postgres_changes`, listening for any change events - insert, update or delete - on our tweets table.

Additionally, we call the `router.refresh()` function to re-run our Server Components, fetching fresh data from Supabase.

## Code Snippets

**Subscribe to database changes**

```tsx
const channel = supabase
  .channel("realtime tweets")
  .on(
    "postgres_changes",
    {
      event: "*",
      schema: "public",
      table: "tweets",
    },
    (payload) => {
      router.refresh();
    }
  )
  .subscribe();
```

## Resources

- [Supabase Realtime docs](https://supabase.com/docs/guides/realtime)
- [useRouter hook docs](https://nextjs.org/docs/app/api-reference/functions/use-router)

Dynamically Update UI with Database Changes using Supabase Realtime

[Tailwind](https://tailwindcss.com/) is an atomic CSS framework that makes styling an application more consistent and maintainable. In this lesson, we look at building out a similar UI to Twitter using only Tailwind classes.

Additionally, we use a heart icon from Feather Icons for our like button, and create a new `<GitHubButton />` component that displays a nicely styled GitHub logo to trigger the user authentication flow.

## Resources

- [Tailwind docs](https://tailwindcss.com/)
- [Feather Icons](https://feathericons.com/)
- [GitHub Logo](http://github.com/logos)

Style a Twitter clone with Tailwind CSS

[Vercel](https://vercel.com) is a hosting platform that works very well with [Next.js](https://nextjs.org) - because it's their framework! In this lesson, we prepare our project to be deployed to production by:

- Pushing code to [GitHub](https://github.com/)
- Deploying repo to [Vercel](https://vercel.com)
- Updating [GitHub OAuth app](https://github.com/settings/developers) to use production URL
- Updating [Supabase](https://supabase.com/) project to use production URL

## Resources

- [Deploy Next.js to Vercel guide](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy)
- [GitHub OAuth App settings](https://github.com/settings/developers)
- [Vercel](https://vercel.com)
- [Supabase URL configuration](https://app.supabase.com/project/_/auth/url-configuration)

Build a Twitter Clone with the Next.js App Router and Supabase

Instructor

Course Content