What is Customer SSO and Why Should You Implement it?
Learn more about the advantages of Single Sign-On for your customers and how your business can benefit from a unified login experience.
In this guide, you'll learn more about how authentication in web app works and how to implement it with Authgear.
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:
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.
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:
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:
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:
Putting it together, the output web token is three Base64-URL strings separated by dots:
Here's a diagram that shows how the access token is obtained from the authorization server in order to access protected routes:
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!
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.
For integrating Authgear's web SDK, we will create our web application using the React.js library for JavaScript.
We will be using Authgear's web SDK in our React app. For this, first, we need to do a bit of setup.
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.
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:
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”.
After creating the project, we will create an application. Make sure you're on your project, and then:
Create application interface in the Portal
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.
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!
Open up your Terminal and run the following command to create a React app:
We use the Create React App (CRA) tooling to scaffold an app quickly. Read more about this tool here.
Authgear's web SDK is available as an NPM package. You can install it either via NPM or Yarn:
Now open up the newly created authgear-demo app in your favorite code editor.
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:
Next, we handle our configuration further using the .then() method, where we can add code for successful or failed configurations.
After successfully configuring the web SDK, we can go ahead with making the user log in to our app.
Here, we make our start authorization call so that we can redirect our user to the login/signup page.
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.