Authentication with separated client and server

Question

I have created web application in angular 2 for the client side and NodeJS with express framework for the server-side.

For the client side, I generated the project with angular-cli which runs on a lite-server, so my client and server are running on 2 different services.

I want to integrate ADFS authentication. To implement the authentication, I am using passport-saml package. There is a middleware in my server-side API which requires a user to authenticate.

The authentication process works fine when reaching the server directly (without the client).

However, I fail to access the API through the @angular/http. I tried a simple GET request from the server (with the middleware in the end-point) and as a result I am getting the authentication page without redirection (I don't think it's the core problem, but the actual implementation is).

How should I properly implement the authentication when using separate services to the server and the client?

Answer 1

Hi I was also facing the same issue my angular project was hosted on 4200 port. and my node on 3000 port. Its difficult to implement passport when we have 2 ports running.

step 1 make angular project static by doing an ng build to public folder . make sure angular-cli.json has *"outDir": "../public",*

step 2 Now we can use the same node port to access angular roots please add below code in your node app.js

var path = require('path');
  // Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
     res.sendFile(path.join(__dirname, 'public/index.html'));
});

This will enable your angular project accessible through node port.

step 3: Now we can add the passport login button in the UI and give the url <a href="/passport/auth/twitter">twitter</a>

THIS IS not explanatory means feel to ask me the doubts.