Third party auth is changing in 2024 such that anyone using Firebase to simplify implementation of Login with Google, Apple, etc buttons is going to find these stop working. (Note: these already don't work when someone comes to a site from Instagram / TikTok since internal browsers inside the Instagram / TikTok apps already block third-party cookies).

Google have outlined a fix that involves making requests to Firebase look like they're going to and from your own site.

How to implement a Firebase auth reverse-proxy with SvelteKit / Vercel

To solve the problem of third-party cookies stopping authentication working, we need to point Firebase at <your-site>/__/auth and proxy everything from /__/auth to https://<your-project>.firebaseapp.com

Step 1: Point Firebase at your site.

Change the firebase config to point at your domain rather than firebase (e.g. for echowalk this means echowalk.firebaseapp.com becomes www.echowalk.com)

Note: it is very specific about the domain. If you are serving from www. you MUST also use www. in the config.

  const firebaseConfig = {
    apiKey: <your_api_key>,
    authDomain: '<your-site>', // was <your-project>.firebaseapp.com
    projectId: 'echowalk',
    messagingSenderId: <your_id>,
    appId: <your_id>,
  }
  // Initialize Firebase auth
  const app = initializeApp(firebaseConfig);

Step 2: Implement reverse proxy for dev

For dev update vite.config.js (in the project root)

/vite.config.js

  import { sveltekit } from '@sveltejs/kit/vite';

  /** @type {import('vite').UserConfig} */
  const config = {
    plugins: [sveltekit()],
    server: {
      proxy: {
        '/__/auth': {
          target: 'https://<your-project>.firebaseapp.com',
          changeOrigin: true
        }
      },
    }
  };

Step 3: Implement reverse proxy for production

For production add a vercel.json file (in the project root)

  {
    "rewrites": [
      {
        "source": "/__/auth/:path*",
        "destination": "https://rummijapp.firebaseapp.com/__/auth/:path*"
      }
    ]
  }

Step 4: Add your domain to Firebase

Login to the Firebase Console and navigate to Authentication > Settings > Authorised domains

Step 5. Configure service providers to accept your domain as authoritative

This varies by service-provider, but Google is given here as an example:

• Goto Google Cloud Console > APIs and services > Credentials > OAuth 2.0 Client IDs > Web client
• Register app (you will need to create terms and privacy-policy pages if you've not got these already)
• Add scope for "personal info" (the minimal access)
• Add <domain> to Authorised JavaScript origins
• Add <domain>/__/auth/handler to Authorised redirect URIs

The rest of your auth code should just work as it did before.