Forem: Jai

Best way to store phone numbers in your app

Jai — Fri, 20 Dec 2024 08:27:39 +0000

When storing phone numbers in the backend, it’s crucial to consider efficiency, standardization, validation, and internationalization. The best way to store phone numbers often depends on your application’s needs (e.g., international support, validation rules, format requirements).

Option 1: Storing the complete phone number with country code

This approach stores the full phone number, including the country code, in international E.164 format (which is the internationally recognized phone number format).

Why E.164 Format?

Standardization: E.164 is a globally accepted phone number format that ensures uniqueness. It includes the country code and removes any formatting characters (like spaces, hyphens, or parentheses), leaving only digits.
Consistency: By storing phone numbers in E.164 format, you avoid inconsistencies in formatting across different users and systems.
Validation: You can easily validate phone numbers using libraries such as libphonenumber (used by Google) to verify that the phone number is well-formed and valid for a specific country.

E.164 Format Example:

US: +18005555555
UK: +442079460958
India: +919167988354

How to Store:

Database Schema: Store the phone number as a single string field in E.164 format.
Field type: String or VARCHAR (depending on the database).
Example: VARCHAR(15) (E.164 allows a maximum of 15 digits).

Advantages:

Internationalization: It supports all global numbers, making your system easily adaptable to any country.
Simplified Logic: Since phone numbers are stored in a uniform format, you don’t need to deal with variations in format, validation, or extraction of country code.
No Redundant Data: You store one canonical format, reducing the risk of redundancy or inconsistent data.

Disadvantages:

User Experience: Users must input the full phone number with the country code, which may not be ideal for all use cases (e.g., local number-only input).

CREATE TABLE users (
  id INT PRIMARY KEY,
  phone_number VARCHAR(15) NOT NULL
);

Option 2: Storing phone number with separate country code

In this approach, you split the phone number into two fields: one for the country code and one for the local number. This allows more flexibility for localized formatting and may be preferable if your application requires different phone number behaviors by region (e.g., validation rules, format display).

CREATE TABLE users (
  id INT PRIMARY KEY,
  country_code VARCHAR(5) NOT NULL,
  local_number VARCHAR(20) NOT NULL
);

Advantages:

Localized input.
Easy formatting
Simplified parsing.

Disadvantages:

More Complex Logic: You may need extra logic for managing the country code and local number separately, particularly for validation or when reconstructing the number for display.
Potential Redundancy: If the user changes country codes or phone numbers frequently, you may run into issues with redundancy, especially when working with multiple entries across different systems.

Example of Best Practice (E.164):

Here’s a full example of handling phone numbers with E.164 format and libphonenumber for validation in Node.js:

Install libphonenumber:

npm install google-libphonenumber

Example Code (Node.js/Express):

const { PhoneNumberUtil, PhoneNumberFormat } = require('google-libphonenumber');
const phoneUtil = PhoneNumberUtil.getInstance();

const validatePhoneNumber = (phoneNumber, countryCode) => {
  try {
    const number = phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
    const isValid = phoneUtil.isValidNumber(number);
    const formattedNumber = phoneUtil.format(number, PhoneNumberFormat.E164);

    return {
      isValid,
      formattedNumber
    };
  } catch (error) {
    return { isValid: false, error: 'Invalid phone number' };
  }
};

// Example usage
const { isValid, formattedNumber } = validatePhoneNumber('800-555-5555', 'US');
console.log(isValid, formattedNumber);  // true, +18005555555

Retrieve country code from a phone number

To retrieve the country code (like US for United States) from a phone number using this library, you can use the getRegionCodeForNumber function. This function takes a phone number (which must be parsed using parseAndKeepRawInput or similar) and returns the country code in the ISO 3166-1 alpha-2 format (e.g., IN, US, GB, etc.).

Working example -

const { PhoneNumberUtil } = require('google-libphonenumber');
const phoneUtil = PhoneNumberUtil.getInstance();

// Function to get country code (ISO 3166-1 alpha-2)
const getCountryCodeFromPhoneNumber = (phoneNumber) => {
  try {
    // Parse the phone number and get the region (country code)
    const number = phoneUtil.parseAndKeepRawInput(phoneNumber);
    const countryCode = phoneUtil.getRegionCodeForNumber(number);
    return countryCode;
  } catch (error) {
    console.error("Error parsing phone number:", error);
    return null;
  }
};

// Test with different phone numbers
const testPhoneNumbers = [
  "+919167988354", // India
  "+14155552671",  // USA
  "+447777123456", // UK
  "+81 90 1234 5678", // Japan
];

