Wednesday, April 16, 2025
HomeWordPress TutorialsHow to Add Login with Phone Number via OTP in WordPress

How to Add Login with Phone Number via OTP in WordPress


Remember when email and password were the only way to log into websites? Times have changed, and now many users expect the convenience of logging in with their phone numbers.

After helping different people set up phone-based login systems on their WordPress sites, I’ve learned which methods work best – and which ones to avoid. I’ve tested everything from premium plugins to custom solutions to find the most reliable options.

In this guide, I’ll share how to add phone number login with OTP verification to your WordPress site. Whether you’re running a small business site or a large membership platform, you’ll find a solution that fits your needs.

Add Login with Phone Number via OTP in WordPress

Why Let WordPress Users Log in With Their Phone Numbers?

Passwords can be a hassle. People forget them, reuse weak ones, or write them down where others can see them. This is not safe, and many people have told me that they wish there were a simpler way to log in to WordPress websites.

Offering a phone number login with a one-time passcode (OTP) makes things easier. It removes the need to remember passwords while keeping user accounts secure.

Here is why you should consider adding phone login to your WordPress site:

  • 🔒 Better Security: Passwords can be hacked or stolen. OTPs change every time, making logins safer.
  • Faster Sign-Ins: No need to type in long passwords. A quick code sent to a phone lets users log in instantly.
  • Fewer Password Resets: Users no longer have to reset forgotten passwords, saving you time and support tickets.
  • 😊 Improved User Experience: A smooth login keeps people happy and more likely to return to your site.
  • 📱 Ideal for Mobile Users: More people browse on their phones. Letting them log in with a code makes the process seamless.

Now, let’s take a look at how to easily allow login with phone number via OTP in WordPress.

How to Add Login with Phone Number via OTP in WordPress

You can easily add a phone number login to WordPress using the free Login with Phone Number plugin.

However, since WordPress does not send SMS messages by default, you will also need a third-party service like Firebase or Twilio to handle OTP delivery. I will show you how to set this all up.

First, you need to install and activate the free Login With Phone Number plugin. For details, see this tutorial on how to install a WordPress plugin.

Upon plugin activation, visit the Login Settings » General page from the WordPress dashboard and check the ‘Enable phone number login’ option.

After that, you can add country codes for all the regions where your users are logging in. By default, the plugin includes the phone number country codes for all countries.

I recommend leaving this setting as it is. It ensures that your site remains accessible to a global audience.

Enable phone loginEnable phone login

Next, you need to check the ‘Enable email login’ option if you want to allow email login for your users.

We recommend this setting if you have existing users who are used to logging in with their email. By doing so, you’ll ensure that they won’t get frustrated once phone number login is enabled, as they’ll still be able to log in using their email.

You can then check the ‘Force to get email after phone number’ option. This setting ensures that new users are required to provide their email address before they can complete registration. It’s especially useful if you already have an email list and want to collect emails from new users.

You can also enable user registration with a phone number. Once that is done, type the length of the activation code that will be given to users.

Choose activation code lengthChoose activation code length

After that, you have to scroll down and find the ‘Enable Timer’ option. Click to enable it, then set the time limit for users to enter the OTP.

For example, if you set it to 60 seconds, users will have one minute to enter their code before it expires. Then, click the ‘Save Changes’ button to store your settings.

Enable timerEnable timer

Go ahead and switch to the ‘Gateway’ tab from the top. Here, you must select an SMS service provider for your phone number OTP login.

I will be choosing Firebase for this tutorial. It’s a Google service that lets you send one-time passcodes to users’ phones for secure login. However, you can also choose options like Twilio, WhatsApp, Alibaba SMS, and more.

Keep in mind that some of the options will only be available in the Pro plan.

Choose an SMS gatewayChoose an SMS gateway

Once you choose Firebase, you will need to add its API key and config.

For this, you need to visit the Firebase Console and select the ‘Create a Firebase Project’ option.

Create a firebase projectCreate a firebase project

This will take you to a new screen, where you must add a project name. You can call it anything that helps you remember what you’re using it for.

Then, click the ‘Continue’ button.

