Supabase + Next.js ULTIMATE Auth Combo

🔒 Secure User Authentication with Supabase and Next.js 🌐

Are you ready to build a modern web application with seamless user authentication? In this video, we'll walk you through the process of integrating Supabase auth with Next.js and creating a sleek user interface using Shadcn UI.

🚀 What You'll Learn:

- Setting up Supabase authentication in a Next.js app
- Configuring Google as an authentication provider through Supabase
- Creating a clean and intuitive user interface with Shadcn UI components
- Implementing secure server-side rendering (SSR) for authenticated pages

📝 Resources:

- Google Cloud Console: https://console.cloud.google.com/
- Supabase SSR Auth for Next.js: https://supabase.com/docs/guides/auth...
- Shadcn UI Blocks: https://ui.shadcn.com/blocks

💻 Code Snippets:
We've provided code snippets for various parts of the project, including the Supabase client setup, middleware configuration, authentication actions, and more. Check the description below for links to the snippets on [Ray.so](http://ray.so/).

[0] Link to Supabase Profiles Table Statement: https://ray.so/oowaXXp

[1] utils/supabase/client.ts https://ray.so/tJDUFyf

[2] utils/supabase/server.ts https://ray.so/zCENWNw

[3] utils/supabase/middleware.ts https://ray.so/ogqZSxd

[4] ./middleware.ts https://ray.so/4W0KZh0

[5] lib/auth-actions.ts https://ray.so/4dOJMOJ

[6] app/error/page.tsx https://ray.so/sEDQPGF

[7] app/(auth)/auth/confirm/route.ts https://ray.so/YiFaRSF

[8] Supabase confirm signup template https://ray.so/59O0zjT

[9] app/(auth)/login/components/LoginForm.tsx https://ray.so/uDTklnQ

[10] app/(auth)/login/components/SignInWithGoogleButton.tsx https://ray.so/Km9O7Hu

[11] app/(auth)/signup/components/SignUpForm.tsx https://ray.so/hfLy1o8

[12] app/(auth)/logout/page.tsx https://ray.so/GPoeLVJ

[13] components/LoginLogoutButton.tsx https://ray.so/GQpLnYP

[14] components/UserGreetText.tsx https://ray.so/Ig6NjPR

[15] app/page.tsx https://ray.so/fu9gLKL

⏱️ Timecodes
0:22 - Creating Project
0:50 - Setup Supabase with Google Auth
2:06 - Add Supabase to Next.js Project
3:52 - Setup Auth UI
7:02 - Running the Project
7:57 - Final Thoughts


Github Repo: https://github.com/TheDevLogger/nextj...