Bug: Update the Google login flow to comply with new chrome security rules

Modern browsers are increasingly blocking third-party cookies and storage access by default as a privacy measure. This includes browsers like Google Chrome, Firefox, and Safari. When third-party cookies or storage are blocked, it disrupts the signInWithRedirect() flow in Firebase Authentication.

signInWithRedirect() Flow

Redirect to Identity Provider (IdP): When a user signs in with a provider like Google, they are redirected from your app to the Identity Provider (e.g., Google’s sign-in page).
Return to App: After the user authenticates, the IdP redirects back to your app.
Cross-Origin Storage Access: During this process, Firebase Authentication uses a cross-origin iframe to manage the sign-in session, which relies on third-party storage access.

When browsers block third-party cookies or storage:

The cross-origin iframe used by Firebase cannot store necessary session information.
This breaks the sign-in flow, preventing users from successfully signing in with signInWithRedirect().

Since your application is hosted on Vercel under a custom domain name, you need to follow one of the options provided for applications hosted with a service other than Firebase. Let's go with Option 3: Proxy Auth Requests to firebaseapp.com, which is commonly a good solution for custom domains.

Option 3: Proxy Auth Requests to `firebaseapp.com`

Steps to Implement:

Set Up a Reverse Proxy:
- Configure your Vercel server to forward requests to Firebase's auth endpoints. Unfortunately, Vercel does not support setting up server configurations directly as you would with NGINX. Instead, you can use middleware or API routes to create this proxy.
Example Code for Reverse Proxy:
- You can create a custom server using next.config.js and middleware functions in a Next.js app hosted on Vercel.

Middleware Setup in Next.js:

Create a middleware function in your Next.js app to forward authentication requests:

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = new URL(request.url);

  if (url.pathname.startsWith('/__/auth')) {
    url.hostname = '<project>.firebaseapp.com';
    return NextResponse.rewrite(url.toString());
  }

  return NextResponse.next();
}

Add this middleware to your next.config.js:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/__/auth/:path*',
        destination: 'https://<project>.firebaseapp.com/__/auth/:path*',
      },
    ];
  },
};

Update Your Firebase Config:

Configure Firebase to use your custom domain as the authDomain in your Firebase configuration.

const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<your-custom-domain>",
  databaseURL: "<database-url>",
  projectId: "<project-id>",
  appId: "<app-id>"
};

Add Authorized Redirect URIs:
- Add the new authDomain to your OAuth provider’s list of authorized redirect URIs. This usually involves updating your OAuth provider’s settings. The URI should be in the format https://<your-custom-domain>/__/auth/handler.
Re-deploy Your Application:
- Once you've set up the reverse proxy and updated your Firebase configuration, re-deploy your app on Vercel to apply the changes.

Summary

Custom Domain on Vercel: Implement a reverse proxy to forward authentication requests.
Update Firebase Config: Use your custom domain as authDomain.
Update OAuth Provider: Add the custom domain to the list of authorized redirect URIs.

Tech-Pangolin / latertots