Buy Now and unlock this series
$
49
.99
$
39
.99
yours forever
$
49
.99
$
39
.99
Become a Pro and unlock everything
$
24
.99
per month
$
24
.99
Make An Authenticated Server Request To Supabase With Cookies
Downloads
Become a pro to download code and videos
Realtime Remix with Supabase
23 videos
Released: March 31 2022
Course Instructor
Jon Meyers
- What We Are Going To Build
6m36s - Create Remix Project
3m54s - Using Loaders To Fetch Data
6m28s - Nested Routes
10m59s - Create A Supabase Project
9m56s - Design A Database Schema
7m24s - Environment Variables In Remix
9m12s - Querying Data From Supabase
9m1s - Mutations In Supabase To Write Data
8m29s - Actions In Remix
6m32s - Adding Supabase Realtime
14m13s - Configure Tailwind For Remix App
6m19s - Styling Our App With Tailwind
16m45s - Use Supabase To Authenticate Users
15m6s - Write Access Policies With Row Level Security
10m18s - Make An Authenticated Server Request To Supabase With Cookies
20m39s - Create A Higher Order Function Helper For Serverside Supabase Queries
10m38s - Sync Data Across Schemas Using Postgres Functions And Triggers
14m12s - Add User To Messages
8m8s - Use Rpc To Call Postgres Function From Javascript
12m29s - Final Design Tweaks And Code Cleanup
20m11s - Deploy Remix App To Vercel
7m6s - Where To From Here
2m29s
Comments
Christopher
22 days ago
ESLint complains about fetcher being a missing dependency in useEffect in the dependency array in the root.jsx file.
Adding fetcher and then submitting the login page causes the page to constantly submit the POST in a loop without actually logging in.
The official Remix documentation also suggests adding it to the dependency array. [https://remix.run/docs/en/v1/api/remix#usefetcher]
Could someone with more knowledge be able to explain what it is about the onAuthStateChange that seems to trigger this?
Christopher
20 days ago
So I actually Read The Manual on useFetcher and see there are different states such as idle, submitting, or loading.
The fetcher itself changes from one state to another which would trigger the useEffect if fetcher is in the dependency array. The supabase.auth.onAuthStateChange event is still in the process of signing in and therefore its code block would run and we would end up re-running the fetcher.submit creating the loop.
The trick is to check the fetcher.state before blindly resubmitting since we don't want to resubmit unless currently idle.
D.L.
27 days ago
I was getting a createCookieSessionStorage) is not a function error. After searching around it seems that some of the remix imports had to be changed to from '@remix-run/node'. I am not sure if this is correct or not but it seems to be fixing my issue.
Christopher
22 days ago [edited]
Yeah this was a change from release 1.4.0 onwards it would seem.
https://github.com/remix-run/remix/releases/tag/v1.4.0
Shawn
about 2 months ago [edited]
Shawn
about 2 months ago [edited]
Okay... i change /auth/login.js to /auth/login.jsx and added a default export... all is good now.
export default function () { return <p>login</p>; }Spenser
about 2 months ago [edited]
I'm getting an error once we get to the part where we are screwing around in root.js. I'm getting this error:
Uncaught ReferenceError: Buffer is not definedSo I looked into it and I haven't found an easy solution. It seems it's a known gotcha as it has a github issue and something similar is mentioned in the Gotchas section in the Remix docs. It has something to do with server side bundles getting onto the client and then it throws an undefined.
If anyone can help figure this it out it would be appreciated.
Josh
about 1 month ago
So I was having the same issue. After digging around I decided that I think it has something to do with an update to the vercel package for Remix.
I downloaded the code from this lesson and noticed that there were quite a few differences between the code generated by Remix when Jon did it and when I did it.
So I started over and rebuilt the app with the standard Remix App Server and everything worked as intended. I know that means I'm going to have to do some work when I get to the deployment phase, but I just decided I would figure that out when I got there.
Matt
about 1 month ago
I got the exact same error. For now, I have moved the action function from '/auth/login' into the top of our main '/login' file, and changed the fetcher action param in useEffect in 'root.jsx' to '/login' instead of '/auth/login'. This seems to have worked, but since I haven't gone past this point I can't say whether ignoring the intended '/auth/login' path affects anything moving forward.
Want to join the conversation?
Become a Pro member today!