1

I am trying to setup a jwt based authentication system. I am a 100% sure that the backend is working. I have a element named RootLayout that wraps all my other routes and an element named AuthLayout (also within RootLayout) which basically acts as a protection against accessing certain routes without login. I have a context setup and everytime there is a refresh my RootLayout useEffect runs and checks if we are logged in using cookies setup and sets our context.

This is my AuthLayout code: AuthLayout Code

When user logins they are navigated to "/landing" which is a route within AuthLayout. Although other components like navbar have auth object when I log them but here it always goes into the navigate("/") option.

Although i am quite sure RootLayout works... but here is the code: RootLayout Code

The useAuth() is a hook to access the context that is initialised as a null object {}

My App.js router part is: App.js code

When I remove the conditional rendering in AuthLayout and just return Outlet to test and console log using the code: It gives me console

Hence I feel like its because of the order of rendering... how do I solve this?

My question is not answered by the other one, I have done the same thing that was done in the other questions answer but it still does not work. Also unlike the other questions I am dealing with auth in 2 places(one is in RooyLayout where i actually send a request and set auth, also i am not using and retriving data using local storage but rather use async functions within which i cannot use my context hook )

my_neme_eh_jeff n
  • 41
  • 4
  • 4
    Please don't post pictures of code. Take the [tour] and read [ask] and how to make a [mre]. – super Apr 26 '23 at 21:54
  • @super I was not able to format the code for the past 30 mins and then i gave up on it and decided to post pictures. My apologies. – my_neme_eh_jeff n Apr 26 '23 at 21:56
  • Copy-paste the code. Mark all of it. Press ctrl+k. Done. – super Apr 26 '23 at 21:57
  • Toy redirect the user before the auth loads. Instead of redirecting if there is no auth show loading – Konrad Apr 26 '23 at 21:57
  • The useEffect callback runs after the initial render, not before. – Chris Hamilton Apr 26 '23 at 22:03
  • You need a "loading" state variable to let components know to wait for a response before rendering. – Chris Hamilton Apr 26 '23 at 22:12
  • @ChrisHamilton I have tried adding a if condition which returns a spinner component before my return statement in AuthLayout ... it works fine when I actually login-> it shows a spinner. But when I try to access the protected pages also it displays the spinner forever and doesnt send me back to login page as we get a return statement before the Outlet return statement. – my_neme_eh_jeff n Apr 27 '23 at 22:58
  • @Konrad how can i redirect the user before auth loads as if i want to redirect depends on the auth, as in if the user is logged in well and good they can access the page. Also am i not already redirecting the user before auth loads from RootLayout and isnt that the issue itself as i have highlighted in my question – my_neme_eh_jeff n Apr 27 '23 at 22:59

0 Answers0