testPhoneNumbers.forEach((phoneNumber) => {
  const countryCode = getCountryCodeFromPhoneNumber(phoneNumber);
  console.log(`Phone number: ${phoneNumber}, Country Code: ${countryCode}`);
});

Explanation:

parseAndKeepRawInput(phoneNumber):
This method is used to parse the phone number and keep the raw input, meaning it can handle input in various formats (e.g., with spaces, dashes, or parentheses).
getRegionCodeForNumber(number):
This function returns the country code (ISO 3166-1 alpha-2 code, such as IN, US, GB, etc.) associated with the parsed phone number.
It does this by matching the number against its internal list of country-specific phone number patterns.

Expected Output

Phone number: +919167988354, Country Code: IN
Phone number: +14155552671, Country Code: US
Phone number: +447777123456, Country Code: GB
Phone number: +819012345678, Country Code: JP

Important Considerations:

The phone number must be parsed correctly, and it should include the country code (+ followed by digits). If the phone number is in local format (without the country code), you will need to specify the default region (country) while parsing.
Default region: If the phone number doesn't contain a country code, you can provide a default country code using the parse method (e.g., phoneUtil.parse(phoneNumber, 'IN') for India).

Conclusion:

E.164 format is generally the best option for storing phone numbers in the backend because it’s universally recognized and simplifies validation and storage.
Storing the country code and local number separately can be useful in localized systems but adds complexity.
Use tools like libphonenumber to handle phone number validation, formatting, and parsing efficiently.

Google reCAPTCHA v3 with React & Node.js without any dependency

Jai — Wed, 04 Dec 2024 11:58:59 +0000

Google reCAPTCHA is a powerful tool for protecting your web applications from spam and abuse. It works by distinguishing between human and bot traffic. reCAPTCHA v3, unlike its predecessors, doesn't require the user to complete challenges such as checking boxes or identifying objects in images. Instead, it runs in the background and assigns a score based on how likely the user is a bot. This is particularly useful for providing a seamless user experience, especially for applications built with modern JavaScript frameworks like Next.js.

Goal of this article -

Implementing invisible reCAPTCHA for better user experience.
No external dependencies required.
Only load scripts for pages that require reCAPTCHA functionality and perform cleanup when not required.
Reusable backend middleware to verify captcha token in any route.

Prerequisites

Basic knowledge of React and Next.js.
Node.js and npm/yarn installed. For this article we will be using Next.js for frontend and Node.js with express framework for backend.
A Google reCAPTCHA v3 site key and secret key.

Step 1: Get Your Google reCAPTCHA Keys

Before we dive into the code, you'll need to create a Google reCAPTCHA project and get your site key and secret key.

Go to the Google reCAPTCHA Admin Console.
Click on + to create a new reCAPTCHA.
Select reCAPTCHA v3 as the version.
Add your domain(s) in the "Domains" section.
Once you register your site, you'll be given a Site Key and a Secret Key.

Step 2: Add Environment

For our Next.js project, we need to add an environment variable for google reCAPTCHA site key :

NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY='<your-site-key>'

Step 3: Create the reCAPTCHA Component and helper function.

Next, let's create a reusable React component to handle the reCAPTCHA validation on the client-side.

We will take example of reset password page where email and reCAPTCHA validation is required.

Create a file called ReCaptchaWrapper.js inside the components folder, but before that let us define a state to check if required reCaptcha scripts are loaded successfully.

// store/auth.js
import { atom } from 'jotai'; //for state management
export const isRecaptchaLibLoadedAtom = atom(false);

// components/ReCaptchaWrapper.js
import { useEffect } from 'react';
import { useSetAtom } from 'jotai';
import { isRecaptchaLibLoadedAtom } from '@/store/auth';

