uma•6d ago

callback, 3rd party authentication, convexAuth

I am running into a problem with Figma Oauth 2.0 callback which returns with ?code=&state= appended to the return URL. Now, the ?code part of it is getting consumed by ConvexAuth. I'd love some help on getting around it. I edited my middleware.ts to do the following:

export default convexAuthNextjsMiddleware((request) => {
  const url = new URL(request.url)
  console.log('Middleware full URL:', url.href)
  // Intercept the Figma callback route to rewrite "code" as "figmaCode"
  if (url.pathname.startsWith('/settings/profile/figma-auth-callback') && url.searchParams.has('code')) {
    const code = url.searchParams.get('code')!
    url.searchParams.delete('code')
    url.searchParams.set('figmaCode', code)
    // Redirect to the same URL with the renamed query parameter.
    return NextResponse.redirect(url)
  }
  if (!isPublicPage(request as NextRequest) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request as NextRequest, '/auth')
  }
})

export default convexAuthNextjsMiddleware((request) => {
  const url = new URL(request.url)
  console.log('Middleware full URL:', url.href)
  // Intercept the Figma callback route to rewrite "code" as "figmaCode"
  if (url.pathname.startsWith('/settings/profile/figma-auth-callback') && url.searchParams.has('code')) {
    const code = url.searchParams.get('code')!
    url.searchParams.delete('code')
    url.searchParams.set('figmaCode', code)
    // Redirect to the same URL with the renamed query parameter.
    return NextResponse.redirect(url)
  }
  if (!isPublicPage(request as NextRequest) && !isAuthenticatedNextjs()) {
    return nextjsMiddlewareRedirect(request as NextRequest, '/auth')
  }
})

But that doesn't fix it either. I couldn't use this workaround because I am not using tanstack server: https://github.com/get-convex/convex-auth/issues/145 The work around would be to break out a chunk of code out from ConvexAuthNextjsServerProvider and that is painful. Integration with a third party is common, so what could I be missing? This has to be solved elegantly. A movement on this thread: https://github.com/get-convex/convex-auth/issues/145 as suggested by @ballingt and @sshader would work.

GitHub

Convex Auth consumes pages that have "code" as search param · Issu...

Came across this curious case recently: A user is created and authenticated through Convex Auth, no problem, no sweat. As a business rule, that user needs to be able to connect a Mailchimp account ...

10 Replies

erquhart•2d ago

@uma I'm going to see about providing some kind of escape hatch for this, will update. Proposal: Handle custom OAuth flows If you have custom OAuth flows that use the code query parameter (like Figma OAuth), you can prevent Convex Auth from handling those codes by providing a shouldHandleCode callback:

ts filename="middleware.ts"
export default convexAuthNextjsMiddleware(
  (request, { convexAuth }) => {
    // ...
  },
  {
    shouldHandleCode: (request) => {
      // Don't handle code parameter for Figma OAuth callback
      if (
        request.nextUrl.pathname.startsWith(
          "/settings/profile/figma-auth-callback",
        )
      ) {
        return false;
      }
      // Handle all other code parameters
      return true;
    },
  },
);

ts filename="middleware.ts"
export default convexAuthNextjsMiddleware(
  (request, { convexAuth }) => {
    // ...
  },
  {
    shouldHandleCode: (request) => {
      // Don't handle code parameter for Figma OAuth callback
      if (
        request.nextUrl.pathname.startsWith(
          "/settings/profile/figma-auth-callback",
        )
      ) {
        return false;
      }
      // Handle all other code parameters
      return true;
    },
  },
);

The callback receives the request object and should return true if Convex Auth should handle the code parameter, or false if it should be left alone for your custom OAuth flow to handle.

umaOP•2d ago

I can use this, yes!!!

erquhart•2d ago

I'm going to publish a fork with this included, can you test? cool, that'll be quicker than setting up a repro. just a minute Alright you can do:

npm i @convex-dev/auth@npm:@erquhart/convex-auth@0.0.82-beta.1

npm i @convex-dev/auth@npm:@erquhart/convex-auth@0.0.82-beta.1

That will install the fork under the alias of the original package name so you don't have to update your imports

umaOP•2d ago

Never done this: installing fork under same alias, so this feels cool. Will report back. Broke something..fixing. Issues are on my end. I am on it.

Sheng•2d ago

How about this? It will check the pathname first, if matched then no need to go through the convex auth middleware.

export const middleware = async (req: NextRequest, event: NextFetchEvent) => {
  if (req.nextUrl.pathname.startsWith("/settings/profile/figma-auth-callback")) {
    // Do something here if needed
    return NextResponse.next()
  }

  return convexAuthNextjsMiddleware(
    async (request, { convexAuth }) => {
      // ...
    },
  )(req, event)
}

export const middleware = async (req: NextRequest, event: NextFetchEvent) => {
  if (req.nextUrl.pathname.startsWith("/settings/profile/figma-auth-callback")) {
    // Do something here if needed
    return NextResponse.next()
  }

  return convexAuthNextjsMiddleware(
    async (request, { convexAuth }) => {
      // ...
    },
  )(req, event)
}

umaOP•2d ago

This works - I had some outdated packages, installed them and now I receive the callback 'code' and my middleware.ts code that is replacing code with figmaCode as query param - that's successful too! Whoa! Super happy. Didn't try your suggestion, Sheng, but that should work too - saying this from reading the code only.

Sheng•2d ago

Yes, basically is just run some code before reaching the convex auth middleware

umaOP•23h ago

@erquhart i also get some warnings because of the new code. Is there a github thread where I should be tabulating them?

erquhart•23h ago

Here is fine for now

umaOP•2h ago

I will send some reports tonight - have to prepare for a demo going to take place at Convex this evening! 😎

callback, 3rd party authentication, convexAuth

Did you find this page helpful?