DaOfficialWizard🧙
DaOfficialWizard🧙
PostsComments
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
I solved this particular error - i had to create the frontend client in a different file entirely.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
you're 100% correct - that was a lingering bit from old code 🙂
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
So, i must have to do something else.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
No, that must not be it ... i am getting a Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
 server: {
        //preset: 'vercel',
        experimental: { asyncContext: true, openAPI: true },
    },
 server: {
        //preset: 'vercel',
        experimental: { asyncContext: true, openAPI: true },
    },
I have set this as my server in the app.config.ts
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
Now ... does this look right xD
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
This is what i have 🙂
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
export function createSupabaseBackendClient() {
    return createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!, {
        cookies: {
            get: (key: string) => {
                // get the cookie value from the request
                return getCookie(key)
            },
            set: (key: string, value: string, options: CookieOptions) =>{
                // set the cookie value in the response
                setCookie(key, value, options)
            },
            remove: (key: string, options: CookieOptions) =>{
                // remove the cookie from the session
                deleteCookie(key, options)
            },
        },
    })
}
export function createSupabaseBackendClient() {
    return createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!, {
        cookies: {
            get: (key: string) => {
                // get the cookie value from the request
                return getCookie(key)
            },
            set: (key: string, value: string, options: CookieOptions) =>{
                // set the cookie value in the response
                setCookie(key, value, options)
            },
            remove: (key: string, options: CookieOptions) =>{
                // remove the cookie from the session
                deleteCookie(key, options)
            },
        },
    })
}
import { createHandler, StartServer } from '@solidjs/start/server'
import { createSupabaseBackendClient } from '@src/server/db'

export default createHandler(() => {
    if (!global.supabaseClient) {
        global.supabaseClient = createSupabaseBackendClient()
    }
    return (
        <StartServer
            document={({ assets, children, scripts }) => (
                <html lang="en">
                    <head>
                        <meta charset="utf-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1" />
                        <link rel="icon" href="/favicon.ico" />
                        {assets}
                    </head>
                    <body>
                        <div id="app">{children}</div>
                        {scripts}
                    </body>
                </html>
            )}
        />
    )
})
import { createHandler, StartServer } from '@solidjs/start/server'
import { createSupabaseBackendClient } from '@src/server/db'

export default createHandler(() => {
    if (!global.supabaseClient) {
        global.supabaseClient = createSupabaseBackendClient()
    }
    return (
        <StartServer
            document={({ assets, children, scripts }) => (
                <html lang="en">
                    <head>
                        <meta charset="utf-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1" />
                        <link rel="icon" href="/favicon.ico" />
                        {assets}
                    </head>
                    <body>
                        <div id="app">{children}</div>
                        {scripts}
                    </body>
                </html>
            )}
        />
    )
})
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
The trouble i am running into - how do i setup the createServerClient override methods using the middleware strategy? I can grab the nativeEvent and pass that to the vinxi helpers - but that doesn't really help me setup the client? Should i construct the client inside the onRequest callback and then assign it to the global context? Is that possible? That seems silly ...
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
this sounds interesting, could you elaborate a bit? I am not seeing where i would assign the client to the module.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
if however a new one is created for each request then matters could be considerably simpler)
Since the supabase/ssr package exposes the client as a singleton i think this can be achieved.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 5/18/2024 in #support
Assistance with SolidStart and Supabase Auth in SSR
Thanks for your input @peerreynders - this is the conclusion that i've come to as well. I am just struggling with the implementation - being new to SolidStart it is not entirely clear to me what the flow is for middleware.
19 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/5/2024 in #support
Solid-UI The `border-border` class does not exist.
I have made an issue on the repo, and will close this support thread.
3 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/5/2024 in #support
Solid-UI The `border-border` class does not exist.
Note - i took the contents of ui.presets.js and i simply added them manually (then promptly removed that extraneous file) to my tailwind.config.ts file and the issue went away. Seems that there is an issue with the method of adding the presets to tailwind that causes the issue. I can not use solid-ui and daisyui along side each other - with a lot more granularity.
3 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
Tht way i am automatically bound. Haha, better than a wrapper tbh.
38 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
return (
        <div class="card h-auto pb-8 min-h-0">
            <aside
                ref={setSidebar}
                style={{
                    width: `${width()}px`,
                }}>
                <Resizer
                    ref={resizer}
                    side="right"
                    onResize={(clientY) => {
                        changeWidth(clientY)
                    }}>
                    {props.children}
                </Resizer>
            </aside>
        </div>
    )
return (
        <div class="card h-auto pb-8 min-h-0">
            <aside
                ref={setSidebar}
                style={{
                    width: `${width()}px`,
                }}>
                <Resizer
                    ref={resizer}
                    side="right"
                    onResize={(clientY) => {
                        changeWidth(clientY)
                    }}>
                    {props.children}
                </Resizer>
            </aside>
        </div>
    )
Just put the Resizer in the div i want to resize. That solved it. Duh.
38 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
I was over complicating it, like usual.
38 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
Thank you very much, i solved the problem.
38 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
A context wouldn't be too nice, as i want this component to be generic and able to wrap any component that i decide should be resizable.
38 replies
SSolidJS
Created by DaOfficialWizard🧙 on 1/2/2024 in #support
Help with some JSX logic in Typescript on an Advanced Resizing Component
well, the aside is just an example - but yes, i want it to attach to the first child element passed to the Resizer. Essentially the Resizer is a wrapper that allows me to resize the child when i drag on it. I originally wanted to "clamp" the Resizer to always be the same size as the child that is being resized, but then i thought attaching the events handler itself to the child would be better. Providing a callback was my original plan, but i think i over-complicated it tbh.
38 replies