Next.js Discord

Discord Forum

auth page load

Answered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Avatar
Southeastern blueberry beeOP
Hi everyone I’m new here and got a question.

I’m using next js app router with supabase auth and database. Everything works fine but since I’m using auth and auth provider in my layout.tsx, when I refresh my site(any page), I have a short black or white screen before my site loads, is this normal or can I prevent / resolve this?

10 Replies

Answer
Avatar
you can create a loading.tsx, what James correctly mentioned. Create it and write some loading jsx. Like that it will be instantly displayed.

However: don't check the auth inside your layout, when you want to protect content. It can leak through. For more details see here: https://github.com/eric-burel/securing-rsc-layout-leak
Avatar
Southeastern blueberry beeOP
Okay thanks! Right now I just use authcontext file and wrap my layout in authprovider. Is that not the correct way to do it? I also have problems with my user singin out when refreshing the page..
Avatar
keep in mind, that the layout is handled differently than a page from nextjs. So make sure you doing the right things with your auth and also at the correct location to prevent attacks and vulnabilites
Avatar
Southeastern blueberry beeOP
Okay! So my setup right now is not the best way to do it? Any idea on why I’m getting logged out as soon as I refresh page? Sometimes after couple of refreshes
Avatar
this sounds like a whole different topic compared to your thread inital question. You might want to mark this thread as solved and open a new thread
Avatar
Southeastern blueberry beeOP
Ur right thanks!
Avatar
which message is the solution of this thread (send me the link, reply to it or copy the text)
Avatar
@Southeastern blueberry bee ?
Avatar
Spectacled bear
Loading will happen since you are validating on every call. Is your layout a client component or a server component? You can add a suspense boundary into your layout or add a loader if its a client-side component.