From Login to Lockdown: Building Secure Authenticated Applications

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.

An authenticated application is a software application that verifies a user's identity before granting access to its features and data. This essential security measure ensures that only authorized individuals can interact with the application.

Authentication involves confirming that a user is who they claim to be. This is typically achieved by requiring users to provide credentials such as usernames, passwords, or biometric data. Once verified, the application issues a digital token or session cookie, allowing the user to access protected resources.

Essentially, an authenticated application acts as a gatekeeper, safeguarding sensitive information and preventing unauthorized access.

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.

Building upon the OAuth 2.0 protocol, OpenID Connect (OIDC) simplifies user authentication by providing an authorization layer on top of it. This layer enables applications to verify user identities and obtain essential user information beyond just basic authentication. OIDC offers several advantages, including:

• Single Sign-On (SSO): Users can log in to your application using their existing credentials from a trusted identity provider (IdP) like Google or Facebook, eliminating the need for separate login credentials for your application. This streamlines the login process and improves user experience.
• Reduced Security Risk: By leveraging established IdPs for authentication, OIDC reduces the burden of managing user credentials on your application server. This minimizes the risk of data breaches and unauthorized access.‍
• Rich User Information: OIDC allows applications to request and receive a broader scope of user information from the IdP beyond just usernames. This information can include profile details, email addresses, and preferences, potentially enriching the user experience within your application.

Security Assertion Markup Language (SAML) is an XML-based standard for exchanging authentication and authorization data between online systems. It functions as a single sign-on (SSO) and federated identity management solution, specifically designed for enterprise environments. In an SSO scenario, a user logs in once to a central identity provider (IdP) and can then access multiple secure applications without needing to re-enter their credentials for each application. SAML relies on XML assertions to securely communicate authentication and authorization data between the IdP, the service provider (SP) requesting access (i.e., your web application), and potentially other trusted parties. This enables users to seamlessly move between different applications within a corporate network or cloud environment without encountering separate login prompts.  

Learn more about OIDC and SAML:

OIDC vs. SAML: Decoding the SSO Showdown (And Why It Matters for Your Business)

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.authgear.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

Initialize the Authgear SDK

‍

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.authgear-apps.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. Or join our Discord server to learn more about web application authentication