next-auth firebase integration session remains unauthenticated in production even after user logged in

[indianknight]

I am struggling now for a week on my hobby project with problem mentioned in title using following stack :

  "@auth/firebase-adapter": "^2.4.1",
   "firebase": "^10.12.3",  
   "firebase-admin": "^11.4.1",
   "next": "^14.2.5",     
   "next-auth": ^4.24.7",

I am using page router from Nextjs and everything worked like charm locally only when I decided to use firebase hosting and adding my github workflow action to deploy on live channel. I see in the logs user gets authenticated and /api/auth/session also seems successful in debug logs but still I am not redirected to the user dashboard plus in the browser log session remains loading to unauthenticated.

2024-08-26 22:25:17.277 CEST
[next-auth][debug][OAUTH_CALLBACK_RESPONSE] {
2024-08-26 22:25:17.277 CEST
  profile: {
2024-08-26 22:25:17.277 CEST
    id: '104375086503794955667',
2024-08-26 22:25:17.277 CEST
    name: 'xxxxxxx xxxxxxxx',
2024-08-26 22:25:17.277 CEST
    email: 'xxxx@xxxx.com',
2024-08-26 22:25:17.277 CEST
    image: 'https://lh3.googleusercontent.com/a/dfdsfggfgdfg'
2024-08-26 22:25:17.277 CEST
  },
2024-08-26 22:25:17.277 CEST
  account: {
    provider: 'google',
2024-08-26 22:25:17.277 CEST
    type: 'oauth',
2024-08-26 22:25:17.277 CEST
    providerAccountId: '104375086503794955667',
2024-08-26 22:25:17.277 CEST
    access_token: 'ya29.a0AcM612zLPBRv1_bpK8sigSRrMls1-KqLIU71XhFKSLntycxwluh8dZbW1gIvHZ1qZ0GFLc3QTb3nbRuuCS1OQpj3UaLholtykYwDYtCF_kmZ2YrOpczmBHt72SEKY91Mj1VCsWQrqTw-mWoUVhleNxLi_-MnBKNI8z_jAdDCaCgYKAc8SARISFQHGX2Mi_5AvRawFbv2RjGoX06T87g0175',
2024-08-26 22:25:17.277 CEST
    expires_at: 1724707516,
2024-08-26 22:25:17.277 CEST
    refresh_token: '1//03GbA4Bsa2ZyiCgYIARAAGAMSNwF-L9IrhTuMWoWOusVyqkAv4XUn9dSRh7PpcObf9boYPQeFdv7gfUAbb6fhE5hJ7M_tDF7sTEY',
2024-08-26 22:25:17.277 CEST
    scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid',
2024-08-26 22:25:17.277 CEST
    token_type: 'Bearer',
2024-08-26 22:25:17.277 CEST
    id_token: 'eyJhbGciOiJSUzI1NiIsImtpZCI6ImE0OTM5MWJmNTJiNThjMWQ1NjAyNTVjMmYyYTA0ZTU5ZTIyYTdiNjUiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiIyODUwNzk4MDk4NDAtNG9oNWN0NWdub3NrYmg3ZWJqNWplNmtoZ3RxOGY4dDIuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiIyODUwNzk4MDk4NDAtNG9oNWN0NWdub3NrYmg3ZWJqNWplNmtoZ3RxOGY4dDIuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMDQzNzUwODY1MDM3OTQ5NTU2NjciLCJoZCI6InNhdHNvbS5ubCIsImVtYWlsIjoic2hhaWxlc2hAc2F0c29tLm5sIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF0X2hhc2giOiJIel9Wd2lIRm9DSnB5WXY0SmdMVTZ3IiwibmFtZSI6IlNoYWlsZXNoIEt1c2h3YWhhIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hL0FDZzhvY0tYSHNwQWh2dkc2UHF1Z2xCSEhYSUx1cS15a2h1R1NUdGxZZ2dfbmdpRVEzU1FTUT1zOTYtYyIsImdpdmVuX25hbWUiOiJTaGFpbGVzaCIsImZhbWlseV9uYW1lIjoiS3VzaHdhaGEiLCJpYXQiOjE3MjQ3MDM5MTcsImV4cCI6MTcyNDcwNzUxN30.gOBujv8QzkJM9KLD9ygKFT8JrM9hyA17w_XCImgJEbTvMei56wXBvbEF55YNE7T95wGKTzcyavYOlT-FD_smlQiD5j1ojZ5eW4QB02-tCoOgXUGvg_5RwumC9NruS1mMa6tbMOSkmIt17Uyx5Bkil3HZc67EdMTyl0DtIKZ54EXbxjZjacul_zerzAVW13_0K_7Jgx9vbIvdMtDddugxRD5Vn7qEPp-JtoZv3vebd2P31UWgb7VOrJvcDbTaxXOddwaQ2bE3dig3I3h6-mczVqvf_NbBB4p7IegQvG-IJ36NjrdlAW2hBX2XySxwE-C41VIowT_oyMZaVdD9vqiAag'
2024-08-26 22:25:17.277 CEST
  },
 22:25:17.277 CEST
}
2024-08-26 22:25:17.278 CEST
[next-auth][debug][adapter_getUserByAccount] {
2024-08-26 22:25:17.278 CEST
  args: [
2024-08-26 22:25:17.278 CEST
    { providerAccountId: '1043750865955667', provider: 'google' }
2024-08-26 22:25:17.278 CEST
  ]
2024-08-26 22:25:17.278 CEST
}
2024-08-26 22:25:17.642 CEST
[next-auth][debug][adapter_getUserByAccount] {
2024-08-26 22:25:17.642 CEST
  args: [
2024-08-26 22:25:17.642 CEST
    { providerAccountId: '104375084955667', provider: 'google' }
2024-08-26 22:25:17.642 CEST
  ]
2024-08-26 22:25:17.642 CEST
}
2024-08-26 22:25:17.766 CEST
2024-08-26 22:25:17.766 CEST
[next-auth][debug][adapter_createSession] {
2024-08-26 22:25:17.766 CEST
  args: [
2024-08-26 22:25:17.766 CEST
    {
2024-08-26 22:25:17.766 CEST
      sessionToken: '631fbd87-a268-470c-b5b7-7d80955c385f',
2024-08-26 22:25:17.766 CEST
      userId: 'E0SvNz3lX55jkNcbvhnc',
2024-08-26 22:25:17.766 CEST
      expires: 2024-08-27T20:25:17.767Z
2024-08-26 22:25:17.766 CEST
    }
2024-08-26 22:25:17.766 CEST
  ]
2024-08-26 22:25:17.766 CEST
}
2024-08-26 22:25:18.516 CEST
GET200652 B21 msChrome 128 https://fh-4ad0f48fb3d6feb6---ssrwisdom6cfed-afsdmhowkq-ew.a.run.app/api/auth/session 
2024-08-26 22:25:18.537 CEST
[MIDDLEWARE] Request url:  /api/auth/session
2024-08-26 22:25:18.537 CEST
[MIDDLEWARE] Request method:  GET
2024-08-26 22:27:00.446 CEST
GET200652 B30 msChrome 128 https://fh-4ad0f48fb3d6feb6---ssrwisdom6cfed-afsdmhowkq-ew.a.run.app/api/auth/session 
2024-08-26 22:27:00.482 CEST
[MIDDLEWARE] Request url:  /api/auth/session
2024-08-26 22:27:00.482 CEST
[MIDDLEWARE] Request method:  GET
 

