vuejs webpack + express + passport not working in PRODUCTION mode

Question

I am completely new to vuejs

I am working on a MEVN app. I setup a vuejs project with vue-cli , which runs on localhost:8080 , and an express server which runs on localhost:3000. to send all the requests to my express server, I added proxy in vue's config/index.js which works perfectly. Now i added passport google oauth in my app. in server.js file i added

app.get('/auth/google',
passport.authenticate('google', {session : false, scope: ['openid email profile'],accessType: 'offline',prompt: 'consent'}))

and its callback route also

and in my vuejs code i added

<a href="/auth/google">Login with Google</a>

on clicking Login with Google my app works perfectly in development mode but in PRODUCTION mode when i click Login instead of going to google consent screen for login it goes to <app-url>/auth/google with a blank page

please help me with this..

NOTE : for production mode i did npm run build and then served the static file in server.js file (express) , and also used connect-history-api-fallback

UPDATE : well connect-history-api-fallback was the problem but removing it results in broken vuejs routes as m using them in history mode now what to do ?

update your google-app, seems like you have callback setup to localhost — 2oppin
@2oppin thanks for ur response, i updated my question , i updated my google-app but then also i was getting this error.. and when i tried in localhost the error was same basically when i run my app with client on other localhost:8080 and server on localhost:3000 it works perfectly.. but when i bundle the client and bring it to server.js (by serving the static 'dist' folder) i.e now my whole app npw runs on localhost:3000 it redirects to localhost:3000/auth/google with a blank page — Harkirat Singh
and it doesnt even goes to google consent screen for signing up the user. it just stays there. so that callback part i guess doesn't get triggered — Harkirat Singh
what callback uri you have for your application, there: console.developers.google.com/apis same place where you get your clientID and secret, you should fill valid (your production) uri — 2oppin

Harkirat Singh Harkirat Singh · Accepted Answer · 2017-12-28T21:51:00

Well just re-arranging my server.js did the trick

moved app.use(history()) below app.get('auth/google') and it worked

vuejs webpack + express + passport not working in PRODUCTION mode

1 Answers