Add a name for your projectAdd a name for your project

Firebase will now ask permission to enable Google Analytics for the project.

Once you have allowed that, you must select ‘Default Account for Firebase’ from the dropdown menu and click the ‘Create Project’ button.

Click the Create Project buttonClick the Create Project button

You will now be taken to the Project Overview page. Here, navigate to the Build » Authentication tab from the left column.

Go ahead and click the ‘Get started’ button.

Click Get Started on the Authentication pageClick Get Started on the Authentication page

Once you do that, some new settings will become visible on the screen. From here, choose ‘Phone’ as the native provider and toggle the ‘Enable’ switch.

This will allow users to sign in with a mobile phone number using Firebase SDK phone verification. Then, click the ‘Save’ button.

Enable the phone option in FirebaseEnable the phone option in Firebase

Now, switch to the ‘Settings’ tab and select the ‘Authorized domains’ option from the left column.

Here, you have to click the ‘Add domain’ button. This will open a prompt where you need to add your website’s domain name.

Click Add Domain buttonClick Add Domain button

After that, just click the settings icon next to Project Overview at the top and select the ‘Project Settings’ tab.

Then, scroll down to the ‘Your Apps’ section and select the web icon.

Click the web iconClick the web icon

You will now need to add a name for your app and click the ‘Register App’ button.

When you do that, Firebase will generate an SDK for you. This stands for Software Development Kit, but it works like an app.

Click the Register App buttonClick the Register App button

From here, simply click the ‘Continue to Console’ button.

Once you are back on the Project Overview page, simply copy the ‘Web API Key’ and store it somewhere safe.

Copy the web API key for FirebaseCopy the web API key for Firebase

Now, scroll down to the ‘Your Apps’ section where details for your newest app will be displayed on the screen.

Here, choose the ‘Config’ radio button to display your Firebase SDK as config. Simply copy and store it somewhere safe.

Copy the Firebase SDK configCopy the Firebase SDK config

After that, you need to head back to your WordPress dashboard and add the Firebase API key and config into their respective fields in the Login with Phone Number plugin settings.

Next, click the ‘Save Changes’ button to store your settings.

Add Firebase API key and  configAdd Firebase API key and  config

Once that is done, open the WordPress page where you want to add the login form and click the ‘Add Block’ button.

From the block menu, you need to choose the ‘Shortcode’ block and add the following shortcode into it:

[idehweb_lwp]

Add phone number login shortcodeAdd phone number login shortcode

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

Now, when new users visit your website, they will be able to register and log in using their phone number, while existing users can still log in with their email.

Phone number login via OTPPhone number login via OTP

Once you’ve set this up, we recommend sending an email to your existing users, encouraging them to add their phone numbers as soon as possible.

They can do this by visiting their profile page in the WordPress dashboard, scrolling down to the ‘Personal Information’ section, adding their phone number, and clicking Update User.

This ensures that even older users can log in with their phone numbers later on.

Existing users adding phone numbersExisting users adding phone numbers

Bonus: Add One-Click Login With Google in WordPress

While logging in with a phone number and OTP is a secure option, some users prefer an even quicker way to access their accounts.

Adding Google one-click login allows users to sign in instantly without typing in a phone number or waiting for an OTP. Bypassing the WordPress login form like this can improve the user experience, reduce login friction, and increase signups.

It is especially useful for sites with frequent visitors, such as membership platforms, online stores, or communities.

Google Login PreviewGoogle Login Preview

You can easily add this feature using the Nextend Social Login plugin. It lets users log in with their Google account and even supports Facebook and Twitter logins.

Nextend also allows you to link social profiles to existing accounts, so returning users do not create duplicates.

Adding social login to your WordPress websiteAdding social login to your WordPress website

To get started, just see our tutorial on how to add one-click login with Google in WordPress.

I hope this article helped you learn how to add login with phone number via OTP in WordPress. You may also want to see our beginner’s guide on how to remove the password reset/change option from WordPress and our tutorial on creating a WordPress login popup modal.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

RELATED ARTICLES
Continue to the category

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Most Popular

Recent Comments