So all this in debug log but still I am not redirected and this is browser log :

This is my [...nextaurth].js

  session: {
    strategy: 'database',
    maxAge: 24 * 60 * 60, // 1 days
    updateAge: 24 * 60 * 60, // 24 hours
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          prompt: 'consent',
          access_type: 'offline',
          response_type: 'code',
        },
      },
      checks: ['none'],
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
  ],
  adapter: FirestoreAdapter(firestore) as Adapter,
  secret: process.env.SECRET,
  callbacks: {
     async session({ session, token, user }) {
         return session
    },
    async redirect({ url, baseUrl }) {
      const redirectUrl = url.startsWith('/')
        ? new URL(url, baseUrl).toString()
        : url
      console.log(
        `[next-auth] Redirecting to "${redirectUrl}" (resolved from url "${url}" and baseUrl "${baseUrl}")`
      )
      return redirectUrl
    },
    async signIn({ account, profile }) {
      const { email_verified } = profile as GoogleProfile
      console.log('Email verfied : ', email_verified)
      if (account?.provider === 'google' && email_verified) {
        return true
      }
      return false
    },
  },
  events: {
    async signOut({ session, token }) {
      const userStore = useUserStore.getState()
      userStore.clearUser()
    },
  },
  debug: true,
}

function convertToUser(adapterUser: any): User {
  return {
    ...adapterUser,
    dateOfBirth: adapterUser.dateOfBirth || '',
    preferredAddress: adapterUser.preferredAddress || null,
    savedAddresses: adapterUser.savedAddresses || [],
    locale: adapterUser.locale || 'en',
  }
}

