Converting Web Traffic to Permanent Users with Seamless Authentication

One of the main factors that drive online business solutions is the conversion rate. Let's go over some basic terms before we get into the nitty-gritty of the strategies.

Assume you've just launched your new online small business and are anticipating your first sales. The essential component is discoverability.

When a person visits a website that provides a solution/service/product(s), they are frequently interested in learning more about it. When all of their questions appear to be answered, they make a move to purchase/subscribe. Conversion is the process of converting a visit into a sale/subscription.

A higher conversion or retention rate is an indication that a business is steering in the right direction. So what does it take to achieve a higher conversion rate? Let’s look at some of the ways to help your business grow.

Clean Design

When it comes to first impressions, the simplicity with which a site can be navigated is crucial. The visitor should be able to navigate around your site without difficulty, and the user interface, such as popup modals or sidebar widgets, should be elegant and motivate people to take action. At the same time, don't go overboard; otherwise, the visitor will feel pressured to act and frequently leave and never return. This is not what we want.

Be to the Point

The primary goal of visiting a website is to discover more about a product or service. As a result, the content posted should be well-crafted and relevant.

The material should express what the user is seeking while avoiding any potential for misunderstanding. The material should be prepared keeping in mind how much time a reader has to devote to something.

All necessary information should be given in brief and to the point. All crucial details should be placed near the beginning, if not at the very beginning, as this motivates the visitor to read more and make judgments. If crucial elements are at the end and verbose, the user will lose interest and move away before even getting to the major part. You would have lost a potential customer due to incorrect information delivery.

In a nutshell, keep the details and information short and sweet to avoid such errors.

Smooth Authentication and Onboarding

If you meet the above requirements, the visitor has had their questions answered, is interested in the given product/service, and is ready to place an order. At this point, if they are unable to do so, that is bad.

The common problem for this is authentication problems. Of course, one must verify that the user is who they claim to be to avoid fraudulent or unethical acts. But a complex authentication system is typically time-consuming and costly. At the same time, authentication cannot be taken lightly. It is, without a doubt, one of the most crucial aspects of the website.

A good solution to this is using a free user management tool like Frontegg’s login box builder, which offers a myriad of options to ensure there’s enough flexibility on how a login/sign-up widget can be built. Take your time, and experiment around to choose what suits you best. Frontegg provides user management that can handle everything from authentication through checkout. We'll see a full implementation of authentication in this section.

The login/sign-up widget is currently available for sites built on React, Angular, and Vue. This article focuses on integrating the authentication system in React. However, a similar approach can be adapted to achieve the same in other frameworks too.

Building an authentication system using Frontegg is pretty simple and requires only three steps:

1. Design
2. Integrate
3. Deploy

Design

Once you sign up, you land on a page that says ‘Build your login box’, ‘Integrate’, etc. Click the ‘Start’ beside ‘Build your login box’. Here’s where you’ll be setting the aesthetics and authentication type. There’s a free hand to this and no restrictions on how the authentication system should be built.

For example, under the authentication style, you can set the auth system to be either password-based or password less. To get more control, you can click on ‘configure’ to add custom settings. Additionally, you can also include social logins from various platforms. Once you are done adding the right auth system, the next part is designing. Click on ‘style’ in the tabbed menu, besides ‘Login methods’.

Here, you can set the theme, colors, image logos, and much more. Click on ‘Publish Changes’ to save changes.

Integrate

Now that the login/sign-up box is ready, the next step is to integrate the widget into your site. The integration could be either hosted or embedded.

In this article, we’ll be going ahead with hosted login, but you’re free to take up embedded login as well. Install ‘react-router-dom’ and ‘@frontegg/react’ by running the following command:

npm install @frontegg/react react-router-dom@5.3.0

In your index.js, Wrap the root component with the FrontEgg component, this is to maintain the integrity of private routes and know the auth state overall. It should be something like below.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: 'https://YOUR_BASE_URL.frontegg.com',
  clientId: 'YOUR_CLiENT_ID’'
};

ReactDOM.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>,
    document.getElementById('root')
);

To obtain your base URL, head to Go live>Add your domain to “Allowed Origin” list where you can see your base URL. For the client ID, click on your profile in the bottom-left corner and click on workspace settings in the expanded menu.

Moving ahead, to check whether a user is authenticated or not, we can use the useAuth hook provided by frontegg. This hook returns the user details (if authenticated) and authenticated state (boolean value). You can conditionally render different information based on the boolean value.

const {user, isAuthenticated} = useAuth()

Below is a sample snippet demonstrating the same:

import './App.css';
import { useEffect } from "react";
import {
  useAuth,
  useLoginWithRedirect
} from "@frontegg/react";
import {ContextHolder} from "@frontegg/rest-api";


function App() {
  const { user, isAuthenticated } = useAuth();

  const loginWithRedirect = useLoginWithRedirect();

  console.log('user - ', user);
  console.log('isAuthenticated - ', isAuthenticated);
  console.log('user - ', user);

  useEffect(() => {
    if (!isAuthenticated) {
      console.log('user is not logged-on. going to loginWithRedirect')
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);

  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
  };

  return (
    <div className="App">
      {isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl} alt={user?.name} />
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => logout()}>Click to logout</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={loginWithRedirect}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;

The useEffect hook redirects the user to sign in if he is not authenticated. You may tweak this to suit your needs, although redirecting users to authenticate is a good idea. The above snippet is taken from the official GitHub repository of Frontegg.

Next, you need to enable hosted login from your Frontegg dashboard. To do that, select “Settings” under Authentication, and click on Manage for Hosted Login. Below is the image depicting the same:

Next, you’ve to toggle the enable switch to enable the hosted login functionality and add “http://localhost:3000/oauth/callback” in the redirected URL input field (given that you are running on localhost).

After making the above-mentioned additions/changes, click on “save” at the bottom to save the changes.

Go Live

The final step is to add the weblink to be allowed under CORS policy.

Click on the “Go live” option present in the top tab and click on "Add your domain" in the populated options. Under the “Domains” section, scroll to the bottom to whitelist your domain in the “Allowed Origins” section. This should prepare the widget to go live.
The hosted widget will look something like this.

And that is it! We have successfully implemented a fully working authentication widget in almost no time without compromising on the design part.

Frontegg is not just an authentication widget but does much more. You can also add user-wise authorization levels to restrict them from performing certain actions. In brief, it is a complete end-to-end solution for user management.

Conclusion

While there are numerous aspects that contribute to a higher conversion rate, the postures described above are among the most essential. A good authentication system, in particular, can improve the onboarding experience while simultaneously saving developers time and allowing them to focus on core functionalities.