parent of nested routes
Hello. Just looking for confirmation. I'm using Supabase Auth and that logic lives in RouteGuard. I'm pretty sure that all the routes nested within will be password protected.
My main question is: am I configuring the Index component correctly? Will I be able to access it? If an unauthenticated user goes to '/' (or any of the nested routes) they will be
navigate('/login')
.
I seem to be having an issue accessing '/' as an authenticated user. Should I rename the route for the Index component to someting like '/home'?
12 Replies
Just to clairfy:
index.jsx snippet
app.jsx snippet:
RouteGuard.jsx snippet:
you can pull it out of the nested route
think of the wrapping
Route
as a means of grouping, it doesn't render on its ownHi. But I want '/' to be protected.
I guess I'll try to rename it to /home or /dashboard.
My issue is that the supabase emailed login link is being hit once before the user hits it (micro seconds) so the link becomes invalid after one use.
It was working fine before I nested routes. I had ternary logic for routes, but that wasn't working correctly, then I realized I could simplify the code with nested routes, but that has resulted in the double hit, so I can't log in.
ah, i read it the other way. the configuration is correct
Thanks for the confirmation.
where is email login handled and how?
createResource
+ data func?The login is a form in /login which is outside of RouteGuard. Supabase has a js client that you submit to. It checks the email against Auth.users. If it finds it, it responds with Ok, and sends an email with a link that contains a token that sets the session.
The session logic is in RouteGuard:
The link from Supabase is redirected to / or I've also tried /profile which is inside RouteGuard (but so is /). This is the "magic login link"
https://yrgprjcjvq.supabase.co/auth/v1/verify?token=abc1dc85df42f343608abac3295a67232&type=magiclink&redirect_to=http://localhost:3000
And the return is a hash to localhost:3000
This is the error:
localhost:3000#error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired
and a valid link with the token looks like:
localhost:3000#access_token=eyJhbGciOiJIUzI1NiIsIPOk6yJV_adQssw5c&expires_in=3600&refresh_token=eyJhbGciOiJIUzI1NiIsInR5cC
That link is only valid for 24 hours and is a one-time use. Somehow, that's getting hit simulatiously and thus when my code runs, it get's the expired link error. So, I'm trying to debug where it's getting hit twice.
![No description](https://cdn.answeroverflow.com/1167475166654246962/CleanShot_2023-10-27_at_10.49.15.png)
not sure if it's related but
onAuthStateChange
should not be in that effect
should be put into something like onMount
or unsub with onCleanup
Thanks for the tip. No resolution though.
I have onAuthStateChange in createEffect() as that is in all the examples I've found including supabase.com/docs
![No description](https://cdn.answeroverflow.com/1167503328649953340/CleanShot_2023-10-27_at_12.40.23.png)
in this example, it's okay because there's no subscription to any signal