Passwordless Signup and Login Forms Using 2FA Phone Number Verification

Purpose

This post shows how you can add passwordless login to your site or app in minutes.

Outcome

View outcome here

Fully Functional Code

Test site for both signup and login forms:

https://get.ringcaptcha.com/king-authr-signup-2/

https://get.ringcaptcha.com/king-authr-login-2/
(Note you must signup on on signup page before being able to test log in page)

JSFiddle for signup form: https://jsfiddle.net/ringcaptcha/Lmyx3e0k/1/

JSFiddle for login form: https://jsfiddle.net/ringcaptcha/q6khsojk/3/

External Resources

JQuery: https://code.jquery.com/jquery-3.1.1.min.js

RingCaptcha JS: https://s3.amazonaws.com/ringcaptcha-test/widget/jwt-20180226-b/bundle.js

General Steps

1. Create app on RingCaptcha
2. Add app keys to your signup and login forms
3. Add signup and login forms to your signup and login pages

1. Create app on RingCaptcha

Sign up for RingCaptcha at https://my.ringcaptcha.com/register

Go to https://my.ringcaptcha.com/apps and click ‘Create App’

Select ‘Web’ as app type. Add the domain name for the website the forms will be on. Click ‘Create App’

Click on the ‘Customize’ icon

Click on the ‘Advanced’ tab and then check the ‘Enable User Management integration’. Then click ‘Save changes’.

You now have your first app key which you will need for Step 2. In order to get your second app key, message the RingCaptcha team through the live chat on their site: https://ringcaptcha.com

Once you get your second app key from RingCaptcha, you are ready to proceed to Step 2.

2. Add app keys to your signup and login forms

Signup Form:

Replace App Key 1 with app key from the RingCaptcha dashboard.

$(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-locale="en" data-mode="signup" data-type="dual"></div>'
    );
    $('#xyz').each(function() {
      var appKey = "App Key 1";
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        signup: function(event, formValues) {
          console.log("Signup: formValues:", formValues);
          window.location.replace('https://get.ringcaptcha.com/king-authr-login-2');
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'email',
          placeholder: 'Email',
          validations: {
            presence: 'Email should be present',
            format: { message: 'Invalid email' }
          }
        },
        {
          id: 'phone',
          type: 'phone',
          validations: {
            length: { min: 5, max: 15, message: 'Invalid phone' }
          }
        }
      ];
      settings.userManagement = true;
      new RingCaptcha.Widget(this, settings.app, settings);
    });
  });

Login form:

Replace App Key 1 with app key from the RingCaptcha dashboard.
Replace App Key 2 with the app key you received from RingCaptcha team on their live chat

$(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-locale="en" data-mode="login" data-type="dual"></div>'
    );

    $('#xyz').each(function() {
      var appKey = 'App Key 1';
      var userManagementAppId = 'App Key 2';
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        login: function(event, formValues) {
        console.log("Login: formValues:", formValues);
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'text'
        },
        {
          id: 'pin', 
          type: 'pin'
        }
      ];
      settings.userManagement = true;
      settings.phoneLogin = true;
      settings.userManagementAppId = userManagementAppId;

      new RingCaptcha.Widget(this, settings.app, settings);
    });
  });

3. Add signup and login forms to your signup and login pages

Add the signup and login code snippets from Step 2 and the following HTML snippets to respective signup and login pages on your website.
<div id='widget-point'> </div>