🔒 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: console.cloud.google.com/
- Supabase SSR Auth for Next.js: supabase.com/docs/guides/auth...
- Shadcn UI Blocks: 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](ray.so/).
[0] Link to Supabase Profiles Table Statement: ray.so/oowaXXp
[1] utils/supabase/client.ts ray.so/tJDUFyf
[2] utils/supabase/server.ts ray.so/zCENWNw
[3] utils/supabase/middleware.ts ray.so/ogqZSxd
[4] ./middleware.ts ray.so/4W0KZh0
[5] lib/auth-actions.ts ray.so/4dOJMOJ
[6] app/error/page.tsx ray.so/sEDQPGF
[7] app/(auth)/auth/confirm/route.ts ray.so/YiFaRSF
[8] Supabase confirm signup template ray.so/59O0zjT
[9] app/(auth)/login/components/LoginForm.tsx ray.so/uDTklnQ
[10] app/(auth)/login/components/SignInWithGoogleButton.tsx ray.so/Km9O7Hu
[11] app/(auth)/signup/components/SignUpForm.tsx ray.so/hfLy1o8
[12] app/(auth)/logout/page.tsx ray.so/GPoeLVJ
[13] components/LoginLogoutButton.tsx ray.so/GQpLnYP
[14] components/UserGreetText.tsx ray.so/Ig6NjPR
[15] app/page.tsx 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: github.com/TheDevLogger/nextj...
30 апр 2024
