Afzal•4mo ago

How to redirect to register page from restricted rout if new user

What would be the best way to implement this: I am using Convex AUTH and Nextjs with email otp based authentication using Node mailer. When user submits OTP we verify the OTP and check is the user is existing user or new user using isNewUser query. Based on that I am able to redirect to register page or home page. But there is an edge case I am unable to figure out: if user didn't complete the registration flow and refreshed the page, the user is getting redirected to home page as while submiting the OTP i had already verified the user which gets autheticated. What would be best way to handle this where we restrict the home if user is new user. I tried creating a query function and use it in middleware but it seems that query functions cannot be used in middleware.

7 Replies

sshader•4mo ago

but it seems that query functions cannot be used in middleware.

Can you say more about the issue you're hitting here? This should be possible (https://docs.convex.dev/client/react/nextjs/server-rendering#server-actions-and-route-handlers, also check out the section on authentication below)

Next.js Server Rendering | Convex Developer Hub

Next.js automatically renders both Client and Server Components on the server

AfzalOP•4mo ago

I am bit new to programming, so I might be asking very basic question. The image shows my routing structure. App flow: Login Page> OTP Page > Register Page> Posts Page(Home) I have implemented the auth flow and restrictec routes to "(product)" routs. Its working fine except: Lets say user logged in > Submited OTP> Landed on Register page> Refreshed without Submitting the user details. Now ideally the user should be redirected to Register page if its not complete but on refresh user is landing on the Home(Posts) page.

AfzalOP•4mo ago

Here is my middleware code:

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  isAuthenticatedNextjs,
  nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
import { api, internal } from "@/convex/_generated/api";
import { auth } from "@/convex/auth";
import { useQuery } from "convex/react";


const isSignInPage = createRouteMatcher(["/login"]);
const isProtectedRoute = createRouteMatcher([ "/posts", "/billing", "/settings", "/board"]);
const isRegisterPage = createRouteMatcher(["/register"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/posts");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/login");
  }
  if (isProtectedRoute(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser();
      if (checkNewUser) {
        return nextjsMiddlewareRedirect(request, "/register");
      }
  }
});
 
 
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";
import { api, internal } from "@/convex/_generated/api";
import { auth } from "@/convex/auth";
import { useQuery } from "convex/react";


const isSignInPage = createRouteMatcher(["/login"]);
const isProtectedRoute = createRouteMatcher([ "/posts", "/billing", "/settings", "/board"]);
const isRegisterPage = createRouteMatcher(["/register"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/posts");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/login");
  }
  if (isProtectedRoute(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser();
      if (checkNewUser) {
        return nextjsMiddlewareRedirect(request, "/register");
      }
  }
});
 
 
export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

` @sshader can you help me out on this? it got it fixed by removing the "()" from the function "const checkNewUser = api.users.isNewUser". But wanted to confirm if this is the right way to do it? Here is what my updated middleware looks like:

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  isAuthenticatedNextjs,
  nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
import { api, internal } from "@/convex/_generated/api";
import { auth } from "@/convex/auth";
import { useQuery } from "convex/react";


const isSignInPage = createRouteMatcher(["/login"]);
const isProtectedRoute = createRouteMatcher([ "/posts", "/billing", "/settings", "/board"]);
const isRegisterPage = createRouteMatcher(["/register"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/posts");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/login");
  }
  if (isProtectedRoute(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser;
      if (checkNewUser) {
        return nextjsMiddlewareRedirect(request, "/register");
      }
  }
  if (isRegisterPage(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser;
    if (!checkNewUser) {
      return nextjsMiddlewareRedirect(request, "/posts");
    }
  }
});
 
 
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";
import { api, internal } from "@/convex/_generated/api";
import { auth } from "@/convex/auth";
import { useQuery } from "convex/react";


const isSignInPage = createRouteMatcher(["/login"]);
const isProtectedRoute = createRouteMatcher([ "/posts", "/billing", "/settings", "/board"]);
const isRegisterPage = createRouteMatcher(["/register"]);

export default convexAuthNextjsMiddleware((request) => {
  if (isSignInPage(request) && isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/posts");
  }
  if (isProtectedRoute(request) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request, "/login");
  }
  if (isProtectedRoute(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser;
      if (checkNewUser) {
        return nextjsMiddlewareRedirect(request, "/register");
      }
  }
  if (isRegisterPage(request) && isAuthenticatedNextjs()) {
    const checkNewUser =  api.users.isNewUser;
    if (!checkNewUser) {
      return nextjsMiddlewareRedirect(request, "/posts");
    }
  }
});
 
 
export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

sshader•4mo ago

You want something like fetchQuery(api.users.isNewUser, { token: convexAuthNextjsToken() }) to call a query with auth -- there are examples in the docs I linked earlier

AfzalOP•4mo ago

It worked with above code i shared, I created a query function that checks if user is new user by fetching isAnonymus from users table. Then I used that query function in the middleware as you can see above. But not sure if that is right way to do it. Hi @sshader I read the documentation link you had shared above and implemneted similarly but getting this error:

TypeScript typecheck via `tsc` failed.
To ignore failing typecheck, use `--typecheck=disable`.
middleware.ts:7:21 - error TS2307: Cannot find module '@/convex/_generated/api.js' or its corresponding type declarations.

7 import { api } from "@/convex/_generated/api.js"
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in middleware.ts:7

TypeScript typecheck via `tsc` failed.
To ignore failing typecheck, use `--typecheck=disable`.
middleware.ts:7:21 - error TS2307: Cannot find module '@/convex/_generated/api.js' or its corresponding type declarations.

7 import { api } from "@/convex/_generated/api.js"
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in middleware.ts:7

The app is working as expected though, getting this log in convex terminal

ballingt•4mo ago

Instead of @/convex/_generated/api.js can you try a relative path to this directory? Like import { api } from "../../convex/_generated/api.js" might be thta the tsconfig.json in the convex directory is not configured with this alias

AfzalOP•4mo ago

It does works fine now, thank a lot @ballingt & @sshader . I added these two to the convex tsconfig: "baseUrl": ".", "paths": { "@/": ["../"] }

How to redirect to register page from restricted rout if new user

Did you find this page helpful?