Phone Login

The Phone Login feature enables customers to register and log in using their phone numbers, enhancing accessibility and simplifying the authentication process. To ensure security, the LoginRadius Identity Platform requires phone number verification via a One-Time Password (OTP) after registration. Login is only permitted once the phone number has been verified.

This feature improves user experience by offering a seamless onboarding process and eliminating the need to remember complex credentials. It also enhances accessibility, allowing customers to authenticate using a convenient and widely available method.

The Phone Login feature can be implemented in two ways:

• With Password: A password is set by the customer during registration and must be provided at login.

• With OTP: If Passwordless Login is enabled, users can log in using a One-Time Password (OTP), ensuring quick and hassle-free access.

A common example could be a mobile wallet app targeting users in regions with low email usage. Many customers in these areas rely primarily on phone numbers rather than email.

With Phone Login using OTP, users can quickly register and access their accounts without needing an email address. This makes onboarding seamless and eliminates the hassle of remembering passwords.

For instance, users who want to send money or pay bills can simply enter their phone number, receive an OTP, and log in instantly. This approach enhances accessibility, security, and user adoption, making the app more convenient for mobile-first users.

Follow the steps below to set up Phone Login.

• Log into the LoginRadius Admin Console.

• Navigate to Authentication > Authentication Configuration section.

• Under Authentication Type, select Phone and click the toggle button to enable phone authentication.

• At this point, the registration form must include the Phone ID field. To add it, refer to the steps below.

  • Log into the LoginRadius Admin Console.

  • Navigate to Branding > Forms section and click on the default form under the Manage Forms section.

  • Select Phone ID from the Standard Fields (under Disabled Fields) and click the Save button once it reflects under Active Fields.

    Note: You can also define the Phone ID field validation rules from our validation rule list or add a custom regex.

This guide provides a step-by-step walkthrough for integrating a secure and seamless phone-based authentication system into your application using LoginRadius. It covers backend integration via SDKs and libraries, front-end customization through REST APIs, and post-login management to enhance the user experience.

Integration via APIs

Following are some of the key APIs that are essential for implementing phone authentication.

1. Phone User Registration by SMS - This API registers the new users into your Cloud Directory and triggers the phone verification process.
2. Phone Login - This API retrieves a copy of the user data based on the Phone.
3. Phone Resend Verification OTP - This API is used to resend a verification OTP to verify a user's Phone Number. The user will receive a verification code that they will need to input.
4. Phone Verification by OTP - This API validates the verification code sent to verify a user's phone number.
5. Phone Forgot Password by OTP - This API sends the OTP to reset the account password.

Integration via V2.js Interface

1. Include LoginRadius JS Library: Directly import the LoginRadius JavaScript interfaces on your page using this link: https://auth.lrcontent.com/v2/js/LoginRadiusV2.js. If you are using HTML, you can directly paste the below script into your HTML file:

   <script src="https://auth.lrcontent.com/v2/js/LoginRadiusV2.js"></script>

2. Add this JavaScript code to initialize the LoginRadiusV2 Object on your website.

   var commonOptions = {};
   commonOptions.apiKey = "<your loginradius API key>";
   commonOptions.appName = "<LoginRadius site name>";
   commonOptions.phoneLogin = True;
   var LRObject = new LoginRadiusV2(commonOptions);

3. Include the following code to load the Phone Login interface in your web application.

   var login_options = {};
   login_options.onSuccess = function (response) {
     //On Success
     console.log(response);
   };
   login_options.onError = function (errors) {
     //On Errors
     console.log(errors);
   };
   login_options.container = "login-container";
   
   LRObject.util.ready(function () {
     LRObject.init("login", login_options);
   });

Integration via SDKs

You can utilize any of the available SDKs to implement phone authentication. As an instance, you can refer to the implementation guide on Phone Authentication APIs available in Node.js SDK. You can use any SDKs provided by LoginRadius based on your requirements for SDK implementation. LoginRadius GitHub Repositories.

• SMS Template Customization

• LoginRadius SDKs

• Passwordless Login