Local passport authorization on different ports

You can hide both services behind proxy, Nginx for example. And both your services will be use 1 address.

NGINX config example

server {  listen 80;  server_name example.com;  proxy_set_header Host $http_host;  proxy_pass_header Server;  proxy_set_header X-Forwarded-For $remote_addr;  proxy_set_header X-Forwarded-Proto $scheme;  location / {    proxy_pass http://frontend_address:port;    proxy_redirect default;  }  location ~ /api {    proxy_pass http://backend_address:port;    proxy_redirect default;  }}

So all requests http://example.com will go to frontend service, and all requests http://example.com/api/ go to backend service.

If your web app and API are running in different ports then for authentication using passport we can try this approach

• onClick of socialAuth Button from web app (localhost:300) use window.open function to directly call the passport API (localhost:5000/auth/google)
• once the authentication is done, the callback URL will hit API port again (localhost:5000/auth/google/callback)
• now in the callback, we have user information which has to be sent to the web app (port 3000), use socket programming to achieve this.
• refer this with example

I believe you have a cross-domain issue, since you are running on different ports.

This issue has been discussed already, and I believe you can find a solution here: Passport js fails to maintain session in cross-domain

In short, you need to configure your server to send the approperiate headers to allow cross-domain sharing of the access headers.