Go Pro Sign Up Login

Buy Now and unlock this series

$

49

.99

$

39

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Make An Authenticated Server Request To Supabase With Cookies

Downloads

Become a pro to download code and videos

Comments

User avatar

Christopher

22 days ago

ESLint complains about fetcher being a missing dependency in useEffect in the dependency array in the root.jsx file.

React Hook useEffect has a missing dependency: 'fetcher'. Either include it or remove the dependency array.
eslintreact-hooks/exhaustive-deps

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?

User avatar

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.

User avatar

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>; }

User avatar

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 defined

So 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.

User avatar

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!