Which authentication strategy should I use for my API?

Question

I have a client-side angular-js application. And I have a server-side nodejs API. The client-side and the server-side application are located on different domains. The client-side use API for getting or posting some data. Also the client-side needs to get images from the server-side and show them in a browser.

I use passport nodejs module for the authentication. I don't know which authentication strategy is better for me. I think that there are two types of authentication strategies: token-based and cookie-based. And I think that both types useless in my case:

1. If I use token-based strategies, then I should send Authentication header with a token in each request to the API. I can send headers in AJAX requests, but if I want to show an image that is located on the server-side I have a problem. Because a browser will not send headers in <img> tag.

2. If I use cookies, then I don't have the problem with images. But I have problems with AJAX requests. Because the session cookie is stored on the server-side application's domain. And if I send AJAX requests from the client-side domain, then I should send cookies with each request. I use XmlHttpRequest for AJAX and I should use withCredentials option for sending cookies. But in crossdomain requests browsers will send a preflight (OPTION) request before each AJAX request. And browsers will not send cookies with OPTION request. This is a problem for me because the server-side API could not make a correct response on an OPTION request if it will be not authorized.

What is the adopted solution?

Answer 1

It is important to understand the difference between web applications and web services. A web application serves markup, JavaScript, CSS and image files and often uses cookie based authentication (but can use any other implicit authentication mechanism). Any request the browser makes is automatically authenticated.

Web services on the other hand often use bearer token authentication. When a client in a browser, fat client or on a mobile device communicates with the API, it sends along a token in the Authorization header of the HTTP request. The header has to be explicitly attached to the request in the JavaScript or native code executing the HTTP request.

In Single Page Applications (SPA), the web application is missing and the markup, JavaScript, CSS and images are served from the browser without authentication. Only the requests to the web services are authenticated, typically using a JWT token.

In your case, if you want only authorized users to be able to download images, and other files, you should consider building a web application. Use a security protocol like or OpenID Connect to authenticate your users. Choose an authorization server that supports both OpenID Connect for your web application and OAuth2 for your web service.