Next.js: make Firebase Auth signInWithRedirect work with Safari

May 4, 2024

Had that issue back in 2022 and it’s now a pretty well-understood problem, but better write about it later than never. 😂

Essentially, in Safari 16.1+ (and now Firefox 109+), there are more aggressive restrictions on third-party cookies that mess with the way Firebase Auth signInWithRedirect is implemented.

By default, your app could be running on but signInWithRedirect would redirect to and then back to your app in order to handle the auth. The message passing with third-party cookies between those two hosts is no longer possible in Safari, Firefox, and soon Chrome.

Firebase docs now document 5 options to solve that.

  1. If you host your app on Firebase, make sure your Firebase config authDomain point to your custom domain and not Because Firebase hosts your app, it will automatically handle the special __/auth path.
  2. Use signInWithPopup which doesn’t depend on third-party cookies.
  3. If your frontend is not hosted on Firebase, proxy requests from* to* so there’s no cross-domain concerns.
  4. Download the relevant files from* and “self-host” them on your app.
  5. Handle provider auth by yourself.

In my case, I’m not hosting the website on Firebase, and I don’t want to use signInWithPupup, so the proxy looks like a solid option.

In a Next.js app, it’s as easy as adding the following to next.config.js:

module.exports = {
  async rewrites () {
    return {
      beforeFiles: [
          source: '/__/auth/:path*',
          destination: `*`

Want to leave a comment?

Start a conversation on Twitter or send me an email! 💌
This post helped you? Buy me a coffee! 🍻