Supabase Auth in Next.js 13 Server Components and Route Handlers

In this video tutorial, we will be learning about building a web application with ‪@Supabase‬ and Next.js 13, using Supabase's powerful built-in authentication system. We will start by installing necessary packages, setting environment variables, and creating three different Supabase Clients: server, browser, and middleware - each used for specific purposes.
We will also create components for Supabase and auth logic and demonstrate how to use context providers to create a single instance of the Supabase client for our entire application.
By the end of this video, you will have a cutting-edge application with authentication systems implemented in seconds. So, join us and take your web development skills to the next level!
- timestamps -
00:00 - Intro
00:25 - Application Walkthrough & Setup
03:17 - Creating Supabase Clients
07:54 - Root Layout
08:52 - Supabase Provider
21:18 - Components Walkthrough
25:05 - Protecting Routes
Source Code: github.com/batuhanbilginn/sup...
Learn more: makr.dev
#supabase #typescript #development #developer

[@adal7769]

thanks for the video !! also i agree with the font-size comment, but the video was very helpful!

[@makrdev]

I’m glad you liked it. The font size issue will be fixed anymore, thank you for your feedback 👍

[@tomasgonzalez1757]

this is far better explained than the supabase docs. Thank you!!!!! great content

[@tomasgonzalez1757]

btw, createServerComponentSupabaseClient has been replaced with createServerComponentClient

[@makrdev]

Glad it was helpful!

[@yashpancholi3706]

This worked for me Thanks for the help!

[@KislayRaj]

Super helpful and working! Thanks for the video!!

[@makrdev]

I’m glad you liked it 👍

[@user-df5zx1ft6n]

Great explanation. This is very helpful. You have saved me hours. Thanks! Please post more videos on next JS. I feel with new updates in Next 13 it's hard to keep up with them.

[@makrdev]

Thank you so much 😊 I’ll post it 🤞

[@giroda]

Very well prepared, actually the explanation way better than other ones, step by step, not like pasting from the other monitor and passing without giving any word about why, that is the most important!

[@cidhighwind8590]

Not even 4 months in and create the createServerComponentSupabaseClient function (as well as many others im sure) has been replaced with createServerComponentClient in the Next.js Auth Helpers. This change was made in version 0.7.x of the Auth Helpers. For anyone who wants to know.

[@makrdev]

Yeah lot's of changed after this video. I'll be waiting a little bit more before creating a new one.

[@shawnyeo7086]

they changed again with SSR fucking ridiculous

[@beauhawkinson1758]

This was a wonderful implementation!

[@makrdev]

Thank you!

[@UmairQamer]

You are doing an amazing job man. Just a little suggestion - The intro music was too loud compared to your voice

[@makrdev]

Upps, thanks for the feedback bro. I didn’t realize it. I’ll fix it. 🤞

[@8koi245]

Holy thanks for the warning

[@appstuff6565]

Hey makrdev! Thanks for this. Just started and I read the description and it cleared a lot of things that im looking for before starting the video. I'll get back to you how it went! Subbed.

[@appstuff6565]

update: many skipped steps for beginners like me. like where did the utils folder come from etc etc. Also, please tone up a bit because when the music/sfx plays it blasts my ears. Thanks. Dony worry, Still subbed.

[@appstuff6565]

unfortunately i had to stop within 5 minutes of this. Maybe next time.

[@waleedtahir9933]

For Those who Are Saying Font Size Issue : 1 : Use Laptop 2 : Watch Video in 1440 quality 3 : In mobile use Zoom Mode youtube introduced it recently BTW Thanks Man You are a life saver Please Continue these helpful videos 😍😍😎😎 Lots of love from Pakistan

[@makrdev]

Thank you so much bro!

[@michaelholmes924]

Cool to know this is possible! So client components auth will work the old way? I can still use supabase client as before?

[@makrdev]

They are constantly change the way it works. I’ll need to make another video probably in the near future.

[@doumams347]

I like the project and how you structured it ! My problem is that I receive an error saying "./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in 'C:\Users\Bingo\Documents\Projets personnels ext_supabase_auth ode_modules ode-fetch\lib'" And i really don't know how to fix it

