Nuxt•2y ago

How to use Lucia with Nuxt Hub ? (error: missing cloudflare db binding)

As the title suggest, I have the following error :

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@nuxthub+core@0.5.11_ioredis@5.4.1_nuxt@3.11.2_@parcel+watcher@2.4.1_@types+node@20.12.7_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@nuxthub+core@0.5.11_ioredis@5.4.1_nuxt@3.11.2_@parcel+watcher@2.4.1_@types+node@20.12.7_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@nuxthub+core@0.5.11_ioredis@5.4.1_nuxt@3.11.2_@parcel+watcher@2.4.1_@types+node@20.12.7_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@nuxthub+core@0.5.11_ioredis@5.4.1_nuxt@3.11.2_@parcel+watcher@2.4.1_@types+node@20.12.7_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

I tried to implement as per the documentation of Lucia, with some changes.

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

docs:

Definition of hubDatabase() with similar error on line 38 : https://github.com/nuxt-hub/core/blob/main/src/runtime/server/utils/database.ts

reproduction link : https://stackblitz.com/~/github.com/rktmatt/help-drizzle-nuxt-hub

takburgerOP•5/5/24, 9:02 AM

I was in the wrong doc. Apparently with D1 you have to do things a little bit differently for the adapter :

export function initializeLucia(D1: D1Database) {
  const adapter = new D1Adapter(D1, {
    user: 'user',
    session: 'session',
  })
  return new Lucia(adapter)
}

export function initializeLucia(D1: D1Database) {
  const adapter = new D1Adapter(D1, {
    user: 'user',
    session: 'session',
  })
  return new Lucia(adapter)
}

However, now instead of having an exported lucia util, I have a function to initialize and it doesn't work when initializing it with export const lucia = initializeLucia(hubDatabase())export const lucia = initializeLucia(hubDatabase())

JustSerdar•5/6/24, 3:46 PM

Hey burger! Im having the exact same issue

JustSerdar•5/6/24, 3:47 PM

Stuck on it for 1-2 days now

JustSerdar•5/6/24, 3:47 PM

 ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)

 ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)

JustSerdar•5/6/24, 3:47 PM

I'm not even getting my bindings to properly work each and every time i open up the project (which might be a skill issue on my end)

JustSerdar•5/6/24, 3:50 PM

It's kinda weird it's complaining about the D1 adapter, while in local dev we're running off the local sqlite3 db...

JustSerdar•5/6/24, 3:50 PM

which uses the better-sqlite3 adapter

JustSerdar•5/6/24, 3:51 PM

i dont see where nuxt hub is overriding this and decicing to go straight for the production db on cloudflare

JustSerdar•5/6/24, 4:38 PM

I feel like this situation is problematic, nuxt hub and db0 kinda are colliding here

JustSerdar•5/6/24, 4:38 PM

db0 is primarily focussed on local dbs atm, while nuxt hub is primarily focussed on remote D1 db's

JustSerdar•5/6/24, 4:38 PM

it feels like for now, the best option is to divert back to Turso + drizzle-orm from drizzle

JustSerdar•5/6/24, 4:38 PM

deploy on CF but db over on Turso + a local one using drizzle orm directly and not the integrated drizzle orm in db0 unless u wanna deploy a nightly nuxt build (it requires that experimental flag)

JustSerdar•5/6/24, 4:39 PM

i mean db0 is still a experimental native sql connector for nuxt in the nightly build atm and nuxt hub is in alpha...

JJustSerdar I feel like this situation is problematic, nuxt hub and db0 kinda are colliding ...

takburgerOP•5/6/24, 4:56 PM

I think I have a fix, I'm working on my example repo for a usable example to share. I'm currently implementing the auth functions and later the sessions to see if everything works.

For now I think I understood that the initializeLucia(hubDatabase()) had to be called in each single line of code so that for each line of code a dedicated D1 binding.

Ttakburger I think I have a fix, I'm working on my example repo for a usable example to sha...

JustSerdar•5/6/24, 4:57 PM

I'll happily tag along your work!

takburgerOP•5/6/24, 4:57 PM

Like in the converted middleware :

import { verifyRequestOrigin } from 'lucia'
import type { Session, User } from 'lucia'

export default defineEventHandler(async (event) => {
  if (event.method !== 'GET') {
    const originHeader = getHeader(event, 'Origin') ?? null
    const hostHeader = getHeader(event, 'Host') ?? null
    if (
      !originHeader ||
      !hostHeader ||
      !verifyRequestOrigin(originHeader, [hostHeader])
    ) {
      return event.node.res.writeHead(403).end()
    }
  }

  const sessionId =
    getCookie(
      event,
      initializeLucia(hubDatabase()).sessionCookieName
    ) ?? null
  if (!sessionId) {
    event.context.session = null
    event.context.user = null
    return
  }

  const { session, user } = await initializeLucia(
    hubDatabase()
  ).validateSession(sessionId)
  if (session && session.fresh) {
    appendResponseHeader(
      event,
      'Set-Cookie',
      initializeLucia(hubDatabase())
        .createSessionCookie(session.id)
        .serialize()
    )
  }
  if (!session) {
    appendResponseHeader(
      event,
      'Set-Cookie',
      initializeLucia(hubDatabase())
        .createBlankSessionCookie()
        .serialize()
    )
  }
  event.context.session = session
  event.context.user = user
})

declare module 'h3' {
  interface H3EventContext {
    user: User | null
    session: Session | null
  }
}

import { verifyRequestOrigin } from 'lucia'
import type { Session, User } from 'lucia'

