Pocketbase

[urwrstkn8mare]

I can't figure out how to use PocketBase auth with vite-plugin-ssr. I've been at it for too long, so if anyone could help, I'd be very grateful. In terms of what I've done so far:

  app.get("*", async (req, res, next) => {
    const pb = new PocketBase("http://localhost:8090") // temp
    pb.authStore.loadFromCookie(req.headers.cookie || "")

    const pageContextInit = {
      urlOriginal: req.originalUrl,
      pb,
    }
    const pageContext = await renderPage(pageContextInit)
    const { httpResponse } = pageContext
    if (!httpResponse) return next()
    const { body, statusCode, contentType, earlyHints } = httpResponse
    if (res.writeEarlyHints)
      res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
    res.setHeader("set-cookie", pb.authStore.exportToCookie())
    res.status(statusCode).type(contentType).send(body)
  })

I'm not really sure how to go from here when I try passing it to the client (not sure if I'm supposed to or even if I'm doing it right) I get a TypeError: Cannot read properties of undefined (reading 'authStore')

Thanks
Samit

[coryvirok]

Hard to say without seeing your _default.page.server.js and _default.page.client.js, but I'm guessing you need to add pb to passToClient. More info here - https://vite-plugin-ssr.com/passToClient#page-content

[urwrstkn8mare]

Oh, thank you, so I think I did it, but I can't figure out how to access the pb client in the client component. Do I have to put it in pageProps?

[coryvirok]

You'll need to pass it into the client via render() in your _default.page.client.js.

E.g. here's what I do in my svelte app:

// _default.page.server.js

import { PageContextServer } from '@/pages/types'

// See https://vite-plugin-ssr.com/data-fetching
export const passToClient = ['pageProps', 'pb']

export async function render(pageContext: PageContextServer) {
  const app = pageContext.Page.render(pageContext)
  // ...

// _default.page.client.js

import { PageContextClient } from '@/pages/types'

export async function render(pageContext: PageContextClient) {
  const app_el = document.getElementById('app')

  new pageContext.Page({
    target: app_el,
    hydrate: true,
    props: {
      // Here's where you pass things to your page
      pageProps: pageContext.pageProps,
      pb: pageContext.pb
    },
  })
}

<!-- index.page.svelte -->

<script>
    export let pageProps
    export let pb

    // Use pageProps and pb in your template
</script>

[urwrstkn8mare]

Hi, thank you, that looks right, and I think I could use the usePageContext() hook to do that in React. Unfortunately, for some reason without changing anything, I'm getting a node error (Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.) when trying to run the server index.ts in which the server middleware lies. For your svelte project did you use a server middleware and do you think you could help me out with this new error? (if not it is all good)

PS. after adding "type": "module" to package.json I get another error and then after fixing it in tsconfig.json I get another error.

[coryvirok]

Glad that's working for you.

Regarding the ESM error and TypeScript, that's a pretty big and painful topic. If you're using type: 'module' you'll want to configure TS to produce ES2020 or ESNext output. There are all sorts of gotchas with TS and ESM so I don't think I'll be able to provide much help. But take a look at the boilerplate - https://github.com/brillout/vite-plugin-ssr/tree/main/boilerplates/boilerplate-react-ts

[urwrstkn8mare]

Yep will do thanks for everything :)