Search code examples
reactjsfirebasefirebase-realtime-databasefirebase-hostingreact-router-dom

React/Firebase Hosting: Why on a page refresh the user is being asked to login?

I have a react web app deployed to firebase hosting using the firebase database.

When running the application locally (yarn start) it all works as expected...I can refresh a page and it will just reload the content. However, as soon as I deploy it to firebase and try to take the same steps, the web app gets redirected to https://appengine.google.com where the user has to login.

enter image description here

I am using webpack to build the application and to deploy to firebase I am using firebase-tools.

This is a tricky problem to explain as I do not understand why the user is being asked to login. The web app has no login (authentication) functionality.

The webpack contains the following:

  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  devServer: {
    historyApiFallback: true,
  },

To handle routing I am using BrowserRouter from react-router-dom:

import { BrowserRouter, Route, Switch } from 'react-router-dom'

<BrowserRouter>
  <Switch>
    <Route
      exact
      path='/projects'
      component={Projects} />
  </Switch>
</BrowserRouter>

firebase.json:

{
  "database": {
    "rules": "rules/rules.json"
  },
  "hosting": {
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "webapp"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  }
}

Thank you in advance!

Solution

  • Fixed!

    The issue was caused by the function in the rewrites array. This caused firebase to try and load a function called webapp. However, I had no firebase function called webapp.

    To resolve this issue I needed to do "destination": "/index.html" instead of "function": "webapp". Thus giving us the following firebase.json:

    {
  "database": {
    "rules": "rules/rules.json"
  },
  "hosting": {
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  }
}