support

parent of nested routes

Ddmayo2

10/27/2023

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'?

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

Just to clairfy: index.jsx snippet

<Router>
 <App />
</Router>

<Router>
 <App />
</Router>

app.jsx snippet:

<Routes>
 <Route path="/pricing" component={Pricing} />
 ... see above for full snippet
</Routes>

<Routes>
 <Route path="/pricing" component={Pricing} />
 ... see above for full snippet
</Routes>

RouteGuard.jsx snippet:

return (
  <>
   <Outlet />
  </>
)

return (
  <>
   <Outlet />
  </>
)

Mmdynnl

10/27/2023

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 own

Ddmayo2

10/27/2023

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

Mmdynnl

10/27/2023

ah, i read it the other way. the configuration is correct

Ddmayo2

10/27/2023

Thanks for the confirmation.

Mmdynnl

10/27/2023

where is email login handled and how? createResource + data func?

Ddmayo2

10/27/2023

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:

import { Outlet, useNavigate } from "@solidjs/router";
import { createEffect, createSignal } from "solid-js";
import { supabase } from './components/supabaseClient'

export default function RouteGuard () {
  const navigate = useNavigate();
  const [session, setSession] = createSignal(null);

  createEffect(() => {
    // Fetch the session asynchronously
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
    if(!session()){
        navigate('/login', { replace: true })
        //console.log('in RG !session',session())
    }
  });

  return (
    <> 
    <Outlet />
    </>
  )
}

import { Outlet, useNavigate } from "@solidjs/router";
import { createEffect, createSignal } from "solid-js";
import { supabase } from './components/supabaseClient'

export default function RouteGuard () {
  const navigate = useNavigate();
  const [session, setSession] = createSignal(null);

  createEffect(() => {
    // Fetch the session asynchronously
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
    if(!session()){
        navigate('/login', { replace: true })
        //console.log('in RG !session',session())
    }
  });

  return (
    <> 
    <Outlet />
    </>
  )
}

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.

Ddmayo2

10/27/2023

Mmdynnl

10/27/2023

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

Ddmayo2

10/27/2023

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

Ddmayo2

10/27/2023

Mmdynnl

10/28/2023

in this example, it's okay because there's no subscription to any signal

Looking for more? Join the community!

support

support

Want results from more Discord servers?

Add your server

Recommended Posts

Where Do I Put Providers In SolidStart?In a SolidJS project you name your providers in index.tsx by wrapping the <App /> component. ` rend Use non breaking space with hyper dom expressionsHow can I use the good old ` ` inside a div a bit like this: `h('div', [h(...),'  and &nb Internal Server Error - Make sure your app is wrapped in a <Router />I used bunx create-solid to make the project, but when I set ``const navigate = useNavigate()`` and createStore not reactiveI have the following code: ``` function handleInput(event: MouseEvent & { currentTarget: HTMLBut Re render on filter in a forI have an animation that runs when the element is visible with an observable the problem is after th Signal dont update the classI have two components one the principal with the signal and te other is the button, the class shloud Mutable routeDataHello, im fetching data from a server using routeData() and createRouteData() in solid-start. What's Type of setStore args?When trying to listen for any and all changes to a store value, seems the only way of being able to Multiple SolidJS apps in one?Hello everyone, This one will probably sound very silly but I'm new to this, it'll be hard to expla SolidStart error on redirectHello, I'm a newcomer to SolidJS and SolidStart. I am trying to redirect from one page to another, b Using Solid for apps with large/complex statesIs Solid advisable for creating interaction-heavy apps as complex as figma/canva? The high-performan Issue wih testing (Solid-jest)Hello, I'm currently working on a Solid Start library. I'm currently using [tsdx](https://github.c How to pass reactive values to `ref`?For example, inside a `<For>` element, how would the ref handle using `For`'s reactive index? Someth setStore odd creation behaviorHey there team! Hope you are all well. I'm experiencing some very odd behaviour around stores and How do i use script tagLike Load <script> and then use init variable from it like with sentry. Io hmr and WebSocketshi, when trying to use websockets during development, it can take up to 20 seconds for the socket to What are your favorite libraries or packages for web development?I would like to know what are your favorite libraries or packages for web development? These are a Global store in Solid Start appHey, I recently thought to myself that I haven't really done a proper e-commerce app yet that would `ReferenceError: Request is not Defined` on Node 18After adding `solid-start-netlify` to my project, I get `ReferenceError: Request is not defined` whe referenceError _$HY is not defined, on 0.3.7 prod, but not on 0.2.32Only difference I have noticed is that when I compile with 0.3.7, it shows this kind of message: Sit