👋 does anyone have authjs sample code working using the app/api/auth/[...nextauth] approach you ca

K

Kaze•4/12/24, 2:39 PM

hi all!

K

Kaze•4/12/24, 2:39 PM

I have a problem with @cloudflare/next-on-pages CLI

K

Kaze•4/12/24, 2:40 PM

When I try to run "npm run deploy" this message appears:

Warning: It seems like you're on a Windows system, the Vercel CLI (run by @cloudflare/next-on-pages

to build your application) seems not to work reliably on Windows so if you experience issues during

the build process please try switching to a different operating system or running

@cloudflare/next-on-pages under the Windows Subsystem for Linux

K

Kaze•4/12/24, 2:40 PM

then a bash terminal opens, and I run again the "npm run deploy" and again, the same message and opens again a new bash terminal

K

Kaze•4/12/24, 2:40 PM

an so on

K

Kaze•4/12/24, 2:40 PM

is there a solution for this? thanks for the help!

P

paulcOP•4/12/24, 2:49 PM

Install WSL https://learn.microsoft.com/en-us/windows/wsl/install

Install WSL

Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine, and more are available.

P

paulcOP•4/12/24, 2:50 PM

It's reliable and if you're familiar with linux, is very close experience to working in a linux environment.

Ppaulc 👋 does anyone have authjs sample code working using the app/api/auth/[...nexta...

J

James•4/12/24, 4:50 PM

Are you using v5 of next-auth, which is currently under next-auth@beta?

JJames Are you using v5 of next-auth, which is currently under next-auth@beta?

P

paulcOP•4/12/24, 5:13 PM

Yes - next-auth@5.0.0-beta.16 to be exact.

Ppaulc 👋 does anyone have authjs sample code working using the app/api/auth/[...nexta...

O

oreq•4/12/24, 8:26 PM

Hi, use this command to see error

npx wrangler pages deployment tail

npx wrangler pages deployment tail

npx wrangler pages deployment tail

npx wrangler pages deployment tail

O

oreq•4/12/24, 8:32 PM

Have any of you used next-auth with middleware on next-on-pages without error? I'm trying to do that and everything works good on

npm run dev

npm run dev

but when I try to start it with

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static",

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static",

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static",

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static", req.auth starts be always null and I don't know why because I don't getting any error.

middleware.ts

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

I use drizzle orm with d1 for database

J

James•4/12/24, 9:09 PM

What is req.auth and why are you trying to modify the request object?

J

James•4/12/24, 9:10 PM

Is what you're trying to do modify the request object in the middleware and trying to access that extra property in a route?

JJames What is req.auth and why are you trying to modify the request object?

O

oreq•4/12/24, 9:44 PM

req.auth is user session and

auth((req) => {

auth((req) => {

auth((req) => {

auth((req) => { is wrapper for middleware from next-auth v5 that looks something like this under the hood

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

this code too doesn't give me user session on wrangler pages dev

I'm trying to redirect user based on his session.

J

James•4/12/24, 9:54 PM

ah I've found the syntax in the docs now. interesting, this is the first time I'm seeing it - it looked like something custom at first!

J

James•4/12/24, 9:55 PM

if that's not giving you a user session, I would query whether there is an active user session, or whether something is misconfigured

Ooreq req.auth is user session and `auth((req) => {` is wrapper for middleware from ne...

T

thipperz•4/12/24, 11:44 PM

Is that

req: NextResponse

req: NextResponse

req: NextResponse

req: NextResponse supposed to be like that? (maybe you meant

(req) : NextResponse

(req) : NextResponse

(req) : NextResponse

(req) : NextResponse)

T

thipperz•4/12/24, 11:49 PM

my middleware looks like this but I'm not using any adapters:

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

Ppaulc Install WSL https://learn.microsoft.com/en-us/windows/wsl/install

K

Kaze•4/13/24, 2:32 AM

I already have WSL installed, but when I run the cloudflare cli command on my linux system this message appears: "CMD.EXE was started with this path as the current directory. UNC paths are not allowed.
UNC paths are not allowed. Defaults back to the Windows directory."

K

Kaze•4/13/24, 2:33 AM

And everything stays stuck for a few seconds until it continues, but it's as if the command is still running by default in windows

K

Kaze•4/13/24, 2:37 AM

because this error: Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Windows\package.json'

K

Kaze•4/13/24, 2:55 AM

Fixed: I need to reinstall node in WSL, otherwise WSL will use the npm installed on Windows and that causes an error

Ooreq Hi, use this command to see error `npx wrangler pages deployment tail`

P

paulcOP•4/13/24, 3:53 AM

Thanks for the tip! wrangler tail tells me I'm missing AUTH_SECRET. However, I put it in the environment using wrangler secret. Am guessing nextjs doesn't know to look there. Any idea on where AUTH_SECRET should be stored on cloudflare pages?

F

faye•4/13/24, 12:37 PM

Heyo!

It seems that using 14.2.1 (so far I know), I am suddenly getting a weird error.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented., when googling this, I found some supabase stuff, which I don't use.

However, my code contains a fetch on the page, which is for example:

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

The issue here, is the

cache

cache

cache

cache part, if I remove it, it works fine. What's wrong with the no-cache? Is there a reason why it suddenly does not work anymore?

F

faye•4/13/24, 12:40 PM

Using the

appwrite

appwrite

appwrite

appwrite sdk, I am also getting:

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

F

faye•4/13/24, 12:45 PM

Seems to be the same issue on 14.1.3 :/

Ooreq Have any of you used next-auth with middleware on next-on-pages without error? I...

O

oreq•4/13/24, 12:47 PM

I can't get user in api routes in preview too but on local works

Edit:
I added

  useSecureCookies: process.env.NODE_ENV === "development" ? false : true,

useSecureCookies: process.env.NODE_ENV === "development" ? false : true,

  useSecureCookies: process.env.NODE_ENV === "development" ? false : true,

useSecureCookies: process.env.NODE_ENV === "development" ? false : true, to next-auth config and now everyting works

O

oreq•4/13/24, 1:08 PM

it works on deployment but doesn't on local build

Ffaye Heyo! It seems that using 14.2.1 (so far I know), I am suddenly getting a weird...

T

thanhle•4/13/24, 1:57 PM

try to use cache:no-store instead.

Tthanhle try to use cache:no-store instead.

F

faye•4/13/24, 2:00 PM

Then there's also the appwrite SDK, which looks like this:

T

thanhle•4/13/24, 2:02 PM

the reason here Worker detect the cache in the request. if you dont set the cache it will failed.

F

faye•4/13/24, 2:02 PM

But for the appwrite sdk, I get this error:

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

F

faye•4/13/24, 2:02 PM

Does that still have to do with the cache store?

Ppaulc Thanks for the tip! wrangler tail tells me I'm missing AUTH_SECRET. However, I p...

P

paulcOP•4/13/24, 2:56 PM

Got the issue fixed - boiled down to me thinking I could use $ wrangler secret put to create secrets in cloudflare pages

. My secret for authjs didn't exist in production env. Had to manually add. cc @James

N

neoney•4/13/24, 3:04 PM

my dev server often times seems to lag behind the actual code after I fix an issue and doesn't wanna work until I restart it

N

neoney•4/13/24, 3:04 PM

is this known?

N

neoney•4/13/24, 3:04 PM

how do I fix thi?

M

Matt•4/13/24, 5:24 PM

hey all, anyone have any experience with using durable objects from within next routes, locally? it doesnt seem like my DO is starting up right, when i attempt to get an id/stub everything is just undefined... I have something like this:

export async function GET(request: NextRequest) {
  const context = getRequestContext();

  let id = context.env.RATE_LIMITER.idFromName(new URL(request.url).pathname);
  const stub = context.env.RATE_LIMITER.get(id);

  console.log({ id, stub });

  return stub.fetch(request);
}

export async function GET(request: NextRequest) {
  const context = getRequestContext();

  let id = context.env.RATE_LIMITER.idFromName(new URL(request.url).pathname);
  const stub = context.env.RATE_LIMITER.get(id);

  console.log({ id, stub });

  return stub.fetch(request);
}

export async function GET(request: NextRequest) {
  const context = getRequestContext();

  let id = context.env.RATE_LIMITER.idFromName(new URL(request.url).pathname);
  const stub = context.env.RATE_LIMITER.get(id);

  console.log({ id, stub });

  return stub.fetch(request);
}

export async function GET(request: NextRequest) {
  const context = getRequestContext();

  let id = context.env.RATE_LIMITER.idFromName(new URL(request.url).pathname);
  const stub = context.env.RATE_LIMITER.get(id);

  console.log({ id, stub });

  return stub.fetch(request);
}

which is just giving me:

{
  id: constructor { name: undefined },
  stub: constructor { name: undefined, id: undefined }
}
 ⨯ Error [TypeError]: Failed to parse URL from [object Request]

{
  id: constructor { name: undefined },
  stub: constructor { name: undefined, id: undefined }
}
 ⨯ Error [TypeError]: Failed to parse URL from [object Request]

{
  id: constructor { name: undefined },
  stub: constructor { name: undefined, id: undefined }
}
 ⨯ Error [TypeError]: Failed to parse URL from [object Request]

{
  id: constructor { name: undefined },
  stub: constructor { name: undefined, id: undefined }
}
 ⨯ Error [TypeError]: Failed to parse URL from [object Request]

M

Matt•4/13/24, 5:25 PM

if I run the DO seperately with

wrangler dev ./thedo.ts

wrangler dev ./thedo.ts

wrangler dev ./thedo.ts

wrangler dev ./thedo.ts i can hit the DO directly in the browser without any issues

Tthanhle try to use cache:no-store instead.

F

faye•4/13/24, 10:40 PM

This does not work FYI

Ffaye Heyo! It seems that using 14.2.1 (so far I know), I am suddenly getting a weird...

J

James•4/14/24, 11:54 AM

are you able to share a reproduction? I wasn't having much luck trying to reproduce it

F

faye•4/14/24, 11:54 AM

Let me see

JJames are you able to share a reproduction? I wasn't having much luck trying to reprod...

F

faye•4/14/24, 11:57 AM

Might it be because the GET is in a server action?

F

faye•4/14/24, 11:58 AM

Because it's as simple as:

F

faye•4/14/24, 11:59 AM

(the

cache: 'no-cache'

cache: 'no-cache'

cache: 'no-cache'

cache: 'no-cache' part)

J

James•4/14/24, 1:42 PM

Hmm I haven't tried reproducing it in a server action before, will see if I have some time this evening to try it out

L

luna•4/15/24, 12:36 PM

trying to use

@cloudflare/pages-plugin-vercel-og/api

@cloudflare/pages-plugin-vercel-og/api

@cloudflare/pages-plugin-vercel-og/api

@cloudflare/pages-plugin-vercel-og/api and im getting a load of errors like so.

 ⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 ⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 ⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 ⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

P

Pat Branchaud•4/15/24, 2:52 PM

Hello everyone! I'm currently migrating our app to Next-on-Pages and we are evaluating using KV instead of firebase. Quick question: I understand that KV bindings can be accessed in a runtime edge component (SSR/Workers). Can these same KV bindings be accessed in a server component (Static Rendering/Node.js) during the build process?

F

FelDev•4/16/24, 4:35 PM

About Next.js' 2MB cache limit

Failed to set fetch cache https://foobar.com/data Error: fetch for over 2MB of data can not be cached

There is a discussion in the Next.js repo about it https://github.com/vercel/next.js/discussions/48324
People talk about modifying the hardcoded 2MB limit in node_modules... which I'd rather not do.
Of course, some advise to keep fetch calls under 2MB... but that's not always possible.

One of our API calls returns almost 50MB of data.
I'm wondering how you guys deal with this?

👋 does anyone have authjs sample code working using the app/api/auth/[...nextauth] approach you ca

Similar Threads