Resolving next-auth "redirect" error when used with Supabase

Recently users on my side-project website have been experiencing login issues with oAuth (Discord, Twitch). Everything worked fine on localhost, but I would get Redirect error in production (hosted on vercel).

After many hours of trying out different configurations and looking through next-auth Github issues, I decided to upgrade next-auth from v3 to v4. The migration guide is here.

There are many bumps when upgrading, including releasing foreign keys from users table, and reverting migration changes recommended by the migration guide.

-- sessions.expires has to remain of type TIMESTAMPTZ instead of TEXT
-- don't run this line when migrating your postgres table
ALTER TABLE sessions ALTER COLUMN "expires" TYPE TEXT USING CAST(CAST(extract(epoch FROM "expires") AS BIGINT)*1000 AS TEXT);

To my dismay, however, that didn't resolve the issue.

I recalled that Supabase was dropping IPv4 support and moving to IPv6. Apparently, with that change, they are also dropping PGBouncer.

The solution was to change the connection string to avoid using PGBouncer.

# .env.local
DATABASE=postgres://postgres:[password]@db.[project-ref].supabase.co:5432/postgres
## DATABASE=postgres://postgres:[password]@aws-0-us-east-1.pooler.supabase.com:5432/postgres?options=reference%3D[project-ref]

And then update next-auth config pages/api/auth/[...nextauth].js to use the connection string.

import NextAuth from 'next-auth'
import DiscordProvider from "next-auth/providers/discord";
import TwitchProvider from "next-auth/providers/twitch";
import PostgresAdapter from "@auth/pg-adapter"
import { Pool } from 'pg'

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  max: 20,
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
  ssl: {
    rejectUnauthorized: false
  }
})

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID,
      clientSecret: process.env.DISCORD_CLIENT_SECRET
    }),
    TwitchProvider({
      clientId: process.env.TWITCH_CLIENT_ID,
      clientSecret: process.env.TWITCH_CLIENT_SECRET
    })
    // ...add more providers here
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    session: async (session, user) => {
      return session;
    }
  },
  pages: {
    signIn: '/auth/signin',
  },

  adapter: PostgresAdapter(pool),
})

Also remember to include a next-auth secret when upgrading to version 4 of next-auth.

Version 5 is already in beta of next-auth, but this upgrading experience has definitely made me rethink about making any breaking changes to my database.