Web Application Authentication: How It Works and How to Implement It

As a web developer, you know how common it is to have authentication in your application as a requirement. And why not? It should be important, we surely want to know who is making requests, manage multi-transactions, and protect users' private information.

In this guide, you’ll learn all you need to know about web app authentication, how it works in your web apps, and how to integrate Authgear Web SDK with your web apps to implement authentication quickly and securely.

Before we start discussing all the technical details of how authentication works in web apps, let's first understand what authentication actually is with an example.

In simple terms,

This means it is used to prove that some fact or some document is genuine, true or valid. What happens is that a user confirms their identity by providing their credentials. This piece of information is shared between the user and the service or system where authentication is required.

For example, when you want to access your Gmail account from a new device, you will need to be authenticated before you can see all of your emails or create a new one. You must prove that you own the correct login credentials by entering a username/email and password combination. When these values match with the ones stored in Google's database, you will be authenticated and granted access to the mail service.

Now that we have a clear idea of what authentication means, let's try to understand how this process actually works under the hood in web applications.

We have many ways in which an app can be authenticated. Let's look at each of them one by one:

Cookies are generally used to handle user authentication in web applications. Here's a diagram that shows how this works:

Working of cookie-based authentication in web apps:

This method is on the rise as we see more and more Single Page Applications (SPAs) being made.

One of the most common ways to implement token-based authentication is to use JSON Web Tokens (JWTs). JWTs are an open standard that defines a self-contained way to transmit information between parties as JSON objects securely.

Working of token-based authentication:

When the credentials are received from the client's browser, the server validates these credentials and also generates a signed JWT containing all of the user information. The token is stateless, so it never gets stored on the server. Over the following requests, the token is passed to the server and then gets decoded in order to verify it on the server.

The third-party access authentication can work in two ways:

• Via API-token: it's usually the same as we discussed above on JWT, where the token is sent to the authorization header and handled at some API gateway to authenticate the user.
• Via Open Authentication (OAuth): as you might have guessed by its name, OAuth is an open protocol that allows secure authentication methods from the web, mobile, and desktop applications. This protocol authenticates against the server as a user.

This is currently the most commonly used method of authentication and is more accessible to the end user. OpenID is a protocol that uses identity provider(s) to validate a user.

This allows service providers a way to achieve Single SignOn (SSO), thereby allowing users to use one set of credentials to log into several related yet independent software or systems. You might already be using several identity providers like Google, Facebook, Twitter, etc.

Security assertion markup language, or SAML, is an open standard used for authentication and is based upon the extensible Markup Language (XML) format.

Web apps use it to transfer authentication data between two parties - the identity provider (IdP) and the service provider (SP). It provides a way to achieve SSO where the user can use the identity provider URL to log into the application, which redirects back with XML data to the application page.

We hear the term "access tokens" whenever we talk about authentication. But what are these in the first place? Let's figure this out.

What Are Access Tokens?

These access tokens are provided as JSON Web Tokens (JWTs), which are then passed over the secure HTTPS protocol while in transit.

They are used in token-based authentication types. When you are successfully authenticated, the web application receives an access token. Now whenever an API is called on the app, this token will be passed as a credential.

The basic structure of a web token consists of the following parts separated by dots(.):

1. Header: this again consists of two parts; the token type (like JWT) and the token signing algorithm being used (like SHA256). Here's an example:

	
{
	"alg": SHA256",
	"typ": "JWT"
}
	

2. Payload: this contains the claims. Claims are statements about an entity (like a user) with some additional data. These claims can be registered, public or private. Here's an example payload:

{
	"sub": "1234567890",
	"name": "John Doe"
	"admin": true
}

3. Signature: here, the encoded header and payload, along with a secret, the header's algorithm comes together and signs it to create a signature. For example, here's a signature code using the HMAC SHA256 algorithm:

HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)

Putting it together, the output web token is three Base64-URL strings separated by dots:

eyJhbGci0iJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIi0iIxMjMONTY30DkwIiwibmFtZSI6IkpvaG4
gRG91IiwiaXNTb2NpYWwiOnRydWV9.
4pcPyMD0901PSyXnrXCjTwXyr4BsezdI1AVTmud2fU4

Working of Web Tokens

Here's a diagram that shows how the access token is obtained from the authorization server in order to access protected routes:

1. The client requests for authorization to the authentication server.
2. After granting the authorization, the auth server returns an access token to the application.
3. The application uses the token to access a protected route via some API.

Now that you know all about what access tokes are, where they're used, and how they work in a web app, let's try to take a look at using one of the authentication providers, i.e., Authgear.

We saw many ways to authenticate the user using different methods and how they work. Now let's take a practical approach toward authentication. We will be using Authgear here, so we will tell you all you need to know if you're unfamiliar with it. As for the web, we will be using the React.js library. Let's begin!

What is Authgear?

