Service worker catching the __/auth request to Google when using Firebase Authentication inside React-Boilerplate

Question

When using firebase.auth().signInWithPopup(firebase.auth.GoogleAuthProvider()) the popover opens but doesn't redirect to the accounts.google sign-in page, it goes to the page not found route of my application. I believe this is down to something with the service-worker which is made through offline-plugin. This is built into React-boilerplate, the project is using v3. I'm also using react-redux-firebase which works fine overall so I don't believe it's a problem with that set up.

Webpack prod file

// Important modules this config uses
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const OfflinePlugin = require('offline-plugin');
const { HashedModuleIdsPlugin } = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = require('./webpack.base.babel')({
  mode: 'production',

  // In production, we skip all hot-reloading stuff
  entry: [
    require.resolve('react-app-polyfill/ie11'),
    path.join(process.cwd(), 'app/app.js'),
  ],

  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            comparisons: false,
          },
          parse: {},
          mangle: true,
          output: {
            comments: false,
            ascii_only: true,
          },
        },
        parallel: true,
        cache: true,
        sourceMap: true,
      }),
    ],
    nodeEnv: 'production',
    sideEffects: true,
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
        main: {
          chunks: 'all',
          minChunks: 2,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    },
    runtimeChunk: true,
  },

  plugins: [
    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,
    }),

    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    }),

    new WebpackPwaManifest({
      name: 'Applied Charts',
      short_name: 'AW Charts',
      description: 'A bespoke chart builder to streamline workflows',
      background_color: '#fafafa',
      theme_color: '#b1624d',
      inject: true,
      ios: true,
      // icons: [
      //   {
      //     src: path.resolve('app/images/icon-512x512.png'),
      //     sizes: [72, 96, 128, 144, 192, 384, 512],
      //   },
      //   {
      //     src: path.resolve('app/images/icon-512x512.png'),
      //     sizes: [120, 152, 167, 180],
      //     ios: true,
      //   },
      // ],
    }),

    new HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 20,
    }),
  ],

  performance: {
    assetFilter: assetFilename =>
      !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
  },
});

Router only has two routes currently App.js

export default function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route component={NotFoundPage} />
      </Switch>
      <GlobalStyle />
    </div>
  );
}

Any help would be hugely appreciated.

Answer 1

Your issue is a logged bug related to offline-plugin. You can see the issue log here: https://github.com/NekR/offline-plugin/issues/412

Your service worker is indeed stealing the request to _auth. If your issue is not time sensitive you might wait for that project to fix the issue and pull the update although this issue has been open since 2018. Otherwise you can look to manually add an exemption to the service worker fetch.

The most potentially succesful comment in the thread at the time of this answer suggests the following code which potentially fixes the issue:

new RemoveServiceWorkerPlugin({ filename: 'sw.js' });

new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      ServiceWorker: {
        output: 'newsw.js',
        events: true,
        navigateFallbackURL: '/',
      },

      excludes: ['.htaccess', '*/__/auth*/{*.*,.*}'],

Ultimately you need to find a way to excempt the __/auth path from the service worker's processing and things should be fine.