Supabase CLIENT Authentication Made Easy with Next.js

Подписаться 21 тыс.

50% 1

In this video, I demonstrate how to set up client-side authentication using Supabase Auth. I explain when to use it, and compare it to server-side authentication to help you make the best choice for your project.
Subscribe 👉 / @coleblender
My personal website 👉 coleblender.com
My business website 👉 superlativesit...
GitHub 👉 github.com/Col...
X 👉 / coleblender
IG 👉 / yazzibelani
LinkedIn 👉 / cole-blender
GitHub Repo 👉 github.com/Col...
Supabase Setup 👉 • MASTER Supabase Authen...

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 12

@swarajchavan1377 Месяц назад

Is it necessary to make /api/get-user route? what if instead of fetch to that route i do like- // const user: User = await fetch('/api/get-user').then((res) => res.json()); const supabase = supabaseClient(); const { data: userData, error } = await supabase.auth.getUser(); setUser(userData.user); I checked and found my method didnt work its not returning user, but dont know why.

@coleblender Месяц назад

No you can’t do that because that function only works on the server. This is why we run the function in the api route because that takes place on the server

@zizazorro5509 3 дня назад

This works, but it creates the auth listener every time my component rerenders. I tried using a useEffect, but then the onAuthStateChange listener doesnt work anymore if you logout, for example. How do you prevent having a lot of listeners?

@coleblender 2 дня назад

You might be able to use something called a singleton pattern. If you ask ChatGPT how to turn your code into a singleton pattern it may work how you want

@zizazorro5509 2 дня назад

@@coleblender Yes I tried that one as well, the problem occurs when you sign in/out, it doesn't trigger. Also feels a bit like a bug, SIGNED_OUT never triggers. For now I solved it by getting the data from a server component first

@coleblender 2 дня назад

@@zizazorro5509 Yeah I think it's not designed very well on top of not having very good documentation. In practice I use server auth for everything

@Devine-q2i 2 месяца назад

@coleblender Love your content ! I have a question. Why change the way to handle the client auth from your video " MASTER Supabase Authentication: Server vs. Client Auth Tutorial". In the last one we didn't have to create a route to handle the fetch. Is this way better ? Thanks for your answer

@coleblender 2 месяца назад

Thanks bro! So in the last one we’re just getting the user from Supabase auth. In the real world you’ll probably also have a users table in your database with all of their data. So every time we want the user we’ll also want to get their info from the database which requires the api route. You could store the user data in user.metadata which would make it so you don’t need the route but I’ve decided to create a users table. I’m going to do a little research and make sure this is the best move because you could go either way

@lev1ato 3 месяца назад

I am not sure why but I am still getting the infinite loop after following along with the shouldUpdate. The example form the previous video seems to work good, but when I do: console.log('event', event); console.log('session', session); inside the onAuthStateChange I also see the infinite loop there. I also found a solution with useEffect but it does not update after log out. Why don't they just document an example 😭😭

@coleblender 3 месяца назад

Yeah for real they definitely need one! Send me a picture of your code on X and I’ll see if I can spot the problem. My handle’s in the description

@lev1ato 3 месяца назад

@@coleblender thanks man, appreciate it! I don't use X sadly, but I managed to scaffold something after playing around. I basically just have the similar getUser function in client.ts as in the server.ts and then in component with useEffect setting the user state to what getUser returns. Not sure if it is correct way to go but does the job for now.. I might be doing something wong with your approach but can't figure out what. Anyway thank you very much for great examples the pages that need to be static are static now!

@coleblender 3 месяца назад

@@lev1ato Hell yeah bro glad you got it figured out!