Kevin•4mo ago

[Convex Auth] Middleware on Nextjs

Following https://labs.convex.dev/auth/authz/nextjs After using signIn from useAuthActions by Email OTP (from resend),

const { signIn } = useAuthActions()

await signIn("resend-otp", { email , code})

const { signIn } = useAuthActions()

await signIn("resend-otp", { email , code})

on client side,

 const { isAuthenticated, isLoading } = useConvexAuth()

 const { isAuthenticated, isLoading } = useConvexAuth()

I see isAuthenticated = true however, on middleware,

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  isAuthenticatedNextjs,
  nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
 
const isSignInPage = createRouteMatcher(["/signin"]);
const isProtectedRoute = createRouteMatcher(["/product(.*)"]);
 
export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/product");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/signin");
  }
});
 
export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  isAuthenticatedNextjs,
  nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
 
const isSignInPage = createRouteMatcher(["/signin"]);
const isProtectedRoute = createRouteMatcher(["/product(.*)"]);
 
export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/product");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/signin");
  }
});
 
export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

isAuthenticatedNextjs() is always false can you guys let me know how to debug this? There is no error shown from console or terminal?

Server-side authentication in Next.js - Convex Auth

Authentication library for your Convex backend

8 Replies

sshader•4mo ago

Just to check, you have a ConvexAuthNextjsServerProvider wrapping your entire app? (like in this template: https://github.com/get-convex/generate-template-nextjs/blob/18f2ef3f4c10c83abedd4494b42693e422ae7cb5/app/layout.tsx#L23) What requests are you seeing in your browser network tab and in your Convex logs?

KevinOP•4mo ago

Hi yes, I have ConvexAuthNextjsServerProvider at root layout In my convex logs, I didn't see anything, in browser network tab, what kind of requests should I check?

sshader•4mo ago

In my convex logs, I didn't see anything

Like actually nothing? I'd expect to at least see some requests for signIn I guess I'd be most interested in seeing the request made when you load the link sent via email -- I believe this should be setting a cookie on localhost:3000 (or whatever dev URL you have), which is what isAuthenticatedNextjs checks for

KevinOP•4mo ago

@sshader I used Email OTP, so in email sent from resend, it has only OTP code then on web client, I call signIn with email and otp, it seems working because isAuthenticated = true but when I log isAuthenticatedNextjs on middle, it said false I tried to refresh the app, but still false, so I think cookie is not carrying over?

sshader•4mo ago

Ah sorry -- got Email OTP confused with magic links. When I try with Email OTP in my demo app I have a request to localhost:3000/api/auth that sets a cookie (and then isAuthenticatedNextjs is true when I log it)

KevinOP•4mo ago

Great I will debug and let you know

Chad Maycumber•4mo ago

Is it possible to get the current user on the NextJS middleware to check for a role for example?

thedevstockgirl•4mo ago

@Chad Maycumber , it looks like currently you have to make a db query to convex for that. But @Michal Srb has an open issue where we might be able to get additional props like role in the session: https://github.com/get-convex/convex-auth/issues/25 You can upvote 🙏

GitHub

Allow storing information in the JWT · Issue #25 · get-convex/conve...

Some people might be more familiar with retrieving information from the JWT instead of from the DB. The client would provide the equivalent of Clerk's useUser hook, and on the backend await ctx...

[Convex Auth] Middleware on Nextjs

Did you find this page helpful?