andreaselia•5mo ago

Next.js URL not changing using the documented middleware and ConvexAuth setup

When signing in using password auth, the page changes as expected, but the URL remains the same. Using the documented Convex Auth password setup, when I go to /sign-in and actually sign-in, the tasks page loads, but the URL remains as /sign-in until I refresh. Not sure if this is a bug or user error and I've missed something. Root layout:

<ConvexAuthNextjsServerProvider>
  <html lang="en">
    <body className={inter.className}>
      <ConvexClientProvider>{children}</ConvexClientProvider>
    </body>
  </html>
</ConvexAuthNextjsServerProvider>

<ConvexAuthNextjsServerProvider>
  <html lang="en">
    <body className={inter.className}>
      <ConvexClientProvider>{children}</ConvexClientProvider>
    </body>
  </html>
</ConvexAuthNextjsServerProvider>

Middleware:

const isSignInPage = createRouteMatcher(["/sign-in"]);
const isProtectedRoute = createRouteMatcher(["/tasks(.*)"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/tasks");
  }

  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/sign-in");
  }
});

const isSignInPage = createRouteMatcher(["/sign-in"]);
const isProtectedRoute = createRouteMatcher(["/tasks(.*)"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/tasks");
  }

  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/sign-in");
  }
});

17 Replies

Michal Srb•5mo ago

We don't refresh the page automatically, so the middleware doesn't run and doesn't redirect the user. You need to perform the redirect on the client:

signIn("password", data).then(() => router.push("/tasks"))

signIn("password", data).then(() => router.push("/tasks"))

andreaseliaOP•5mo ago

What handles the route switching from /sign-in to /tasks if there's nothing being handled automatically? 😅 My sign-in is literally just signIn("password", formData);

Michal Srb•5mo ago

For OAuth, it's the redirectTo param. For magic links, the user clicks on a link to the destination (also controlled via redirectTo). For Passwords, there's no redirect. This means the app can stay on the same page and handle the auth changing clientside.

signIn("password", data).then(() => router.refresh())

signIn("password", data).then(() => router.refresh())

would likely also work for you.

andreaseliaOP•5mo ago

But what I'm saying is the page does switch from sign-in to tasks once I sign up 🤔

Michal Srb•5mo ago

Ah! I misread the post.

andreaseliaOP•5mo ago

Unless I'm misunderstanding you. I understand we have the refresh after sign-in option, but the page does current switch All good, common case of written communication shenanigans 😄

Michal Srb•5mo ago

We do refresh the server data Via a server action

andreaseliaOP•5mo ago

Ah, so that's why the page changes from sign-in to tasks

Michal Srb•5mo ago

You can see it fire off in the network tab

andreaseliaOP•5mo ago

And why the middleware causes the redirect Or what I assume is the middleware causing it

Michal Srb•5mo ago

Yeah. It's confusing that Next.js keeps the current URL.

andreaseliaOP•5mo ago

Little bit annoying. I wonder if using another form of redirect other than the nextjsMiddlewareRedirect wrapper would resolve it

Michal Srb•5mo ago

I don't think that's the problem. I think it's more what our client does and how Next.js behaves. I filed https://github.com/get-convex/convex-auth/issues/58 Can you try the snippets above and see if the behavior is ok?

GitHub

Next.js: Passwords refetch server data but Next.js keeps the curren...

See https://discord.com/channels/1019350475847499849/1275574839218016337 This is not great. We could try using router.refresh instead of calling a server action, but I had trouble getting it to wor...

andreaseliaOP•5mo ago

On it 👍 router.push works but router.refresh doesn't 🙂 Updated the issue

Michal Srb•5mo ago

Thanks

andreaseliaOP•5mo ago

No prob, happy to help. Just thought I'd spend some time this evening playing around with Convex, it's pretty nice, and I imagine kinks like this will be ironed out with time. Keep up the great work 😄

cachow2024•2mo ago

Next.js URL not changing using the documented middleware and ConvexAuth setup

Did you find this page helpful?