Backend Voting App Social Login Question

21

Yep sure did.

22

Ah, so you have a session on localhost:3000 which you cannot access from localhost:4200.

I have a proxy.config.json file to proxy requests from angular to my node server which seems to fix this issue. I will see if I can get my project on github in a few minutes.

23

I think so? Sure sounds like it. Though I have no idea why its not working in the first place. Why is a proxy required???

24

I put my code on github: GitHub - BenGitter/ng-twitter-login

  • app.js: contains all the server logic except some config
  • ng-src/package.json: check npm start
  • ng-src/proxy.config.json: proxy config file
  • ng-src/src/app/app.component.ts & .html: links to server

Because sessions are not shared accros ports or servers.

I have to admit that I am not sure if this is the only (or even the correct way) to do it. Maybe @prohorova knows more about it.

25

Same problem persisting after addition of the proxy file. ĀÆ_(惄)_/ĀÆ

26

Can you upload your code to something like github?

27

https://github.com/JstAnther1/votingapp-attempt

Here it is! Thanks for trying to help me out :slight_smile:

28

Iā€™ve noticed you use cors module. It doesnā€™t go well with passport session authentication. That is why I served my backend and frontend from the same domain. Itā€™s a well documented problem:


So youā€™ll probably need to look into that

29

That was easier than I expected:

You will have to change your links to relative paths. So, instead of http://localhost:3000/profile use /profile, otherwise the proxy isnā€™t used.

You should always use relative paths if you are planning to serve your final angular code (from ng build) from your node server. That way you only have to set up your proxy and when you are done you donā€™t have to change all the links.

EDIT: As @prohorova just said, it is best indeed best to have them on the same server in production. But since the angular cli uses its own dev server, the proxy is used to make it work during development.

EDIT2: You forgot to hide your OAuth credentials, so you might want to refresh those.

EDIT3: Sorry for all the editsā€¦ Hopefully the last one. I donā€™t think there is another option then to have both the frontend and backend on the same server, because otherwise you will have the same problem as without the proxy. There might be a workaround for that, but it is easiest to just have your node server serve the frontend anyway.

30

@BenGitter It workkkksss! Thanks!
And for anybody who may encounter this problem and might want to try out the proxy in the future: (heres a good link)


*Impt: start angular from npm start not ng-serve

Question: But why does my other api work then? For example, for my main voting page, I have my polls stored in mongo and they are called out to localhost:3000/allcurrentpolls and then I am able http.get them in the service and pass them to angular to display at localhost:4200/allcurrentpolls?

@prohorova I seeā€¦ But isnā€™t that the point of the cors module in the first place??.. To allow access to the api from any other domain???

31

Your server is accesible from anywhere. You use cors to ensure that everyone can access it without getting an error. But for the authentication part you need a session (that is where the user info is stored). And for some reason that doesnā€™t work if you authenticate over port 3000 and then request user info from port 4200.