export default defineEventHandler(async (event) => {
  if (event.method !== 'GET') {
    const originHeader = getHeader(event, 'Origin') ?? null
    const hostHeader = getHeader(event, 'Host') ?? null
    if (
      !originHeader ||
      !hostHeader ||
      !verifyRequestOrigin(originHeader, [hostHeader])
    ) {
      return event.node.res.writeHead(403).end()
    }
  }

  const sessionId =
    getCookie(
      event,
      initializeLucia(hubDatabase()).sessionCookieName
    ) ?? null
  if (!sessionId) {
    event.context.session = null
    event.context.user = null
    return
  }

  const { session, user } = await initializeLucia(
    hubDatabase()
  ).validateSession(sessionId)
  if (session && session.fresh) {
    appendResponseHeader(
      event,
      'Set-Cookie',
      initializeLucia(hubDatabase())
        .createSessionCookie(session.id)
        .serialize()
    )
  }
  if (!session) {
    appendResponseHeader(
      event,
      'Set-Cookie',
      initializeLucia(hubDatabase())
        .createBlankSessionCookie()
        .serialize()
    )
  }
  event.context.session = session
  event.context.user = user
})

declare module 'h3' {
  interface H3EventContext {
    user: User | null
    session: Session | null
  }
}

JustSerdar•5/6/24, 4:58 PM

dang 38 lines just doubled

JustSerdar•5/6/24, 4:58 PM

but yeah, this looks good!

JustSerdar•5/6/24, 4:59 PM

Im not able to launch my nuxt app atm due to the consistent missing D1 bindings error

takburgerOP•5/6/24, 4:59 PM

just replace every lucia.lucia. by ìnitializeLucia(hubDatabase())`

JustSerdar•5/6/24, 4:59 PM

updating the d1 bindings in root of the project or in the d1 folder/wrangler file keeps resetting it too all default values

takburgerOP•5/6/24, 5:00 PM

what kind of auth strategy are you implementing ? I'm going for passkeys

JustSerdar•5/6/24, 5:01 PM

I'm using a pretty default lucia v3 setup with the password/github provider route

JustSerdar•5/6/24, 5:01 PM

i just made the jump from lucia v2 to v3, so its still new too for me

takburgerOP•5/6/24, 5:02 PM

Ok. I'm using it for the first time. I'm also just a hobby dev, so don't trust my code

Ttakburger Ok. I'm using it for the first time. I'm also just a hobby dev, so don't trust m...

JustSerdar•5/6/24, 5:02 PM

no worries! im happy i found someone dealing with the same issue xD

JustSerdar•5/6/24, 5:02 PM

I spent my entire weekend on it alrdy

takburgerOP•5/6/24, 5:03 PM

exactly, sometimes I feel that I could have gone on a stack that's less niche lol

JustSerdar•5/6/24, 5:03 PM

ngl.. we're really working on the edge of technology here, no docs, no posts, no pr's nothing

JustSerdar•5/6/24, 5:03 PM

pioneering this stuff as we try to make it work

takburgerOP•5/6/24, 5:04 PM

the lucia and oslo passkeys have no docs too

JustSerdar•5/6/24, 5:04 PM

i mean, this is all still fun, im just wondering how upset i will feel when i get to the part where the built in node-crypto doesnt work on cf/vercel. this affects everything including oslo and arctic too

JustSerdar•5/6/24, 5:04 PM

without their edge version of it

JustSerdar•5/6/24, 5:05 PM

for hashing the passwords or generating unique-ids

JustSerdar•5/6/24, 5:06 PM

like vercel offers this @vercel/crypto module, u need to apply globally so auth works on their platform..

JustSerdar•5/6/24, 5:06 PM

cf has the same issue, same route solution

takburgerOP•5/6/24, 5:07 PM

didn't know. I guess we have to fork lucia and oslo then

JustSerdar•5/6/24, 5:08 PM

https://vercel.com/templates/next.js/edge-functions-crypto

Using Crypto in Edge Middleware and Edge Functions – Vercel

Learn to utilize the crypto Web APIs at the edge.

JustSerdar•5/6/24, 5:08 PM

wrong link

takburgerOP•5/6/24, 5:09 PM

on CF it seems to be supported
https://developers.cloudflare.com/workers/runtime-apis/web-crypto/

Cloudflare Docs

Web Crypto · Cloudflare Workers docs

A set of low-level functions for common cryptographic tasks.

JustSerdar•5/6/24, 5:12 PM

https://discord.com/channels/1004048134218981416/1210630859019919430

JustSerdar•5/6/24, 5:12 PM

heres the discussion on the lucia discord

JustSerdar•5/6/24, 5:18 PM

I might just deploy this to CF, turso in production for now and local sqlite for goofing around during dev

import { join } from 'pathe';
import type { Config } from "drizzle-kit";

export default {
  out: 'server/database/migrations',
  schema: 'server/database/schema.ts',
  driver: process.env.devDatabase ? "better-sqlite" : "turso",
  dbCredentials: {
    url: process.env.devDatabase ? join(process.cwd(), './.data/db.sqlite3') : process.env.TURSO_DB_URL as string,
    authToken: process.env.devDatabase ? "" : process.env.TURSO_DB_AUTH_TOKEN as string,
  },
} satisfies Config;

import { join } from 'pathe';
import type { Config } from "drizzle-kit";

export default {
  out: 'server/database/migrations',
  schema: 'server/database/schema.ts',
  driver: process.env.devDatabase ? "better-sqlite" : "turso",
  dbCredentials: {
    url: process.env.devDatabase ? join(process.cwd(), './.data/db.sqlite3') : process.env.TURSO_DB_URL as string,
    authToken: process.env.devDatabase ? "" : process.env.TURSO_DB_AUTH_TOKEN as string,
  },
} satisfies Config;

JJustSerdar https://discord.com/channels/1004048134218981416/1210630859019919430

JustSerdar•5/6/24, 5:18 PM

until you have a magic fix in your cloud reproduction repo