I removed code from session callback (as this code works locally) so i tried without it by just logging in session callback but still session object remains null and its status from loading to unauthenticated.

My App so ãpp.tsx

function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: {
  Component: ComponentType<any>
  pageProps: any
}) {
  const router = useRouter()
  return (
    <SessionProvider session={pageProps.session} refetchOnWindowFocus={true}>
      <NextUIProvider navigate={router.push}>
        <Head>
          <title>My site title</title>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </NextUIProvider>
    </SessionProvider>
  )
}

2024-08-26 21:35:49.380 CEST
POST200787 B35 msChrome 128 https://fh-84781ef9277eedbe---ssrwisdom6cfed-afsdmhowkq-ew.a.run.app/api/auth/signin/google 
2024-08-26 21:35:49.407 CEST
[MIDDLEWARE] Request url:  /api/auth/signin/google
2024-08-26 21:35:49.408 CEST
[MIDDLEWARE] Request method:  POST
2024-08-26 21:35:49.410 CEST
[next-auth] Redirecting to "https://wisdom-6cfed.web.app/user/account?tab=account" (resolved from url "/user/account?tab=account" and baseUrl "https://wisdom-6cfed.web.app")
2024-08-26 21:35:49.416 CEST
[next-auth][debug][GET_AUTHORIZATION_URL] {
2024-08-26 21:35:49.416 CEST
  url: 'https://accounts.google.com/o/oauth2/v2/auth?client_id=285079809840-4oh5ct5gnoskq8f8t2.apps.googleusercontent.com&scope=openid%20email%20profile&response_type=code&redirect_uri=https%3A%2F%2Fwisdom-6cfed.web.app%2Fapi%2Fauth%2Fcallback%2Fgoogle&prompt=consent&access_type=offline',
2024-08-26 21:35:49.416 CEST
  cookies: [],

And below is the page where I redirect user /user/account?tab=account I see in server log that redirect callback is received and I log the redirectUrl (please check the logs above)

// pages/user/account.tsx
'use client'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { Key, useEffect, useState } from 'react'
import {
  FcAddressBook,
  FcComments,
  FcDepartment,
  FcSettings,
  FcTemplate,
} from 'react-icons/fc'

const UserAccount = () => {
  const { data: session, status } = useSession()
  const [activeTab, setActiveTab] = useState('account')
  const router = useRouter()

  console.log('Session : inside user account page ', session)
  console.log('Status : inside user account page ', status)
  console.log('Router : inside user account page ', router.query.tab)
  useEffect(() => {
    if (status === 'loading') {
      return // Do nothing while loading
    } else if (status === 'unauthenticated') {
      router.push('/login')
    }
  }, [status])

  useEffect(() => {
    const tab = router.query.tab as string
    if (tab) {
      setActiveTab(tab)
    } else {
      setActiveTab('account') // Default tab if no tab query is present
    }
  }, [router.query.tab])

  const handleTabChange = (key: Key) => {
    router.push(`/user/account?tab=${key}`, undefined, { shallow: true })
  }

  if (status === 'loading') {
    return <p>Loading...</p>
  }

  if (status === 'authenticated') {
    return (
      <div className="container px-5 py-10 sm:py-16 mx-auto flex flex-col items-center mt-10 bg-blue-50 rounded-xl">
        <div className="lg:w-4/6 mx-auto">
          <div className="flex flex-wrap">
            <div className="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <Image
                className="img-fluid w-full h-full object-cover"
                src="/images/banner2.png"
                alt=""
              />
            </div>
          </div>

Because this route is never reached on production the browser log you see is from the navbar component which is part of every page and there I do the client side logging and it is always unauthenticated or loading and session object remains undefined.

Any help would be really appreciated.