In this blog post I explain how to secure an API with OAuth 2.0 authorization framework as well as implementing changes in a Web app/page to allow users access to that API. This implementation uses JavaScript in frontend and backend (Node.js)...

The easiest way to password protect a resource on Web is to use Basic Authentication scheme. Bearer authentication is another common, but more complex authentication scheme which I will talk about in another article. In basic authentication two HTTP headers are used: authorization and www-authenticate. When an http request without authorization header is received by the server, it would return a response with 401 (unauthorized) status and the header www-authenticate: basic. This header tells user agent to prompt user to enter credentials required to access the resource. Credentials entered by the user are then encoded in username:password format and sent to the server in a new request's authorization header. When server receives this request it checks whether the value of authorization header matches with credentials stored on the server or not. If it does, server responds with the requested resource, otherwise it responds with 401 (unauthorized) status and the header “www-authenticate: basic”.

Example of basic authentication implemented in Node.js: https://github.com/smohadjer/vercel-basic-auth/blob/master/middleware.js

Basic Authentication demo (Use admin for both username and password)