It supports integrations with popular third-party service providers like Google, Apple, and Azure Active Directory (AD). Along with this, it also supports authentication via WhatsApp, email address and phone number via the One-Time Password (OTP) method.

Here are some of the features Authgear provides you by default:

1. Signup page: you don't need to create a custom signup page now, as you can use Authgear's prebuilt signup and login pages with best practices for signup conversions. You can even customize the look to align it with your brand visual identity.

2. Multiple security features: you can easily implement social logins, Two-Factor Authentication (2FA), biometrics, and more features available to use to provide a smooth and secure user experience.

3. Password policies: you can have your customizable password policies to fulfill your corporate security requirements.

4. Sessions alert and revoke: you can easily ensure your user's security by listing their sessions and terminating any unknown sessions easily.

5. User profile & setting: This feature allows your users to have more control over their account information and activity. They can edit information, such as name, primary address, username, etc., of their profiles, manage their 2FAs, and terminate suspiscious sessions.

‍

6. Admin portals: your admin portal shows you everything you need to know about configuring the different authentication methods, adding security measures, or creating/revoking users with a few clicks.

What is React.js?

For integrating Authgear's web SDK, we will create our web application using the React.js library for JavaScript.

Setup Authgear for React

We will be using Authgear's web SDK in our React app. For this, first, we need to do a bit of setup.

Step 1: Signup for the Authgear Portal account

Visit https://portal.authgearapps.com/ and create a new account (or login into an existing one).

After you've created your Authgear account, you will be prompted to create a new project.

Step 2: Create and configure your project

You should see the following right now:

Create project dialog box

You can name it anything you like, but you won't be able to change it later. This is your Authgear endpoint so choose wisely. Here, we call it ‘reactappdemo’.

Now we configure the project in the next three steps. Here, we choose the following settings:

• Email and password
• Users can enable 2FA optionally
• TOTP Devices/Apps

After you choose your required settings, you will be greeted with the following:

Project creation finished interface

‍

Now, you can click on “Continue to Portal for further Customisation”.

Step 3: Create an application

After creating the project, we will create an application. Make sure you're on your project, and then:

1. Go to the ‘Applications’ option in the sidebar.
2. Click 'Add Application' and input the name you want to give:

Create application interface in the Portal

Step 4: Configure the application

While on your app's ‘Edit Application’ section, check the ‘Issue JWT as access token’ checkbox under the ‘Token Settings’ section. This enables to use JWT as an access token and allows easier access token decoding. But if you will forward incoming requests to Authgear Resolver Endpoint for authentication, leave this unchecked.

Step 5: Add your website to allowed origins

We need our website origin to communicate with Authgear. For this:

You should have this by now:

With this, we are all ready to start some coding!

Scaffold a React app

Open up your Terminal and run the following command to create a React app:

npx create-react-app authgear-demo

We use the Create React App (CRA) tooling to scaffold an app quickly. Read more about this tool here.

Install Authgear's Web SDK

Authgear's web SDK is available as an NPM package. You can install it either via NPM or Yarn:

npm install --save --save-exact @authgear/web
// OR
yarn add @authgear/web --exact

Now open up the newly created authgear-demo app in your favorite code editor.

Initialize the Authgear SDK

Head over to the App.js root file. Here, we need to do a bit of cleanup. We need to add the SDK initialization code correctly before use; for that, we add the following code:

authgear
	.configure({
		endpoint: 'https://yourapp.authgearapps.com',
			clientID: 'YOUR_CLIENT_ID',
			sessionType: 'refresh_token',
	 })
.then(
	() => {
		console.log('Succesfully configured!');
	},
	(err) => {
		console.log('Failed to configure', err);
	}
);
	

Next, we handle our configuration further using the .then() method, where we can add code for successful or failed configurations.

Log in to your application

After successfully configuring the web SDK, we can go ahead with making the user log in to our app.

Step 1: Replace the default JSX code with the following:

    
    function App() {
        return (
            <div className='App'>
                <button style={{ marginTop: '10rem' }} onClick={handleOnClick}>
                    Signup / Login
                </button>
            </div>
            );
    }
    export default App;
    	

function handleOnClick() {
authgear(
	.startAuthorization({
		redirectURI: 'https://localhost:3000/auth-redirect',
		prompt: 'login',
	})
.then(
	() = > {
		console.log('Auth Started')
	},
		(err) => {
			console.log('Failed to authorize',, err);
		}      
	);
}
	

Here, we make our start authorization call so that we can redirect our user to the login/signup page.

authgear.finishAuthorization().then(
	(userInfo) => {
		// authorized successfully
		console.log('Authorized successfully');
	},
	(err) => {
		// failed to finish authorization
    console.log('Failed to finish authorization', err);
  }
);
  

Contact us to learn more about how Authgear can help you improve user experience, increase conversion rate, and ensure security for your apps.

You may also refer to our Authgear Docs for more instructions.