Registration throws multiple different errors in irregular intervals

[devbydaniel]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I am using Next.js 13 with app router. on Vercel Since a couple of days, without any code change to the registration flow, I am seeing multiple errors occurring during the registration process with email and password.

1. From /registration to /registration/confirm, one of these two errors gets thrown, after clicking submit

Unknown application error occurred Runtime.Unknown

[ERROR] [1701349527188] LAMBDA_RUNTIME Failed to post handler success response. Http response code: 400. RequestId: <id> Error: Runtime exited with error: exit status 128 Runtime.ExitError

If the error occurs, the confirmation email is still sent out and the user is created correctly, but instead of the confirmation screen, the user sees the error page.

2. After clicking the confirm link:

⨯ a [AuthApiError]: invalid flow state, flow state has expired at o (/var/task/.next/server/chunks/8094.js:1:58554) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async m (/var/task/.next/server/chunks/8094.js:1:59524) at async l (/var/task/.next/server/chunks/8094.js:1:59179) at async i._exchangeCodeForSession (/var/task/.next/server/chunks/8094.js:1:28142) at async /var/task/.next/server/chunks/8094.js:1:34104 { __isAuthError: true, status: 403 }

⨯ a [AuthApiError]: invalid request: both auth code and code verifier should be non-empty at o (/var/task/.next/server/chunks/8094.js:1:58554) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async m (/var/task/.next/server/chunks/8094.js:1:59524) at async l (/var/task/.next/server/chunks/8094.js:1:59179) at async i._exchangeCodeForSession (/var/task/.next/server/chunks/8094.js:1:28142) at async /var/task/.next/server/chunks/8094.js:1:34104 { __isAuthError: true, status: 400 }

Again, the user sees an error page, but under the hood the user is confirmed and able to login in when navigating to the login page.

The worst part is I cannot reliably reproduce these errors, they currently happen around 1 in 3 registrations and I could not find a pattern if some of these are related.

To Reproduce

As mentioned above I cannot reliably reproduce the error, but this is the code involved in the flow (basically copy pasted from the official docs)

/auth/sign-up/route.ts

export const dynamic = 'force-dynamic'

export async function POST(request: Request) {
  const requestUrl = new URL(request.url)
  const formData = await request.formData()
  const email = String(formData.get('email'))
  const password = String(formData.get('password'))
  const supabase = createRouteHandlerClient({ cookies })

  const { error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
    },
  })

  if (error) {
    return NextResponse.redirect(
      `${requestUrl.origin}/register?error=auth-failed`,
      {
        // a 301 status is required to redirect from a POST to a GET route
        status: 301,
      }
    )
  }

  return NextResponse.redirect(`${requestUrl.origin}/register/confirm`, {
    // a 301 status is required to redirect from a POST to a GET route
    status: 301,
  })
}

/auth/callback/route.ts

import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'

export const dynamic = 'force-dynamic'

export async function GET(request: Request) {
  // The `/auth/callback` route is required for the server-side auth flow implemented
  // by the Auth Helpers package. It exchanges an auth code for the user's session.
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (error) throw error
  }

  const next = requestUrl.searchParams.get('next')

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(
    next ? `${process.env.NEXT_PUBLIC_BASEURL || ''}${next}` : requestUrl.origin
  )
}

Expected behavior

No errors during registration

System information

Nextjs 13 with app router on Vercel.

"@supabase/auth-helpers-nextjs": "^0.7.4",
"@supabase/supabase-js": "^2.36.0",
"next": "^13.5.2",

Additional context

Sorry for the vague description, but I am myself completely clueless why this happens all of a sudden and how to approach this.

I'm grateful for every pointer as this severly affects the application. Thanks in advance for help

[kangmingtay]

Hi @devbydaniel, just to clarify:

[ERROR] [1701349527188] LAMBDA_RUNTIME Failed to post handler success response.

Do you observe any other errors with your lambda function? What's the code being ran in /registration/confirm ?

You mentioned that after clicking the confirmation link, you observe an invalid flow state, flow state has expired error but also mentioned this:

Again, the user sees an error page, but under the hood the user is confirmed and able to login in when navigating to the login page.

I am confused - does this mean that the user is logged in successfully despite seeing the error?

[devbydaniel]

Hi @kangmingtay, thanks for your reply!

I've moved away from the auth-helper package since posting this issue and migrated to swr, so I cannot check back, but to still answer your question in case someone else runs into the same issues:

Do you observe any other errors with your lambda function?

No, I've never before and never since had these kind of errors showing up in my logs in this app.

What's the code being ran in /registration/confirm ?

Basically nothing, at least no business logic. After posting the registration details to the sign-up route (see code above), users are being redirected to a static site without any logic.

export default function Confirm() {
  return (
    <h1 className="text-5xl text-base-content animate-pulse">
      Check your inbox
    </h1>
  )
}

I am confused - does this mean that the user is logged in successfully despite seeing the error?

Almost. There was an error thrown somewhere deep down that triggered Next.js to show the error page, but if the user then manually navigated to the login page and used their credentials, they could log in without problems. As far as I remember, the user wasn't logged in right away though.

In other words: The auth/callback route did not finish successfully, but did successfully register the user.