anmot.•4mo ago

Convex Auth - /api/auth/ - 404 not found

Getting 404 on client for this API call - http://localhost:3000/api/auth/ Auth type: Phone OTP auth:signIn action is working and I'm able to get the OTP when running from convex dashboard, so I assume server part is fine. Client: Next Js - Wrapped ConvexAuthNextjsServerProvider in RootLayout. - Wrapped ConvexAuthNextjsProvider in ConvexClientProvider. Middleware.ts

import {
  convexAuthNextjsMiddleware,
  isAuthenticatedNextjs
} from "@convex-dev/auth/nextjs/server";
import { NextResponse } from "next/server";


// export default convexAuthNextjsMiddleware();

export default convexAuthNextjsMiddleware((request) => {
  console.log("### middleware", request.url);
  console.log("### isAuthenticatedNextjs", isAuthenticatedNextjs());
  return NextResponse.next();
});

export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

import {
  convexAuthNextjsMiddleware,
  isAuthenticatedNextjs
} from "@convex-dev/auth/nextjs/server";
import { NextResponse } from "next/server";


// export default convexAuthNextjsMiddleware();

export default convexAuthNextjsMiddleware((request) => {
  console.log("### middleware", request.url);
  console.log("### isAuthenticatedNextjs", isAuthenticatedNextjs());
  return NextResponse.next();
});

export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

I'm able to see the output logs

web-store:dev: ### middleware http://localhost:3000/api/auth/
web-store:dev: ### isAuthenticatedNextjs false

web-store:dev: ### middleware http://localhost:3000/api/auth/
web-store:dev: ### isAuthenticatedNextjs false

Tried deleting .nextjs and built the client multiple times. No luck. Network logs:

7 Replies

sshader•4mo ago

Do you see any logs in Convex? The middleware should be proxying the /api/auth request to Convex so a log line should be showing up there. The trailing slash seems potentially problematic - you're hitting this when entering in the OTP? If so, mind sharing some of the client code?

anmot.OP•4mo ago

Getting 404, if I remove the trailing /

curl --location 'http://localhost:3000/api/auth' \
--header 'Content-Type: application/json' \
--data '{}'

curl --location 'http://localhost:3000/api/auth' \
--header 'Content-Type: application/json' \
--data '{}'

No logs in convex. I don't think the request is reaching convex server. Client code:

import { useAuthActions } from "@convex-dev/auth/react"; 
  
const { signIn } = useAuthActions();
const result = await signIn("twilio-otp", { phone: data.phone });

import { useAuthActions } from "@convex-dev/auth/react"; 
  
const { signIn } = useAuthActions();
const result = await signIn("twilio-otp", { phone: data.phone });

Server auth.ts

const twilioOTP = Phone({
  id: "twilio-otp",
  maxAge: 60 * 20, // 20 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new Error("`phone` param is missing for twilio-otp");
    }
    await ctx.runAction(internal.otp.sendOtp, {
      to: phone,
      code: token,
    });
  },
});

const twilioOTP = Phone({
  id: "twilio-otp",
  maxAge: 60 * 20, // 20 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new Error("`phone` param is missing for twilio-otp");
    }
    await ctx.runAction(internal.otp.sendOtp, {
      to: phone,
      code: token,
    });
  },
});

sshader•4mo ago

Some more things to check -- what version of Convex Auth + Convex are you using? (I recommend upgrading to latest if possible) Are other requests to localhost:3000 are succeeding (e.g. curl http://localhost:3000 returns something that looks like the HTML for your root page)? Is there anything else running on port 3000? (on my mac I used lsof -i :3000 and the ps aux | grep <process ID> to check that the only process on that port was next-server) Also if you update your version of Convex Auth (0.0.65), there's a verbose option to convexAuthNextjsMiddleware that'll hopefully give us more info on what's happening (convexAuthNextjsMiddleware(handler, { verbose: true }))

anmot.OP•4mo ago

Upgraded to latest versions. path /api/auth/ does not match /api/auth

web-store:dev: [verbose] 2024-09-06T21:40:42.856Z [ConvexAuthNextjs] Begin middleware for request with URL http://localhost:3000/api/auth/
web-store:dev: [verbose] 2024-09-06T21:40:42.859Z [ConvexAuthNextjs] Not proxying auth action to Convex, path /api/auth/ does not match /api/auth
web-store:dev: [verbose] 2024-09-06T21:40:42.859Z [ConvexAuthNextjs] Begin handleAuthenticationInRequest
web-store:dev: [verbose] 2024-09-06T21:40:42.861Z [ConvexAuthNextjs] No tokens to refresh, returning undefined
web-store:dev: ### middleware http://localhost:3000/api/auth/
web-store:dev: ### isAuthenticatedNextjs false
web-store:dev:  POST /api/auth/ 404 in 62ms

web-store:dev: [verbose] 2024-09-06T21:40:42.856Z [ConvexAuthNextjs] Begin middleware for request with URL http://localhost:3000/api/auth/
web-store:dev: [verbose] 2024-09-06T21:40:42.859Z [ConvexAuthNextjs] Not proxying auth action to Convex, path /api/auth/ does not match /api/auth
web-store:dev: [verbose] 2024-09-06T21:40:42.859Z [ConvexAuthNextjs] Begin handleAuthenticationInRequest
web-store:dev: [verbose] 2024-09-06T21:40:42.861Z [ConvexAuthNextjs] No tokens to refresh, returning undefined
web-store:dev: ### middleware http://localhost:3000/api/auth/
web-store:dev: ### isAuthenticatedNextjs false
web-store:dev:  POST /api/auth/ 404 in 62ms

Next js app is running on 3000

anmot.OP•4mo ago

I see two requests 1. http://localhost:3000/api/auth - 308 redirect 2. http://localhost:3000/api/auth/ - 404

anmot.OP•4mo ago

Looks like trailing slash is causing the issue. Removed trailingSlash: true from the next.config.ts and it seems to be working. Thanks for looking into it.

sshader•4mo ago

Ooh nice find -- I'll probably change this to also match the trailing slash (or at a minimum add a note about this next config option)

Convex Auth - /api/auth/ - 404 not found

Did you find this page helpful?