Firebase Hosting (Cloud Run) x Nextjs x NextAuth

[michaelangeloio]

Hi, Team and contributors at NextAuth!

I wanted to share what I've learned setting up NextAuth with Firebase Hosting (and a cloud function v2 backend) and get some feedback on general thoughts/security concerns.

By combing through this repo's comments and other areas of the interweb (like this for example) , I found that Firebase Hosting strips all cookies besides __session.

You can find more on that here: https://firebase.google.com/docs/hosting/manage-cache#using_cookies

I've found that the following configuration works for me:

Providers

  providers: [
    StravaProvider({
      clientId: process.env.NEXT_PUBLIC_STRAVA_CLIENT_ID,
      clientSecret: process.env.STRAVA_CLIENT_SECRET,
      authorization: {
        params: {
          scope: process.env.NEXT_PUBLIC_STRAVA_APP_SCOPES,
          redirect_uri: `${getWebEnvUrl()}/api/auth/callback/strava`,
        },
      },
      checks: ['state'],
    }),
  ],

Cookies

  cookies: {
    state: {
      name: `${cookiePrefix}`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
      },
    },
  },

Security Concerns

Reading the NextAuth Docs, I noticed that changing cookie names seems to be antipattern.

This is an advanced option and using it is not recommended as you may break authentication or introduce security flaws into your application.

It seems that each individual has its own key that is stored as its corresponding cookie (and incremented depending on value size), like so:

  csrfToken: {
    name: `__Host-next-auth.csrf-token`,
    options: {
      httpOnly: true,
      sameSite: 'lax',
      path: '/',
      secure: true
    }
  },
  pkceCodeVerifier: {
    name: `${cookiePrefix}next-auth.pkce.code_verifier`,
    options: {
      httpOnly: true,
      sameSite: 'lax',
      path: '/',
      secure: useSecureCookies
    }
  },
  state: {
    name: `${cookiePrefix}next-auth.state`,
    options: {
      httpOnly: true,
      sameSite: "lax",
      path: "/",
      secure: useSecureCookies,
    },
  },

I would like to get y'alls thoughts on the security implications of setting a custom state cookie named __session. It's unfortunate that Firebase Hosting does not seem to allow multiple session keys (this is a deal breaker for some, I feel like).

Potential Feature Request?

Being that Firebase Hosting only allows the __session key as a cookie and that the current configuration for NextAuth requires multiple keys (per csrf token, state token, etc), I'm wondering if there is a way to store those four keys inside the same __session cookie? Would this be a new feature to support this behavior? Is it even plausible or practical? Especially seeing that the cookie size limit is 4096 bytes.

Let me know what you all think! Thank you for giving this a read!

[mrr11k]

Hi,

thanks for sharing your approach. 🙂

I'm facing a similar issue right now. I'm adding a custom provider to my next app.
On my staging environment (firebase hosting+cloud run) after the login at the provider, the redirect(callback) to /api/auth/callback/<providerId> is missing all of the following cookies:

• next-auth.csrf-token
• next-auth.callback-url
• next-auth.session-token
  compared to my local environment and a test environment, where I'm testing with a domain directly connected to Cloud Run.

Your approach might work, but in my case I definitely also need the next-auth.callback-url to be properly set.

By any chance, did you gather any other new information on this topic.

Best regards

[wiktor-cobry]

Hey, did you manage to come up with a solution that worked for you? Coming up against this right now as well.

[mrr11k]

Hey,

in the end, we moved away from firebase hosting. We set up a global load balancer and connected the cloud run through a NEG.

I think there is currenty no solution with firebase hosting, even though i read somewhere that they are working on a solution for these scenarios.

[wiktor-cobry]

We found the same; shame - the deployment process to Firebase Hosting is so simple!

[Harsh4999]

Facing same issue on localhost I am getting session object of user with next auth but when i do firebase deploy and it creates SSR function there after login my getServerSideProp is not able to get session object. What I think that it is removing cookies related to session. Any solutions to this also on which platform did you shift so that it worked

[mrr11k]

Hey,
if you want to stay in the Google Cloud you might consider setting up a global load balancer as I mentioned here.

[Tekaichi]

Hey, still no proper solution for this ?
Its really needed to setup a global load balancer and move away from firebase hosting for the time being?