wess•2w ago

Auth not working properly in Nextjs

hey guys what could be the reason that convex auth is not working properly on my nextjs app? setup everything as on the tutorial but after login, i dont get redirected and even if i manually go to protected route, i still get redirected back to /login page, and isAuthenticated is always loggin false

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  nextjsMiddlewareRedirect,
} from '@convex-dev/auth/nextjs/server'

const PUBLIC_ROUTES = ['/login', '/signup', '/forgot-password', '/public', '/about']
const PROTECTED_ROUTES = ['/product(.*)', '/dashboard(.*)', '/user(.*)', '/']

const isPublicRoute = createRouteMatcher(PUBLIC_ROUTES)
const isProtectedRoute = createRouteMatcher(PROTECTED_ROUTES)

export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
  const isAuthenticated = await convexAuth.isAuthenticated()
  console.log('isAuthenticated', isAuthenticated)

  const url = new URL(request.url)

  try {
    if (url.pathname === '/login' && isAuthenticated) {
      return nextjsMiddlewareRedirect(request, '/')
    }

    if (isProtectedRoute(request) && !isAuthenticated) {
      return Response.redirect(new URL(`/login?returnTo=${url.pathname}`, request.url))
    }

    if (isPublicRoute(request)) {
      return
    }

    return
  } catch (error) {
    console.error('Middleware error:', error)
    return nextjsMiddlewareRedirect(request, '/error')
  }
})

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|public).*)'],
}

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  nextjsMiddlewareRedirect,
} from '@convex-dev/auth/nextjs/server'

const PUBLIC_ROUTES = ['/login', '/signup', '/forgot-password', '/public', '/about']
const PROTECTED_ROUTES = ['/product(.*)', '/dashboard(.*)', '/user(.*)', '/']

const isPublicRoute = createRouteMatcher(PUBLIC_ROUTES)
const isProtectedRoute = createRouteMatcher(PROTECTED_ROUTES)

export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
  const isAuthenticated = await convexAuth.isAuthenticated()
  console.log('isAuthenticated', isAuthenticated)

  const url = new URL(request.url)

  try {
    if (url.pathname === '/login' && isAuthenticated) {
      return nextjsMiddlewareRedirect(request, '/')
    }

    if (isProtectedRoute(request) && !isAuthenticated) {
      return Response.redirect(new URL(`/login?returnTo=${url.pathname}`, request.url))
    }

    if (isPublicRoute(request)) {
      return
    }

    return
  } catch (error) {
    console.error('Middleware error:', error)
    return nextjsMiddlewareRedirect(request, '/error')
  }
})

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|public).*)'],
}

9 Replies

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

wessOP•2w ago

added this console.log console.log('server identity', await ctx.auth.getUserIdentity()) and right after signin its loggin the identity, but as soon as i refresh the page it logs null again! this should be the reason! what am i doing wrong?

erquhart•2w ago

I believe you need to use isAuthenticatedNextJs for checking auth status in nextjs middleware You can add it to the imports from @convex-dev/auth/nextjs/server

wessOP•2w ago

just changed to isAuthenticatedNextJs and its still returning false is there any github repo with working convex auth on nextjs?

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  nextjsMiddlewareRedirect,
  isAuthenticatedNextjs,
} from '@convex-dev/auth/nextjs/server'

const PUBLIC_ROUTES = ['/login', '/signup', '/forgot-password', '/public', '/about']
const PROTECTED_ROUTES = ['/product(.*)', '/dashboard(.*)', '/user(.*)', '/']

const isPublicRoute = createRouteMatcher(PUBLIC_ROUTES)
const isProtectedRoute = createRouteMatcher(PROTECTED_ROUTES)

export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
  const token = await convexAuth.getToken()
  console.log('token', token)
  const isAuthenticated = await isAuthenticatedNextjs()

  console.log('isAuthenticatedNextjs', isAuthenticated)

  console.log('isProtectedRoute', isProtectedRoute(request))

  const url = new URL(request.url)

  try {
    if (url.pathname === '/login' && isAuthenticated) {
      console.log('redirecting to /')
      return nextjsMiddlewareRedirect(request, '/')
    }

    if (isProtectedRoute(request) && !isAuthenticated) {
      console.log('redirecting to /login')
      return Response.redirect(new URL(`/login?returnTo=${url.pathname}`, request.url))
    }

    if (isPublicRoute(request)) {
      console.log('returning')
      return
    }

    return
  } catch (error) {
    console.error('Middleware error:', error)
    return nextjsMiddlewareRedirect(request, '/error')
  }
})

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|public).*)'],
}

import {
  convexAuthNextjsMiddleware,
  createRouteMatcher,
  nextjsMiddlewareRedirect,
  isAuthenticatedNextjs,
} from '@convex-dev/auth/nextjs/server'

const PUBLIC_ROUTES = ['/login', '/signup', '/forgot-password', '/public', '/about']
const PROTECTED_ROUTES = ['/product(.*)', '/dashboard(.*)', '/user(.*)', '/']

const isPublicRoute = createRouteMatcher(PUBLIC_ROUTES)
const isProtectedRoute = createRouteMatcher(PROTECTED_ROUTES)

export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
  const token = await convexAuth.getToken()
  console.log('token', token)
  const isAuthenticated = await isAuthenticatedNextjs()

  console.log('isAuthenticatedNextjs', isAuthenticated)

  console.log('isProtectedRoute', isProtectedRoute(request))

  const url = new URL(request.url)

  try {
    if (url.pathname === '/login' && isAuthenticated) {
      console.log('redirecting to /')
      return nextjsMiddlewareRedirect(request, '/')
    }

    if (isProtectedRoute(request) && !isAuthenticated) {
      console.log('redirecting to /login')
      return Response.redirect(new URL(`/login?returnTo=${url.pathname}`, request.url))
    }

    if (isPublicRoute(request)) {
      console.log('returning')
      return
    }

    return
  } catch (error) {
    console.error('Middleware error:', error)
    return nextjsMiddlewareRedirect(request, '/error')
  }
})

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|public).*)'],
}

providers are both set according to nextjs guide on the convex site but im not doing any server action and triggering signIn on the page with use client

erquhart•2w ago

Here's a template that implements next and convex auth: https://github.com/get-convex/template-nextjs-convexauth-shadcn

GitHub

GitHub - get-convex/template-nextjs-convexauth-shadcn: Convex + Nex...

Convex + Next.js + Convex Auth. Contribute to get-convex/template-nextjs-convexauth-shadcn development by creating an account on GitHub.

erquhart•2w ago

oh interesting that doesn't use isAuthenticatedNextJs Yeah the way you were doing it before is how the template works What version of convex auth are you on

wessOP•2w ago

i dont what i changed specifically lol, but now it works! thanks @erquhart

erquhart•2w ago

lol glad it's working

wessOP•7d ago

okay for anyone who encounters this same error, make sure to import convex providers from '@convex-dev/auth/nextjs' package, i mistakenly was importing it from react package!