[@makrdev]

It’s a known problem caused by Supabase. They are currently working on a fix for this issue however it’s not a critical thing so you can safely ignore this error. Also, you can install ‘encoding’ package as a devDependency to fix it manually.

[@panduananto7179]

Hello, can you please try, with this setup doing dynamic routing with the new generateStaticParams function? I can't get it to work

[@makrdev]

I’ll post a video today, which contains dynamic routing 🤞

[@justisabelll]

what camera do you use? this video looks great.

[@makrdev]

Sony A73 👍

[@tomasgonzalez1757]

​ @makrdev i have a question, have you tried using Supabase using this Auth Setup but managin the rest of the data with Prisma? i feel that it can be done since i can send the session data to the DB through Prisma, and avoid linking Prisma with the users schema that seems to be the step that brings most of the problems to users

[@makrdev]

I haven’t tried it but the problem you need to solve is authorization layer. I don’t like making things complicated. What is the advantage of using Prisma here?

[@shakti_pattanaik01]

Hi Mark, thank you for the video. I have a follow up question. How to create a protected and unprotected route in this type of settings? suppose I want to create a protected routed '/profile' and unprotected route '/about', how do I achieve that?

[@makrdev]

You can create an array of the routes you want to protect. In middleware, check if the route is in that list or not. Redirect user based on the condition.

[@shakti_pattanaik01]

@@makrdev thank you. Will try this. Please keep on posting more videos on nextjs+supabase 👍🏻

[@olekkalashnyk4771]

I also like to use supabase and directus, but I'm having problems with self-deploy directus, I can't figure out how to deploy and create a production and development server myself. If you could help - record a video or personally I would be very grateful to you)

[@makrdev]

You can deploy Directus with easily with Railway. You just need to connect your Github repo with it. Also, you can create snapshot for your local environment. If you change your schema on local you can always push the difference with same method. There is a great article about this: docs.directus.io/cookbook/migration/node.html#migrate-your-data-model-with-node-js I'll create tutorials on this topic soon. So, stay tuned. Also, you can always reach out to me from my Twitter.

[@emiliano2471]

how do you remove the access token from the URL after redirecting?

[@makrdev]

Just replace the URL with router.replace()

[@dheerajs2838]

you need to increase the font size man .. very hard to see

[@makrdev]

Yeap, I increased it on latest videos. Thanks for the feedback 👍

[@skverskk]

Can't read from your video. The fonts are so-so small, that it's nearly impossible to watch

[@makrdev]

Thank you for the feedback! I’ll increase the font size.

[@skverskk]

@@makrdev Thank you

[@imalizardperson9987]

👎

[@JoelLawler]

Great explanation. Thank you for doing these videos. They are super helpful. I am running into an issue that I can't seem to resolve. I am getting this error: ./utils/supabase-server.ts ReactServerComponentsError: You're importing a component that needs server-only. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component. ,-[/Users/joellawler/Projects/JavaScript/ICDashboardUI/ui/utils/supabase-server.ts:1:1] 1 | import { createServerComponentSupabaseClient } from "@supabase/auth-helpers-nextjs"; 2 | import { cookies, headers } from "next/headers"; 3 | import "server-only"; : ^^^^^^^^^^^^^^^^^^^^^ 4 | 5 | import type { Database } from "../types/supabase"; `---- One of these is marked as a client entry with "use client": ./utils/supabase-server.ts ./components/providers/supabase-provider.tsx ./components/providers/supabase-auth-provider.tsx ./app/(auth)/login/login-form.tsx Grateful for your thoughts on this.

[@makrdev]

Looks like you are trying to import Supabase Server instance into a client component. In client components you should use the one you created in useSupabase hook.

[@JoelLawler]

@@makrdev Thank you.

[@user-qz5yx3hk6r]

I get: {code: '42P01', details: null, hint: null, message: 'relation "public.profiles" does not exist'}

[@makrdev]

Yeah, first you need to create profiles table. You can use the auth starter from SQL to create your profiles table.