export function ReCaptchaWrapper({ children }) {
  const setIsRecaptchaLibLoaded = useSetAtom(isRecaptchaLibLoadedAtom);

  useEffect(() => {
    const loadRecaptchaScript = () => {
      const script = document.createElement('script');
      script.src = `https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY}`;
      script.async = true;
      script.onload = () => {
        setIsRecaptchaLibLoaded(true);
      };
      document.body.appendChild(script);
    };

    loadRecaptchaScript();

    //cleanup
    return () => {
      const script = document.querySelector(
        `script[src="https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY}"]`
      );
      if (script) document.body.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

// utils/formUtils.js

export function getCaptchaToken(actionName) {
  return new Promise((resolve, reject) => {
    window.grecaptcha.ready(() => {
      window.grecaptcha
        .execute(process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY, { action: actionName })
        .then(resolve)
        .catch(reject);
    });
  });
}

Explanation:

ReCaptchaWrapper: This components acts as a provider for pages which require reCAPTCHA functionality. It gives us access to the getCaptchaToken function, which we use to trigger reCAPTCHA verification on the client-side.
getCaptchaToken: This function triggers the reCAPTCHA verification for a given action. When called, it will return a reCAPTCHA token that will be sent to the server to validate.

Step 4: Integrate reCAPTCHA into Your Form

Now that we have the reCAPTCHA component ready, let's integrate it into a reset-password form. We'll create a form where users can submit a message. After the user clicks the submit button, we'll validate the reCAPTCHA token.

Here's an example of a simple contact form using reCAPTCHA:

// pages/reset-password.js
import { Formik, Form, Field } from "formik";
import ReCaptchaWrapper from "@/components/ReCaptchaWrapper";
import { Button } from "@/components/Button";
import { getCaptchaToken } from "@/utils/formUtils"; //helper function
//to make sure if scripts are loaded
import { isRecaptchaLibLoadedAtom } from "@/store/auth";
import { useAtomValue } from "jotai";

const ResetPasswordPage = () => {
  const isRecaptchaLibLoaded = useAtomValue(isRecaptchaLibLoadedAtom);

  return (
    <ReCaptchaWrapper>
      <Formik
        onSubmit={async () => {
          if (!isRecaptchaLibLoaded) {
            console.error("reCAPTCHA is not ready");
            return;
          }
          const token = await getCaptchaToken("reset-password");

          //submit token along with email via POST method to backend
          //to verify captcha token
        }}
      >
        {({ isSubmitting, handleChange }) => (
          <Form className="space-y-8">
            <Field name="email">
              {({ field }) => (
                <input
                  {...field}
                  autoComplete="email"
                  onChange={(e) => {
                    handleChange(e);
                  }}
                  placeholder="Your email address"
                />
              )}
            </Field>
            <Button type="submit" disabled={isSubmitting}>
              Reset Password
            </Button>
          </Form>
        )}
      </Formik>
    </ReCaptchaWrapper>
  );
};

export default ResetPasswordPage;

Step 5: Verify reCAPTCHA Token on the Server

On the server-side, we need to verify the reCAPTCHA token to ensure it is valid. To do this, we'll create an middleware in Node.js (Express application) + Typescript that sends the token to Google's verification endpoint.

//middleware/recaptcha.ts
import axios, { AxiosRequestConfig } from "axios"; //axios: "^0.21.4"

const SECRET_KEY = "YOUR_GOOGLE_RECAPTCHA_SECRET_KEY"; // load it from dotenv

const verifyRecaptcha = async (token) => {
  const requestConfig = {
    method: "POST",
    url: "https://www.google.com/recaptcha/api/siteverify",
    params: {
      secret: SECRET_KEY,
      response: token,
    },
  };

  const response = await axios(requestConfig as AxiosRequestConfig);
  return response.data;
};

// add this middleware to route
export const verifyRecaptchaToken = async (req, res, next) => {
  const response = await verifyRecaptcha(req.body.recaptchaToken);
  const { success } = response;
  if (success) {
    next();
  } else {
    // throw new Error('Unauthorized', 400);
  }
};

//Example: add middleware to route
router.post(
  '/reset-password',
  verifyRecaptchaToken,
  async (req, res) => {
    //...
  }
);

Explanation:

verifyRecaptcha: This function sends the reCAPTCHA token to Google's verification API, passing the secret key and token. It returns true if the token is valid.
If the reCAPTCHA verification fails, we send a error response. Otherwise, we proceed with handling the form data.

Step 6: Remove reCAPTCHA badge after verification is done

To save your time, use this utility function to remove reCaptcha badge when not needed.

function removeBadge() {
  const badge = document.querySelector(".grecaptcha-badge");
  if (badge) {
    badge.remove(); // Remove the badge element from the DOM
  }
}

//Add this to components/RecaptchaWrapper useEffect, after the script is unloaded
setTimeout(removeBadge, 2000);

Step 7: Test the Integration

Now, you can test the integration! When you submit the form, Google's reCAPTCHA will be triggered in the background. The token will be sent to your server for verification, and only if the token is valid will the form be processed.

If reCAPTCHA fails (for example, if it's a bot), the user will see an error message.

Conclusion

By integrating Google reCAPTCHA v3 with Next.js & Node.js, you can effectively prevent spam and abuse while providing a smooth, seamless user experience. If you found any value, do consider liking this post.