How to add Authentication to Web Apps? Complete Guide with examples (2022)

Visiting websites, and they not asking you to log in or signup to read more exclusive content on their website? A rare phenomenon. Developers, builders, and technological innovators all around the globe are putting their hearts and souls into bringing products to the users that genuinely matter. To do so, they need to first know who you are, and then they need to understand how to make their product customized to your needs. To fulfill the first step, the users need to be “authenticated” to view the content hidden behind the authentication layer. This is a great technique that helps both the developers and the users to gain access to information – the developers know who you are and if you are a legitimate user without malicious intent, and the users get the best out of the features that have been presented for them on these web applications. Enhancing your web and content security by deploying authentication features must and should not be neglected. In this article, the different kinds of authentication techniques have been presented, and the intuition behind the authentication systems has been explained. Readers are encouraged to take in every piece of information presented here bit by bit and try to implement them in their projects.

What happens when you enter a URL in the browser?

When a user enters a URL in the browser, let’s say google.com, then the request goes to the DNS server, which has cached addresses, details about the browser’s location, which operating system the browser is running on, a router and is connected to an internet service provider. First, the DNS server checks if the URL is present in the browser cache. If yes, then that address is used, or the request is relayed via the root domain name server, top-level domain name server, 2nd-level domain name server, and 3rd-level domain name server. After the location of the server is found, a TCP connection is initiated, which is a 3-way handshake mechanism between the client and the server. The HTTP request is initiated after this – any GET, POST, PUT, or DELETE requests that the client has made are relayed to the server, to which the server responds with codes 1xx or 2xx or 3xx or 4xx, or 5xx, depending upon what happened with the request. If everything is okay at this point, the server sends the HTML, CSS, and JS files back to the browser, which is then rendered as the web page that a normal user sees. 

Introduction to Authentication

At the beginning of the article, a brief explanation of how the web works have been provided to give a recap of computer networks and how a request is being processed in general. This is important to understand the authentication process. 

Before we even get into authentication, we need to think of why we need a user account. A user account enables us to personalize the content and offer services and information that is specifically requested by or is relevant to the user. To provide a user with an account, we need to “authenticate” it with their credentials. 

Try to imagine the most basic manner of how authentication might be happening (it doesn’t happen this way). There is a password, and there is a username; both of them are entered into our database, and then the next time whenever a user comes in, the username and password are matched in the database. If everything is matched correctly, then the user is given access to the portal and the resources which are specific to the user, or else an error message is generated. 

Now that we have a general idea of what is happening, let’s move on to understanding some more important terminologies that are used in browser authentication systems. 

Sessions, Cookies, and Tokens

A session is a period of time for which the in-browser cookies stay alive. If you have ever wondered how you stay logged in for weeks and months – it is all thanks to sessions. Cookies are files or chunks of information that are stored on the browser, which remembers the data of the user who visited earlier so that whenever the user re-visits the website, their experience is customized to them. A token, on the other hand, can be viewed as the key to unlocking the user’s identity, which is trusted on the entire network ad is able to perform an exchange of information that substantiates the credibility of a user. 

To view the cookies stored for a website in your browser, press Shift+I on windows to open the developer tools, then navigate to the Application tab, and under the Storage section, you’ll find cookies. There are several parameters that are associated with cookies – the name of the cookie, the value of the cookie, the domain of the cookie, the path of the cookie, the expiry date of the cookie, the size of the cookie, the cookie HttpOnly, is the cookie Secure and so on. 

Ways to Authenticate Other Than Using Passwords

There are several other ways through which authentication can be performed without using passwords, two of which are discussed below:

Passwordless Authentication

Passwordless authentication, as the name suggests, is a way to authenticate users without having the need for passwords. It can be done through biometrics – fingerprints, iris scanner, or through OTPs or magic links. Passwordless authentication isn’t completely safeguarded from hackers, no authentication method is really, but it offers a better layer of security since the tokens and the methods being used here are highly personalized. It is worth mentioning that readers should not confuse themselves with multi-factor authentication and passwordless authentication. Multi-factor authentication involves using more than one method of authentication to confirm the identity of the users and since the authentication method used other than the passwords is passwordless, it is not difficult to confuse them with one another. Corporates, organizations, and individuals are now investing money in biometrics and passwordless authentication systems because it is no brainer that creating, storing, and maintaining passwords at the risk of data breach every time is far more expensive than having passwordless systems. 

Ways to include passwordless authentication in your web applications:

1. Twilio offers a passwordless authentication method wherein you can send your users one-time passwords (OTPs) via SMS or email. 
2. Magic links can be used to generate a link for logging in, which is sent to their email addresses. Users can click on the link and log themselves into your web application. 
3. Auth0 also has a robust passwordless authentication method which is fairly easy to implement and is done via SMS or email, as how the requirement of the developers are. 

Single Sign On

Every web application today requires users to log in and give their details to create their user profiles in order to provide customized services. Single sign-on is a way to separate the identity provider and the service provider. This means that, let’s say, there is an application that provides users with information about managing their personal finance. There are two ways that the developers can authenticate the users – either they can create their own authentication system, or they can use Google’s single sign-on systems to authenticate the user. Google already has a robust identity management service, and most of the users have Google accounts in place. The cost of using a separate identity provider is lower than the cost of creating and maintaining one’s own authentication system. Such systems also offer a better user experience as the users do not have to remember hundreds of passwords by creating a new login whenever they are visiting a new web app. 

Here are some of the identity providers which you can use to implement single sign-on to your applications. The documentation of all of these providers is very well-written and easy to follow.

1. Google – Authenticate with Google using JavaScript
2. Facebook – Facebook Login for the Web with the JavaScript SDK
3. Apple – Configuring your Webpage for Sign-in with Apple
4. GitHub – Authenticate using GitHub with JavaScript
5. Discord – Getting Started with Discord OAuth2
6. Microsoft – Microsoft Authentication Library for JavaScript

Summary

In this article, we understood how the internet works and what happens when we actually enter any URL into our address bar. Upon having a refresher on the networking side of the internet, we then moved forward into understanding authentication in the easiest words, following which we saw sessions, cookies, and tokens – the most integral part of authenticating web applications. While the hackers are getting creative with introducing attacks that hamper the security of the users’ passwords, the developers and security specialists are coming up with more and more ways to counter the same, which include passwordless methods of authentication or multi-factor authentication methods. We also observed how social media could act as one identity for all the applications we visit that substantiate our identity as a user and authenticate them. 

Readers are encouraged to try out the different methods of authentication mentioned in this article. Focus on the backend part and do not focus on styling the frontend. Understand how things are working and try to replicate the steps two to three times to incorporate the same in your muscle memory. 

Read more about learning paths at codedamn here.

Happy Learning!