Create a New Supabase Project and Basic PostgreSQL Schema

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

Query Supabase Data from Next.js Server Components

Create an OAuth App with GitHub

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

Refresh Session Cookie for Next.js Server Components with Middleware

Restrict Access to Authenticated Users with Supabase RLS Policies

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

Implement Protected Routes for Authenticated Users with Supabase Auth

Generate TypeScript Definitions from PostgreSQL Schema with Supabase CLI

Setup a Foreign Key relationship between PostgreSQL tables

Automatically Generate a Profile for Every User with PostgreSQL Function Triggers

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

Create a PostgreSQL Join Table in Supabase Studio

Implement Dynamic Buttons with Next.js Client Components

Declare Global Intersection Types for Transformed Supabase Data with Typescript

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

Dynamically Update UI with Database Changes using Supabase Realtime

Style a Twitter clone with Tailwind CSS

Deploy Next.js App Router project to production with Vercel

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

[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)

github

https://app.egghead.io/api/v1/lessons/supabase-authenticate-users-with-github-oauth-using-supabase-and-next-js-client-components/subtitles

https://app.egghead.io/api/v1/lessons/supabase-authenticate-users-with-github-oauth-using-supabase-and-next-js-client-components/transcript

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

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

Social Share Links

Code Snippets

Resources