dmayo2
dmayo2
PostsComments
SSolidJS
Created by dmayo2 on 11/1/2023 in #support
"Deep linking" Why the disparity btn local & prod
Thanks for the thoughful responses. Appreciated.
6 replies
SSolidJS
Created by dmayo2 on 11/1/2023 in #support
"Deep linking" Why the disparity btn local & prod
The http vs https makes sense.
6 replies
SSolidJS
Created by dmayo2 on 11/1/2023 in #support
"Deep linking" Why the disparity btn local & prod
Care to expand on storing in a cookie vs local storage? Security? I know that cookies get sent to the server, but in a SPA? Cookies also natively have an expiration date.
6 replies
SSolidJS
Created by dmayo2 on 11/1/2023 in #support
"Deep linking" Why the disparity btn local & prod
If URLSearchParams is a browser API why not use the built-in resource? If I'm not importing, useSearchParams() then I'd be shipping a smaller app, and, theoretically, it'd be faster ? Or is it that useSearchParams() does the grunt work in the background by assigning variables? At my code's scale, is this 'to-may-to' / 'to-mah-to' instance?
6 replies
SSolidJS
Created by dmayo2 on 11/1/2023 in #support
"Deep linking" Why the disparity btn local & prod
Here's the code 
// App.jsx  
createEffect(() => {
    // Extract the part after the '#'
    const fragment = window.location.hash.substring(1);
    if (!fragment) return;
  
    // Convert the fragment into an object
    const params = new URLSearchParams(fragment);
    const access_token = params.get('access_token');
    const refresh_token = params.get('refresh_token');
  
    if (
      typeof access_token !== 'string' ||
      typeof refresh_token !== 'string'
    ) {
      // Handle the case where access_token or refresh_token is not a string
      console.error('Invalid tokens');
      return;
    }
  
    // Define an async function for setting the session
    const setSessionAsync = async () => {
      try {
        const data = await supabase.auth.setSession({
          access_token,
          refresh_token,
        });
        console.log('setSession result:', data);
      } catch (error) {
        console.error(error);
      }
    };
  
    // Call the async function and use async/await
    supabase.auth.onAuthStateChange(async (event, session) => {
      console.log(event, session);
      await setSessionAsync(); // Wait for setSessionAsync to complete
      navigate('/profile'); // Navigate after setSessionAsync has completed
    });
  });
// App.jsx  
createEffect(() => {
    // Extract the part after the '#'
    const fragment = window.location.hash.substring(1);
    if (!fragment) return;
  
    // Convert the fragment into an object
    const params = new URLSearchParams(fragment);
    const access_token = params.get('access_token');
    const refresh_token = params.get('refresh_token');
  
    if (
      typeof access_token !== 'string' ||
      typeof refresh_token !== 'string'
    ) {
      // Handle the case where access_token or refresh_token is not a string
      console.error('Invalid tokens');
      return;
    }
  
    // Define an async function for setting the session
    const setSessionAsync = async () => {
      try {
        const data = await supabase.auth.setSession({
          access_token,
          refresh_token,
        });
        console.log('setSession result:', data);
      } catch (error) {
        console.error(error);
      }
    };
  
    // Call the async function and use async/await
    supabase.auth.onAuthStateChange(async (event, session) => {
      console.log(event, session);
      await setSessionAsync(); // Wait for setSessionAsync to complete
      navigate('/profile'); // Navigate after setSessionAsync has completed
    });
  });
6 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
No description
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
I have onAuthStateChange in createEffect() as that is in all the examples I've found including supabase.com/docs
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
Thanks for the tip. No resolution though.
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
No description
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
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.
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
localhost:3000#access_token=eyJhbGciOiJIUzI1NiIsIPOk6yJV_adQssw5c&expires_in=3600&refresh_token=eyJhbGciOiJIUzI1NiIsInR5cC
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
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:
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
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
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
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 />
    </>
  )
}
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
Thanks for the confirmation.
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
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.
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested routes
Hi. But I want '/' to be protected.
22 replies
SSolidJS
Created by dmayo2 on 10/27/2023 in #support
parent of nested 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 />
  </>
)
22 replies
SSolidJS
Created by dmayo2 on 10/17/2023 in #support
direct link?
The answer is to have a netlify.toml file in the root with redirects: 
[functions]
  node_bundler = "esbuild"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
[functions]
  node_bundler = "esbuild"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
17 replies
SSolidJS
Created by dmayo2 on 10/17/2023 in #support
direct link?
still nothing.
17 replies