Github pages and firebase auth react-router problems

I have this React + Firebase Auth web app. I implemented react-router I the project.

Now the problem is this:

First, i created the project and the auth system, since the project is a gh-pages project, is located in

.....github.io/app/  <-- URL

now in the React Composition, there are 4 main components,

<BrowserRouter>
    <div>
      <AppBar
         title="Combustion"
         style={{boxShadow:"0px 0px 8px rgba(0, 0, 0, 0.4)"}}
         iconElementLeft={<img className="flame_logo" src={flame_logo_src}/>}
         iconElementRight={
           this.state.authed ?(
                   <FlatButton
                      label="Logout"
                      style={{color:"#fff", marginTop:"5px"}}
                      onClick={() => {
                        logout()
                      }}
                    />
              ) : (<span>
                    <Link to="/login"><FlatButton  label="Login" style={{color:"#fff", marginTop:"5px"}}/></Link>
                  </span>)
                }
      />
      <div className="container">
        <div className="row">
          <Switch>
            <PublicRoute authed={this.state.authed} path='/' exact component={Home} />
            <PublicRoute authed={this.state.authed} path='/login' exact component={Login} />
            <PublicRoute authed={this.state.authed} path='/register' exact  component={Register} />
          <PrivateRoute authed={this.state.authed} path='/dashboard' exact component={ParentComponent} />
            <Route render={() => <h3>No Match</h3>} />
          </Switch>
        </div>
      </div>
    </div>
  </BrowserRouter>

Here are the custom Public and Private Route Functions

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
      : <Redirect to={{pathname: '/', state: {from: props.location}}} />}
    />
  )
}

function PublicRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === false
        ? <Component {...props} />
        : <Redirect to='/dashboard' />}
    />
  )
}

So far when I load the .....github.io/app/ URL in the search bar, I will be navigated to the path='/' and the <Home/> component but here comes the problem ...

In firebase console -> Authentication -> SIGN-IN METHOD .. down below there is Authorized domains section where you add the URL in which the Lodging in and Registration will be used .. so I fill the form with my ....github.io/app/ but after submitting the form firebase slices my URL to the ...github.io/ path .. leaving the /app/ behind .. which causes the problem.

Now I know about the custom domain and no I don't have money to buy one :D

So now when I navigate to ....github.io/app/ there's only the <h3>No match</h3> and the <AppBar /> component which contains a Logout or Login button, now clicking the Login button leads me to ...github.io/login the app works but if I try to send the ...github.io/login URL to someone they get a 404 error ..... paradox :'( .... so is there a way to fix this issue...

P.S. sorry for the long question. :/