- 21
- 86 098
activenode
Germany
เข้าร่วมเมื่อ 4 ม.ค. 2022
😱 Crazy new Supabase feature: Understand and learn about anonymous users
Support me on: TH-cam (Super Thanks) or ko-fi.com/activenode
Subscribe to my book release: supa.guide/
The repository: github.com/activenode/yt-edu-supa-happy-store
Book me for expert Supabase consultancy for your project (45mins sufficient for most): meet.brevo.com/david-lorenz
00:00 - Start
01:03 - Project Setup
02:48 - useUser hook
04:02 - Product / addToCart
04:20 - Cart Page / Checkout
04:54 - Allowing anonymous Users
06:34 - adding signInAnonymously
09:51 - Showing "signed in" only for real users
10:29 - user.is_anonymous
10:52 - Checkout and convert anonymous user to real user
12:07 - Understanding what happened to the anon user
12:55 - Confirm mail with Inbucket
13:16 - Google SignIn with Anonymous User
14:21 - Merging an existing user with an anonymous cart
18:21 - Cleaning up anonymous users
19:27 - Security and Stability Implications
Subscribe to my book release: supa.guide/
The repository: github.com/activenode/yt-edu-supa-happy-store
Book me for expert Supabase consultancy for your project (45mins sufficient for most): meet.brevo.com/david-lorenz
00:00 - Start
01:03 - Project Setup
02:48 - useUser hook
04:02 - Product / addToCart
04:20 - Cart Page / Checkout
04:54 - Allowing anonymous Users
06:34 - adding signInAnonymously
09:51 - Showing "signed in" only for real users
10:29 - user.is_anonymous
10:52 - Checkout and convert anonymous user to real user
12:07 - Understanding what happened to the anon user
12:55 - Confirm mail with Inbucket
13:16 - Google SignIn with Anonymous User
14:21 - Merging an existing user with an anonymous cart
18:21 - Cleaning up anonymous users
19:27 - Security and Stability Implications
มุมมอง: 1 112
วีดีโอ
2️⃣ Realtime Chess Game | The Chess Pieces [Pure JS Game Logic + Next.js + (Supabase)]
มุมมอง 5586 หลายเดือนก่อน
The second part of the Realtime Chess Game! 🎉 If you want me to do more videos like this please like, share & subscribe as I really love doing this videos but this takes massive amounts of time and money (Hardware). Find the related GitHub repository including the first branch here: github.com/activenode-edu/realtime-chess/tree/part2 If you wanna get me a coffee 💙: ko-fi.com/activenode I also h...
🎮 1. Creating a Realtime Chess Game | Pure JS Game Logic + Next.js + (Supabase)
มุมมอง 1.2K6 หลายเดือนก่อน
This is the very first step to get up and running with your Chessboard. Please find the related GitHub repository including the first branch here: github.com/activenode-edu/realtime-chess/tree/part1 I love doing this videos but this takes massive amounts of time and money (Hardware). So please help me out by subscribing and maybe, if the video helped you, get me a coffee 💙: ko-fi.com/activenode...
Supabase Interview with the CEO🔥: Insights and Advice from Paul Copplestone
มุมมอง 6677 หลายเดือนก่อน
Talking about Startups and clarifying common questions with Paul Copplestone, CEO from Supabase. It was my pleasure. You can listen to this like a Podcast in the background if you don't like my face, but if you do wanna see 2 laughing faces, you're welcome to enjoy the video. Links: Reddit Post: www.reddit.com/r/Supabase/comments/15f6h0j/what_do_you_want_to_know_about_supabase_for_real/ PostgRE...
Understand the Supabase SSR Package easily
มุมมอง 11K8 หลายเดือนก่อน
Sure, you can read the docs - but aren't you confused about it? Get a full-fledged, detailed explanation which removes all future barriers. About the info Box in the video: I use the same Client for Server Components, Route Handlers and Server Actions with NextJS App Router without the differentiating in set/remove; Because: I want to make sure that Server Components are not misused and hence i...
🔄 Easily Sync different Supabase Instances with Supabase Migrations / CLI
มุมมอง 7K9 หลายเดือนก่อน
Syncing Supabase Instances with Supabase Migrations should come easy - without manual backups and imports. Hope it does with this video. I love doing those videos but this takes massive amounts of time and money (Hardware). So please help me out by subscribing and maybe, if the video helped you, get me a coffee 💙: ko-fi.com/activenode I also have a newsletter planned for WebDevs, so if you wann...
Complete Guide ⚡️ Supabase Self-Hosted ➕ Custom S3 ➕ Authelia
มุมมอง 28K11 หลายเดือนก่อน
Supabase self hosted including S3 Storage, Customs Domains and Authelia. 🚨 Important Notes: I got informed on my blog that User Creation via Dashboard wasn't possible and that for some very specific things such as e.g. certain POST requests the Dashboard wasn't 100% working. There were only small things missing (updated in the Blog Article already): 1. In 23:10 we configure the location /storag...
🐍 A Neon-Snake moving at the Border: Fancy CSS Button
มุมมอง 827ปีที่แล้ว
Animating Borders isn't easy. Here I am showing you one way of CSS-only-animating a snake-like border. The Sandbox for this Code: codesandbox.io/s/neon-snake-button-css-drqkyv?file=/index.html Chapters: 0:00 Intro 0:39 Button Foundation 1:45 Base Animations 4:23 Making the Snake 10:40 Fixing the Shadow 12:03 Outro Credits: - Licensed Music from Envato Elements
⚛️ The fastest Kick-Off for react-query & unglitch in less than 20mins
มุมมอง 465ปีที่แล้ว
react-query solves the problem of multi fetching with query keys. So does unglitch with tokens. Get yourself familiar with both of those libraries in this video and understand why it's crucial to use such. Chapters: 0:00 Intro 0:59 Weather App Setup 4:11 React Query 11:53 unglitch 18:44 Outro Sources: - Unglitch unglitch.activeno.de/ - TanStack react-query tanstack.com/query/v4/docs/react/refer...
NextJS reveals Password🥲: Create Secure Server Actions 🔐💯
มุมมอง 2.6Kปีที่แล้ว
Everything is insecure if the concept isn't understood. However the question here is: Is this a feature or something that NextJS will iterate on? Let's have a closer look at the potential pitfalls of Server Actions (and remember, that, as of this date, they are still in Alpha!) Music Credits: - Outro: Rain, Book And Cup Of Tea by | e s c p | escp-music.bandcamp.com Music promoted by www.free-st...
🙌 Deploy NextJS, Astro, Wordpress, Supabase - DEPLOY JUST ANYTHING
มุมมอง 4.2Kปีที่แล้ว
Deploying Just anything ist so easy with #CapRover. I found this gem. Even though it could really need a website overhaul (just like Astro in its early stage) CapRover is more than convincing in its ease of use. CapRover is a wonderful abstraction layer, built for easy deployments, on top of Docker that also comes with free, automatic HTTPS Certificates via Let's Encrypt. #webdevelopment #apps ...
A ToDo List with #NextJS Server Mutations #ServerActions
มุมมอง 4.5Kปีที่แล้ว
Let's build a dynamic ToDo List with NextJS Server Actions and learn more about why the UI might flash and how the caching can be controlled. This is the follow-up to my other video (th-cam.com/video/jsEJsi2FD1U/w-d-xo.html) about #nextjs13 Server Actions. The GitHub Repo: github.com/activenode/yt-server-todos Sources: - nextjs.org/docs/app/building-your-application/data-fetching/server-actions...
🤯 NextJS Server Actions - never write Post Requests again
มุมมอง 10Kปีที่แล้ว
🤯 NextJS Server Actions - never write Post Requests again
4mins: HTML Template Tag - Learn the Web Components Technology
มุมมอง 3K2 ปีที่แล้ว
4mins: HTML Template Tag - Learn the Web Components Technology
⚡️4mins Supabase: Get a Random Row out of Supabase with Table Views
มุมมอง 3K2 ปีที่แล้ว
⚡️4mins Supabase: Get a Random Row out of Supabase with Table Views
Scale it! 🌈 Create reusable Elements with Tailwind custom configurations
มุมมอง 4402 ปีที่แล้ว
Scale it! 🌈 Create reusable Elements with Tailwind custom configurations
4mins Frontend Quickie: Understand Node.normalize()
มุมมอง 1022 ปีที่แล้ว
4mins Frontend Quickie: Understand Node.normalize()
⚡️ In 30mins from 0 to Web Service 😲 : Supabase, Next.js, Tailwind + Vercel 💚
มุมมอง 5K2 ปีที่แล้ว
⚡️ In 30mins from 0 to Web Service 😲 : Supabase, Next.js, Tailwind Vercel 💚
Great tutorial!
How do you upgrade the version of the backend services if supabase pushes new changes? Resolve merge conflicts whenever you pull from the upstream supabase repo?
found the life save i have been searching this for weeks thanks a bunch 😇😇
Thanks for this video, now I feel more comfortable to start working with supabase, but I have one question, I have been looking all around internet, but nobody explains, how you can sync edge functions into a git repository and then sync this edge functions into other envs. how you can do that?
The Vector setting is missing in the code downloaded actually. Doesn't match the one you got in video.
Very useful 🙂Thanks!
Is the book out?
How can I use it
The Authelia part came really handy for OpenSearch. Thanks for the tutorial :)
Would this be easier using coolify self hosting?
Hm, not really. Depends on "easy". Coolify has its own constraints. I use coolify as well but it's other things to adapt then. So I wouldn't necessarily say it is easier
Thank you
Great video!
Hey men. thank u for sharing your knowledge. but why i can't see settings button, can u help me with that?
After the third thorough installation, I found out following: 1. Right after you set access list in NGINX, you can only manipulate with tables, but not with storage nor users. 2. After FULL installation by the guide, with Authelia, everything works. 3. supabase-vector doesn`t start. 4. supabase-storage & supabase-studio both are in 'unhealthy' state, 5. Error on sending invitation But, main functions works. Great job David ! Thank`s a lot !
Hi there!! Thank you for the video it qas really nice.. I’ve setup supabase/srr on my Remix js app. The createBroswerClient and createServerClient works!! But I still not understand the concept between when to use the Broswer one or the Server one.. I know that when it’s for front-end is the Broswer client but I think I would need a real life example to understand both. Anyone can help me?
It's quite annoying that the proxy manager doesn't use TLS by default, or via config flag. But great you later go over this.
Hi, How do i setup real-ip?
❤ good job 👏
Hey David, where can i contact you for a chat?
Awesome video, its waay better then any docs on the supabase website.
thanks ! what about with a docker container
what about edge functions, storage for multi environment. can't find much in docs
Edge functions: see other comments where I responded:) Wdym with multiregion storage? CDN?
i cannot get in my S3 dashboard incorrect password and username
such as amazing tutorial, I love it much
Thanks, needed this.
Just spent a decade with monks, now back to startups :p
Legit question: Does the Self hosted version supports Users(creating users via studio Authentication)?? I thought i was breaking some configuration, but even with vannila install (without any config changes it always crashes with "canot fetch")
Yes, sure it does! This should work. I haven't tried it in a while as I'm currently on the Supabase book writing process (supa.guide) but this does work (rn doing this with k8s). Have you checked the linked blogpost?
Hey my Man, i get an 403 "bad_jwt" "invalid JWT: unable to parse or verify signature, signature is invalid". Any ideas?
Shouldn't happen. Have you tried generating one at supabase.com/docs/guides/self-hosting/docker#generate-api-keys ?
Yes, but these where invalid. I used one generated by a python script and it worked. I have no idea how and why but it works
@@Sansalvador67 Indeed weird but wonderful you got it working. keep rockin!
Is there a way to enable edge functions in this tutorial?
They are active! Here's how: In every project, no matter if Cloud, self-hosted or locally, the URL to an Edge function is API_URL/functions/v1/function_name . Now on self-hosted, you need a way to get the functions there as `supabas functions deploy` only works with cloud. This is done with a docker volume which by default is found in the docker-compose.yml under functions.volumes (usually on your server where you execute the docker-compose.yml it's ./volumes/functions)
@@activenode thank you! great (unique) tutorial
@@handler_k Thanks so much
Thanks, most tutorials are outdated, you filled in the gap between the transition form the auth lib to ssr.
Thanks!
cant express how helpful this was, thank you very much!
Happy to hear!
bro when the next video is coming??
Valid request mate! Sorry for keeping you waiting. I'm currently in the phase of finishing the book, I'll surely publish new parts soon!
supabase docs sucked, code samples sucked. thank you so much
Another like ! More subscribers to this channel.
The last part at from 25:00 made this really exciting. This channel is so under-subscribed, its a hidden gem.
very detailed tutorial, thanks. But need explanation on how to configure custom domains, how to point them dockerized nginx
Isn't this what I show in the video? What are you missing? Cheers
Man this is great, thanks a lot, just subscribed I want to start Supabase as a newbie programmer and wanted exactly this video. Are there any limitations to Self Hosting features, compared with the paid Cloud options? I couldnt find a feature comparision table anywhere
God knows how much it takes to compress those 45h of work and research into a 35 minute guide for your audience. Def, earned this like comment and subscriber =) Keep up the good work, we are very thankfull
Thank you so much:)
Could not understand how to access serverClient in getServerSideProps, can you share an example ?
when i refresh the page the session is lost, why?
Hey there. Is it really lost or is it just yet another user? Calling signInAnonymously another time will create another user as stated in the Video!
I was calling the use user file as tsx
is it possible make anonymous sign in with supabase in the server?
Sure! That's even easier than on the frontend. Just check the session and if there's no session, you can trigger signInAnonymously()
I tried in server but it didn't work, anyway I did it like in the video and it worked. Great content!
does realtime work, and more importantly, can you have a second instance with working realtime ? @activenode
Hey, thanks for this amazing tutorial! I keep getting this error when building my project after following this setup: Static generation failed due to dynamic usage on /orders, reason: cookies I'm exclusively using the app router. My /orders page is a SSR page and calls a function "fetchOrders" before returning its components. This fetchOrders function lives in a server actions file with the "use server" file heading. It queries a pg database using Drizzle, and uses the "createSupabaseServerClient" function to fetch the user id for the database query. I'm unsure how to reliably get the user id of the logged in user for my database queries with this error throwing. Has anyone ran into something like this?
Can you try one thing to troubleshoot? This video shows calling `cookies()` in each function. However, I'm about to make an updated video where I'll be using `const cookieStore = cookies()` in the top of the utils function and then only `cookieStore.get`, `cookieStore.set` etc. So calling `cookies()` immediately will mark the file as "using cookies". Can you try if that helps?
I am getting an error that cookies can set in server action or route handler only
When exactly do you get it? What are you doing?
❤❤❤ Great video. Next time please use dark theme in your apps. Its gonna be much easier to watch. Now you have dark theme on text editor and light theme in your app.
Great Feedback 💜
👍
waay too good video
I am writing here because others may be interested. I have a problem with Astro. I am using the new caching from Astro. During the build process, the data is cached in a folder. I would like to reuse this in the next build process. So I need a persistent app. But I don't understand how I can access a persistent folder or if it works at all. My Config: Path in App: /astro-cache Label: astro-cache In my Astro config I enter the following as the caching path: cacheDir: './astro-cache' That won't be correct, but I don't know how else to access the path. Is it even possible?
If it is possible, I would like to specify the persistent directory as cacheDir in my astro config.
As discussed previously, it's hard to access a VOLUME within a running build process. The best bet would be copying the files into the build context directory which comes with several problems: 1. You'd need to know where CapRover does the `docker build` 2. You'd need to copy the existing cache directory into that before the build starts and then do `COPY /cache-dir ...` within that 3. Where you get that `/cache-dir` from in the first place? The third question can be answered e.g. by having a git pipeline that will first trigger some script which will run `npm run build` and it's result is put to the cache-dir where it then later can be read from (2). But then again you still face problem (1) that you need to hook into it. That's why you're probably better of building in the container instead of the dockerfile and using a HEALTHCHECK command in the dockerfile to determine the healthiness of a container depending if a certain URL can be accessed or not (CURL request). Another idea: Use the Repository pipeline / GitHub actions to build on GitHub and re-use cache directories from the build which you then use to push to a specific branch when succesfull (like a `deployment` branch). That branch can then be used by CapRover. But all of these things aren't natively supported so if you didn't want workarounds you might wanna consider portainer instead which is a bit more versatile and I think it has Webhooks as well.
@@ChristianKolbow docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows also check this one to grasp ideas for prebuilding the cache