1
Create a Supabase Project
28s
2
Create a Table in Supabase
35s
3
Create a Next.js App with Tailwind CSS
39s
4
Query Data From Supabase Using Next.js
2m 21s
5
Use Next.js to Query a Single Record From Supabase
3m 6s
6
Implement Third Party Authentication with GitHub in Next.js Using Supabase
3m 5s
7
Add Relationships Between Tables in Supabase Using Foreign Keys
1m 12s
8
Use Postgres Functions to Implement Database Logic with Supabase
1m 5s
9
Use Supabase to Subscribe to Database Events with Postgres Triggers
1m 4s
10
Create a Stripe Customer with Next.js API Routes
3m 46s
11
Generate a Custom API Key to Secure an API Route in Next.js
1m 10s
12
Automatically Create a Stripe Customer for Each User with Supabase Function Hooks
3m 50s
13
Make User State Globally Accessible in Next.js with React Context and Providers
5m
14
Implement Authorization Using Row Level Security and Policies
2m 17s
15
Implement Gated Content Using Row Level Security with Supabase
4m 27s
16
Use Stripe.js to Query Product Data and Pre-Render with Next.js
3m 9s
17
Create Shared Nav Bar in Next.js with _app.js
1m 39s
18
Query Dynamic Supabase Data in Static Pages Using Next.js
2m 28s
19
Pass Supabase Session Cookie to API Route to Identify User
4m 16s
20
Charge Customer for Stripe Subscription in Next.js
2m 23s
21
Subscribe to Stripe Webhooks Using Next.js API Routes
3m 36s
22
Use the Supabase Service Key to Bypass Row Level Security
2m 51s
23
Create a Client Page that Requires Authentication in Next.js Using getServerSideProps
2m 55s
24
Allow Customer to Manage Their Subscription with Stripe Customer Portal
5m 10s
25
Subscribe the UI to Database Changes with Supabase Real-Time
1m 26s
26
Configure Stripe for Production and Deploy Next.js Application with Vercel
6m 4s

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

Supabase
Next.js

Share this video with your friends

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.

Course

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

~ 3 years ago

BTW, you may need to restart your Next.js dev server whenever you add new variables to .env.local.

Jon Meyersinstructor

~ 3 years ago

Excellent call out! Thanks! 🙌