hey champs, I configured my app with
hey champs, I configured my app with convex auth and integrated it with the auth docs (added github model), but when I use the github sign in button it throws 404 /api/auth POST
any clue why?
75 Replies
This is because you need to add the middleware that does the API calls
for next,hs at least
Server-side authentication in Next.js - Convex Auth
Authentication library for your Convex backend
Yeah I did
can you show me your middleware?
Sure
usually people play with the matcher and it doesn't work properly afterwards
+ where you placed your middleware.ts
import {
convexAuthNextjsMiddleware,
createRouteMatcher,
nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
const isSignInPage = createRouteMatcher(["/signin"]);
const isProtectedRoute = createRouteMatcher(["/product(.*)"]);
export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
if (isSignInPage(request) && (await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/dashboard");
}
if (isProtectedRoute(request) && !(await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/password");
}
});
export const config = {
// The following matcher runs middleware on all routes except static assets.
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
there has to be something wrong with middleware
@SaraYou don't have /product nor /signin 😅
I replaced it now
its the same again
The matcher is correct and the placement of the middleware is correct
import {
convexAuthNextjsMiddleware,
createRouteMatcher,
nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
const isSignInPage = createRouteMatcher(["/auth"]);
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)"]);
export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
if (isSignInPage(request) && (await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/dashboard");
}
if (isProtectedRoute(request) && !(await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/auth");
}
});
export const config = {
// The following matcher runs middleware on all routes except static assets.
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
here no product no sign in
yet we face 404
Oh!
Could it be how you imported the layout?
I can give repo link if that helps (btw thank you for helping)
like how
Can you share a screenshot of your layout please
definitely
You're supposed to pass the server auth component in your layout for all this to work
GitHub
GitHub - muperdev/collabute at dev
Collabute Website. Contribute to muperdev/collabute development by creating an account on GitHub.
well I did
GitHub
collabute/app/layout.tsx at 4c33c7723f09a0ba747d07fe5868b26dd35f6ca...
Collabute Website. Contribute to muperdev/collabute development by creating an account on GitHub.
sign in page is /auth
and I passed client component to it as well since its a client componennt
I don't see your client side provider 😅
Where did you import it?
its wrapped around the auth page
Give me a moment to clone the repo real quick
GitHub
collabute/app/auth/page.tsx at 4c33c7723f09a0ba747d07fe5868b26dd35f...
Collabute Website. Contribute to muperdev/collabute development by creating an account on GitHub.
here
sure
sorry to bother you
is it the dev braanch?
yep
Are you migrating an existing project to convex?
or is there a reason why you're using next's node backend + convex?
yeah this is an existing project
Im moving away from my backend to convex
so here we have new schemas, convex mutations and functions and also auth is the last bottle neck
there are some api routes Im using for AI purposes
I'm getting error 500 On everything almost, so I'll make the test on one of my pre existing projects
just use convex 😅
for AI ones?
yes
that would be down the line but is it a blocker?
they have the Agent component which is insanely good
it is not, just a suggestion :))
I still didn't opened that doc page, have to do it one day or another
defo
probably will do it before launch
but lets see
Well, on my side
yeah
I'm not even hitting the /auth or /api what so ever
really?
this button of mine is connected to convex sign in
cc: @ballingt
I think what you might need to do is name the api route something else like say _api temporarily, and test it out from there, to me everything seems right and in order, so I'm so sorry I can't be of help from here 😅
no worries
thank you for suggestions
I will go down that route
I can help
reading through
thank you
I was into the betterauth thing but that was overhead for me so was trying to checkout the normal convex auth @erquhart
Yeah convex auth should work well
+ one suggestion is to move the client Provider to the Layout. since it has to be wrapped in all the pages, not just the auth
let me try that sara
no same...
ooof
Are the 404's logging in your Convex dashboard or just in next
in next
and you're seeing the 404 in your network panel in the browser or is this happening server side
yeah is a client side request
what's the url that's getting the 404
its the localhost/api/auth
that seems like a holdover from trying better auth
taking another look at convex auth docs, trying to remember what proxying is happening there
thanks that would be great
What does it look like when you're calling sign in?
Import / function call
convex sign in?
never tried it yet
The function call that is producing this network request
ah that one
GitHub
collabute/app/auth/page.tsx at 4c33c7723f09a0ba747d07fe5868b26dd35f...
Collabute Website. Contribute to muperdev/collabute development by creating an account on GitHub.
here
@Behrooz Evans
I found the problem
yoho
there we go
move the middleware out of the app, into the root
ah
I always mistake them when using src haha
tada worked
hope that works
bullseye sara
yeah that was the cause
same here
great thanks everyone
will bug you a lot for infinite and I know I always have you on back
have a good day :))
awesome catch Sara!