Heroku node + react app: anchor tag auth request unhandled

Question

I'm building a node + express server, with create-react-app to the frontend. I used passportjs for auth routes handling, and all the stuff totally working on localhost ( backend on port 5000 and frontend on port 3000, with a proxy ). When I deploy to Heroku, seems like the server can't recognize my auth routes and so heroku serve up static index.html. If I test my APIs with Postman all seems to work ( I can see the html page for google oauth ), but with an anchor tag in my react app or manually writing the endpoint in the url, I can see only the same page reloading.

My server index.js:

const express = require('express')
const passport = require('passport')
const mongoose = require('mongoose')
const path = require('path')

// KEYS
const keys = require('./config/keys')

// MONGOOSE MODELS
require('./models/User')

mongoose.connect(keys.mongoURI)

// PASSPORT SETUP
require('./config/passport')

// CREATE THE SERVER
const app = express()

// EXTERNAL MIDDLEWARES
require('./middlewares/external')(app)

// ROUTE HANDLERS
require('./routes/authRoutes')(app)

// PRODUCTION SETUP
if (process.env.NODE_ENV === 'production') {
  // express serve up production assets ( main.js, main.css )
  app.use(express.static('client/build'))
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  })
}

// START THE SERVER
const PORT = process.env.PORT || 5000
app.listen(PORT)

Flow:

LOCALHOST: react app starts -> I click 'Google Login' -> GET request to "/auth/google" -> google oauth flow -> redirect to "/" and my react app reappears, the user is logged in.

HEROKU: react app on my-app.herokuapp.com/ -> click on "Google Login" -> the page reloads, nothing happens. the user is not logged in.

Please guys, help me. Thanks

When you do heroku logs --tail, do you see any errors coming from heroku? — Dream_Cap
I think with Oauth there is an "authorized url to redirect to" list in their dashboard. Do you have a redirect to url listed in there? I think thats what they use to redirect back to your app — Dream_Cap
I thought it too, but if I test my "/auth/google" api endpoint with Postman I can see the google login html page. If there was an "authorized url to redirect to" google would tell me after login, with a proper error page. — Dario Ielardi
@DarioIelardi Seems like you followed the tutorial from Stephen Grider, because I'm having the same issue. Did you somehow fix the problem? — JesterWest

voidstar voidstar · Accepted Answer · 2018-05-19T12:41:07

This is a result of the service worker being installed by default to make your app a Progressive Web App

To determine if this is an issue for you, test your heroku production mode app in incognito mode. The request for /auth/google should now reach the server and behave as it does in development.

Once you determine it is an issue, you can remove the

import registerServiceWorker from "./registerServiceWorker";

from your /client/src/index.js file.

You browser cache may already contain an installed service worker so you may have to

clear browser cache on a user browsers

uninstall the server worker programmatically

import { unregister } from './registerServiceWorker';
....
unregister();

Heroku node + react app: anchor tag auth request unhandled

3 Answers