Many developers are pivoting from standard editors to Cursor AI, a powerful fork of VS Code. However, left to its own devices, AI code completion often mixes modern React with outdated 2019 patterns, uses inefficient inline styling, and defaults to bad habits like using array indices as unique keys.

You do not need to clean up after the AI manually. By using Cursor's native rule configuration files (.mdc), you can establish architectural guardrails that force the AI to write pristine code on its first try. No extra npm packages are required.

The Recipe Configuration

To get started, create a new folder path in your project root at .cursor/rules/ and name the file react-modern.mdc. Copy and paste the configuration code block below exactly as written:

---
description: Rules for generating modern and clean React.js components
globs: src/**/*.js, src/**/*.jsx, components/**/*.jsx, app/**/*.jsx
---

# Modern React.js Rules
- **Functional Only:** Never generate class components. Use clean arrow functions (`const Component = () => {}`).
- **Export Pattern:** Use explicit named exports instead of default exports to ensure seamless IDE auto-imports.
- **Props Destructuring:** Always destructure props directly inside the component function signature.
- **Keys in Arrays:** Always provide a stable, unique item identifier (`item.id`) as the key prop when mapping arrays. Never default to the array index.
- **Styling:** Avoid inline `style={{}}` attributes. Use utility-first classes (like Tailwind CSS) or semantic layout patterns.

Why it Matters: Before vs After

When you save this .mdc file, Cursor automatically scans your workspace workspace and updates its system prompts for your target files. Here is a direct look at how this changes the output quality:

Before Applying the Rule (Standard AI Output)

Without instructions, LLMs often default to generic, unoptimized code styles:

import React from 'react';

export default function Dashboard(props) {
    const user = props.user;
    return (
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        <h1>Welcome, {user.name}</h1>
          <ul>
            {user.items.map((item, index) => (
              <li key={index}>{item.name}</li>
            ))}
          </ul>
      </div>
    );
}

After Applying the Rule (Cursor AI Output)

With your new recipe rule file active in the folder background, the AI naturally adheres to clean architectural principles:

import React from 'react';

export const Dashboard = ({ user }) => {
  const { name, items } = user;
  return (
    <div className="p-5 border border-gray-200 rounded-lg">
      <h1 className="text-xl font-bold">Welcome, {name}</h1>
      <ul className="mt-4 space-y-2">
        {items.map((item) => (
          <li key={item.id} className="text-gray-700">
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

How This Works Under the Hood

The secret lies in the .mdc header block:

• globs: Tells Cursor exactly which folders and extensions to monitor.
• Zero Overhead: This runs entirely inside Cursor's internal token context. It does not impact your application bundle size, production speeds, or local development environments.

Drop this file into your workspace and watch your AI coding velocity instantly double with cleaner results.

References:

To learn more about optimizing your AI workflows or to explore deeper React patterns, check out these excellent resources:

• Official Configuration Guide: Read the Cursor Rules Documentation to understand exactly how the .mdc file structure matches your project files.
• Community Rule Marketplace: If you want inspiration for more specific development setups, browse through community-curated templates on the official Cursor Directory.
• The "Token Tax" Problem: For an in-depth breakdown of why moving to modular .mdc files saves massive API costs compared to legacy .cursorrules files, read the complete guide by the Vibe Coding Academy.
• React Implementation Challenges: For a humorous but highly practical look at the common bugs LLMs make without proper guidance, read 10 React Rules Cursor Loves to Ignore on Medium.

Stack

React, Typescript, SASS, Apollo-client, CRA (create-react-app)

Why Upgrade Node.js First?

Upgrading Node.js first ensures compatibility with other dependencies. If dependencies are upgraded prior to the Node.js upgrade, potential conflicts could arise, requiring additional fixes later.

Steps Taken

1. Node.js Upgrade

• Upgraded Node.js to v20.9.0 LTS from v16.16.0.
• Removed node_modules and reinstalled dependencies after the upgrade.
• Kept npm version at 9.6.5 as npm@11.0.0 requires a Node.js version higher than v20 LTS.

2. Workaround for Initial Issues

• Resolved Node.js ERR_OSSL_EVP_UNSUPPORTED using in windows:

  set NODE_OPTIONS=--openssl-legacy-provider
  

For Linux or Mac users can use export keyword instead of set before start start the app. However, avoided this workaround by updating dependencies.

3. Dependency Updates

Ran the following command to address dependency issues:

npm audit fix --dev

Once the command executed, multiple dependencies updated along with react-scripts which was v4.0.3, now it is ^5.0.1. Changed multiple codes related to my listed dependencies in package.json, this will be different in case of your application.

Errors and Fixes

1. Warning on Startup:

   One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time.
   
   babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.
   

   • Fix: Added @babel/plugin-proposal-private-property-in-object to devDependencies.
   • Result: Warning resolved.

2. SVG Style Issue And Redundant Code:

   • Removed unsupported styles (/**/) in gba_gray.svg.
   • Removed unnecessary return statements. earlier these was not throwing any error.

3. TinyMCE Plugin Errors:

   • Errors for plugins: "hr", "spellchecker", "template", "print", "paste", as the package has upgraded after npm audit fix command.
   • Fix: Removed explicit imports from the file the editor has initialised, in my case it was in file WYSIWYGEditor/index.tsx.
   • Reference: TinyMCE Docs

4. SCSS Warnings / SASS Path Configuration:

   • Added environment variables:

      REACT_APP_SASS_PATH=./src/styles
      SASS_PATH=./src/styles
     

   • Replaced relative paths in 265 SCSS files, which was quite easy as it appearing in terminal directly in warning message, what we need to do.

      @import 'includes';
     

     With:

      @import 'src/styles/includes';
     

5. Buffer Issue / Polyfill Issue:

   • Imported Buffer explicitly after installation due to react-scripts v5 doesn't support some core modules. listed other important dependencies for polyfills for you it may help.

     "buffer": "npm:buffer@^6.0.3",
     "crypto": "npm:crypto-browserify@^3.12.0",
     "http": "npm:stream-http@^3.2.0",
     "https": "npm:https-browserify@^1.0.0",
     "stream": "npm:stream-browserify@^3.0.0",
     "util": "npm:util@^0.12.5",
     "zlib": "npm:browserify-zlib@^0.2.0"
   

6. ESLint Rule Update:

   • Added rule in .eslintrc.js:

     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off'
     

   • Updated the multiple pacakages related to eslint/prettier as react-scripts 5 includes eslint under the hood and to utilize in-built eslint and also to get rid of below issue:

       ERROR in [eslint] Failed to load config "prettier" to extend from.
       Referenced from: C:\Users\path\to\.eslintrc.js
     

     Removed:

     • eslint-config-standard: ^16.0.3
     • eslint-plugin-import: ^2.23.4
     • eslint-plugin-promise: ^5.1.0
     • eslint-plugin-react: ^7.24.0

     Updated:

     • prettier: 2.1.1 to ^3.0.3
     • eslint-plugin-prettier: 3.3.0 to ^5.2.2 // Enforced using resolution/override
     • eslint-config-prettier: ^8.3.0 to ^10.0.1 // Added in devDependencies
     • pretty-quick: ^3.1.1 to ^4.0.0 // Added in devDependencies
     • @typescript-eslint/eslint-plugin: 4.28.3 to ^5.6.0 // Added in devDependencies
     • @typescript-eslint/parser: 4.28.3 to ^5.6.0 // Added in devDependencies

       // package.json (Included)
       "resolutions": {
         "eslint": "^8.3.0",
         "eslint-plugin-prettier": "^5.2.2",
         "prettier": "^3.0.3"
       }
     
       // .eslintrc.js
       extends: [ 'eslint:recommended' ],  // Added along with other existing value
       plugins: ['react-hooks'],           // Added along with other existing value
     

7. Replaced mime-types with mime:

   • The mime-types is not getting updates, ref: Mime types docs, as it throwing error due to one of core module not existing and it also saves to add @types/mime-types explicitly.
   • Reference: Mime-Types Issue.

8. Optional Chaining in Environment Variables:

   • Fixed process?.env?.REACT_APP_MA_BASE_DEAL to process.env.REACT_APP_MA_BASE_DEAL, we should avoid optional channing while using environment variable.
   • Reference: Create React App Issue.

9. Enforced Specific Package Version:

   • To resolve white screen issue, Added overrides in package.json for react-error-overlay, some dependent packages using different version so here we need to enforce while writing in package.json:

     "overrides": {
       "react-error-overlay": "6.0.9"
     }
     

   if you're using yarn, need to pass same object with "resolutions" instead of "overrides".

10. React-Refresh Issue:

    • Added FAST_REFRESH=false in .env to resolve intermittent blank-page issue.

      > Uncaught RangeError: Maximum call stack size      at react-refresh-runtime.development.js
       exeeded.
          at WeakMap.get(<anonymous>)
          at computeFullKey (react-refresh-devel...js)
          at ...
      

11. Engine Specification:

    • Added the following in package.json:

      "engine": {
        "node": ">=20.9.0"
      }
      

12. Webpack Deprecation Warning:

    • Warning:

        [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DecprecationWarning: 'OnAfterSetupMiddleWare', 'onBeforeSetupMiddleware',... Please use the 'setupMiddlewares' option...
      

      As of now fixing this issue. the two solutions found in internet, both we cannot apply in current project as it not recommended way, one is talking about file changes inside node_modules as below:

      // react-scripts\config\webpackDevServer.config.js
      setupMiddlewares: (middlewares, devServer) => {
        if (!devServer) {
          throw new Error('webpack-dev-server is not defined')
        }
        if (fs.existsSync(paths.proxySetup)) {
          require(paths.proxySetup)(devServer.app)
        }
        middlewares.push(
          evalSourceMapMiddleware(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorkerMiddleware(paths.publicUrlOrPath)
        )
      return middlewares;
      }
      

      Second solution talks about ejecting packages. one additional way we can fix above warning is after modify webpack configs and can also add polyfills, using react-app-rewired or craco both works fine we can include node-polyfill-webpack-plugin we can refer below links in future if we need it. Not using it as of now.

      • Polyfill Node Modules,
      • StackOverflow Reference 1
      • StackOverflow Reference 2
      • StackOverflow Reference 3.

1. Create a React Application

Use Create React App to set up your project:

npx create-react-app your-component-name

2. Add Development Dependencies

Install Babel CLI and the React preset:

npm install --save-dev @babel/cli @babel/preset-react

Or, if using yarn:

yarn add --dev @babel/cli @babel/preset-react

3. Configure Babel

Add the Babel React preset to your package.json:

"babel": {
  "presets": [
    "@babel/preset-react"
  ]
}

4. Set Package Visibility

Change the private field in package.json to false:

"private": false

5. Add Build Script

Include a script to transpile your component and copy it to the dist directory. Add the following to the scripts section of your package.json:

For Windows:

"publish:npm": "rmdir /s /q dist && mkdir dist && babel .\src\component -d dist --copy-files"

For Linux:

"publish:npm": "rm -rf dist && mkdir dist && babel src/component -d dist --copy-files"

6. Create Your Component

Inside the src directory, create a folder named component (or any name you prefer) and add your component file, e.g., index.js:

import React from 'react';

function ReusableComponent() {
  return (
    <div>
      Hello, World!
    </div>
  );
}

export default ReusableComponent;

7. Specify the Entry Point

In package.json, set the main field to point to your compiled component:

"main": "./dist/index.js"

8. Define Peer Dependencies

Move React-related dependencies to peerDependencies in package.json to avoid duplication in projects that install your component:

"peerDependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

9. Build Your Component

Run the build script to generate the dist directory:

npm run publish:npm

Or, if using yarn:

yarn publish:npm

10. Publish to npm

Ensure you're logged in to npm and publish your package:

npm login
npm publish

Remember to update the version number in package.json before each publish.

By following these steps, you can share your React components via npm for reuse in other projects.

Published NPM React Component

The Temporal Dead Zone (TDZ) is a specific time between whenever we declare any variable using let keyword and initializing declared variable a value, the time span between these two events known to be as temporal dead zone, whenever we try to use variable in between temporal dead zone state, we get Reference Error because it will be always unreachable for the particular time being till it gets initialized.

console.log(num);

let num = 10;

In memory creation phase of the num will be hoisted inside the special memory area of Javascript engine, and in the second phase or code execution phase if engine try to execute above code value of num will be unreachable because the initialization happens in second line. so the line number 1st will give us an Reference Error.

Why TDZ not with const and var?

Because of hoisting we can access any variable created using var even before it gets declared, and we get an special value as undefined because it attached to global object.

It doesn't mean variable created with const and let are not hoisted but in the case of const the initialization must be in the same line while declaring the variable.

References:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Here you can understand better, there are number of prototype objects in JavaScript (eg: Array.prototype, Function.prototype, Object.prototype etc.). So whenever we create any array, function or object JavaScript engine internally attaches the prototype template's properties and methods into your newly created object. that is why we can access in-built functionality of certain objects like when we create any array we get method like push, map, similarly for functions we get call, apply and bind and for objects we get toString, hasOwnProperty and etc.

In JavaScript everything is object, and every object has a property as __proto__, in this property you can see all properties and methods that acquired from another object or template object.

let object = {};

console.log(object.__proto__);

// constructor: ƒ Object()
// hasOwnProperty: ƒ hasOwnProperty()
// isPrototypeOf: ƒ isPrototypeOf()
// propertyIsEnumerable: ƒ propertyIsEnumerable()
// toLocaleString: ƒ toLocaleString()
// toString: ƒ toString()
// valueOf: ƒ valueOf()
// __defineGetter__: ƒ __defineGetter__()
// __defineSetter__: ƒ __defineSetter__()
// __lookupGetter__: ƒ __lookupGetter__()
// __lookupSetter__: ƒ __lookupSetter__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

The output you are seeing here will be the same as Object.prototype.

What is __proto__?

The __proto__ attribute used to assign the properties and methods from prototype template. Whenver we want to inherit propeties and methods from prototype template we can just assign it into child's __proto__ attribute, You can directly understand this field by below example:

const human = {
  teeth: 32,
};

const john = {
  __proto__: human,
  leg: 2,
};

console.log(john.teeth);
// 32

So, here in the above example we've created a human object and it have a field as teeth with value 32, and we've also created another object as john, and it have 2 fields first is field leg and it have value as 2, but here we want to inherit properties from human object in john object, so we've just assigned human into john's __proto__.

Let's see how it printing the value.. whenever we access john.teeth, javascript engine will try to find the teeth field inside john object and when it didn't find, it will go to john's __proto__ and if teeth available, it will print the value.

So whenver the finding goes on various level, known to be as Prototypical Chain.

We've already seen the example, how to use the prototype property, how can we make available other properties and methods for newly created objects in the article Polyfill for bind()-step-by-step.

References:

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

If you coming from another programming language background like C, C++, or Java you will probably say No, but in the case of JavaScript, you can definitely access those variables and functions because of Hoisting.

When you use variables and functions before declaration without getting any error known to be as Hoisting. See below:

    greet() // Hello World!

    function greet() {
        console.log('Hello, World!')
    }

Similarly for variables

    console.log(name) // undefined

    var name = 'John Doe'

Or

    name = 'John Doe';
    console.log(name); //John Doe
    var name;

Yes! In the case of functions, it executing what should be executed, but for variables, it printing a special value undefined.

Maybe you're thinking it will show any variable which is written or not written in the current script but when you see below, We're trying to use a variable that is nowhere defined in our script, it's actually throwing an error:

    console.log(noWhereDefinedVar) // ReferenceError: noWhereDefinedVar is not defined

Actually, it's happening because of JavaScript's execution behavior, whenever we start the execution of the current script or current function is executed in two phases first is the Memory Creation Phase, and another one is the Code Execution Phase.

So, in the Memory Creation Phase means before execution of code, memory allocated for all the variables and for the functions. The variables get special value i.e. undefined and functions literally copied in its allocated memory space and whenever Memory Creation Phase completed then only execution starts.

What happens in the case of let and const?

The let and const also hoisted, but it behaves differently, we cannot use variable declared with let and const before initialization, cause let or const have a block level scope it is created in special memory space, example with let:

    num = 1; // initialization.

    let num;
    // Throws ReferenceError: Cannot access 'a' before initialization

Example with const:

    NUM = 1; // initialization.

    const NUM;
    // Throws SyntaxError: Missing initializer in const declaration

Best Practices:

• Use let/const over var. try to use these in priority is like const > let > var.
• Declare variable always on the top of the script/function, Try to avoid the use of variables before initialization.

Practice with the below code and answer me what will be the answer:

    sayHello()

    var sayHello = function greet() { 
        console.log('Hello, World!')
    }

References:

• https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
• https://en.wikipedia.org/wiki/JavaScript_syntax

For example, Given a function with 3 parameters, The curried version will take one argument and returns a function that takes the next argument, which return a function that takes the third argument. The last function returns the result of applying function to all of the arguments. we can do it for more or fewer parameters.

To see the benefit of currying we are going to write an example that is useful for logging, for now we're going to only console.log, you can further implement it for actual loggings like in server, or in any log file.

    function log (date) {
        return function (mode) {
            return function (message) {
                console.log(`[${date.getHours()}:${date.getMinutes()}] [${mode}] ${message}`)
            }
        }
    }

We can make it call like this

    log(new Date())("DEBUG")("some debug")
    // [HH:mm] [DEBUG] some debug

logNow() will be the partial of log with fixed first argument

    let logNow = log(new Date())

We can use it as

    logNow("INFO")("message")
    // [HH:mm] [INFO] message

Or

    let debugNow = logNow("DEBUG")

    debugNow("message")
    // [HH:mm] [DEBUG] message

See, we can easily generate a partial function for today's log when called with one argument (like log(date)) or two arguments (like logNow(mode)(message)).

The logNow function takes one arguement, and then returns a partial application of itself with date fixed in the Closure scope.

A Closure is a function bundled with its lexical scope. The Closures created at runtime while function creation.

Let's see another simple and beautiful example of currying using bind() method. we're going define a method which will add two numbers.

    function add (a, b) {
        console.log(a + b)
    }

Now we're going to create an increment method by using bind(), means any number we pass and it will increment it by 1.

    let increment = add.bind(this, 1)
    increment(5)
    // 6

See we didn’t lose anything after currying: add is still callable normally.

Similarly we can specialize number of method using currying, The method below will increment any number by 10.

    add.bind(this, 10)(5)
    // 15

References:

• https://en.wikipedia.org/wiki/Currying
• https://javascript.info/currying-partials
• https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983

first of all, you need to see the bind() method, and how it works. look at the snippet below:

    let name = {
        firstName: "John",
        lastName: "Doe"
    }

    function printFullName () {
        console.log(this.firstName + ' ' + this.lastName)
    }

    let printName = printFullName.bind(name)
    printName()
    // John Doe

If you need to create your own bind() method, you've to breakdown the above-mentioned snippet.

First, you need to make it available for all the method so we're going to take help from the prototype of Function, The snippet will be like:

    Function.prototype.polyfill_bind = function () {
        //...
    }

The polyfill_bind() is a user-defined function you can name anything you want and, now it will be available for any function you define in your code like other functions toString(), toLocaleString(), etc.

And now we're able to make a call similar to the original bind() method:

    printFullName.polyfill_bind(name)

Wait it is not completed yet! need to implement logic so it can work exactly like the bind() method. As we know the bind() method returns a method after creating a new copy of the original method so we make a function call later so we need to return a function whenever we make a call to our polyfill_bind().

    Function.prototype.polyfill_bind = function () {
        return function () {
            // ...
        }
    }

    let showName = printFullName.polyfill_bind(name);
    showName();

We have created the basic skeleton for our polyfill_bind() but, still we haven't implemented actual logic on how bind() works. So first we need to manage the function call we're trying to bind with the particular object.

    Function.prototype.polyfill_bind = function () {
        let context = this;
        return function () {
            context.call(/* Need to pass arguments */)
        }
    }

As we know, the first argument for the bind() method is always an object for which the callee bind to be and it can be any number of argument so we can take it as Rest parameter or varargs, then the above can be written as:

    Function.prototype.polyfill_bind = function (...args) {
        let context = this;
        return function () {
            context.call(args[0])
        }
    }

We're almost there, we also need to take care of other arguments that can be passed with our polyfill_bind() and the method which copied using the polyfill_bind() method, and it can be any number of arguments so I'm converting it to apply() cause it is similar to call() method but it takes an array as in argument:

    Function.prototype.polyfill_bind = function (...args) {
        let context = this;
        let params = args.slice(1)
        return function (...args2) {
            context.apply(args[0], [...params, ...args2] )
        }
    }

Don't confuse here, we're using Spread operator or the three-dot notation to concat two arrays here. The first array is param, we sliced out the first element from it, and the second array is args2, which we're taking as the argument from the method, i.e. showName(value1, value2, …valueN).

Or we can make it with call() method version by replacing line context.apply(args[0], [...params, ...args2] ) with:

    context.call(args[0], ...params, ...args2)

So the full implementation of our polyfill for bind() is which works exactly like the bind() method:

    let name = {
        firstName: "John",
        lastName: "Doe"
    }

    function printFullName (city, country) {
        console.log(this.firstName + ' ' + this.lastName + ' from ' + city + ', ' + country)
    }

    Function.prototype.polyfill_bind = function (...args) {
        let context = this;
        let params = args.slice(1)
        return function (...args2) {
            context.apply(args[0], [...params, ...args2] )
            // Or
            // context.call(args[0], ...params, ...args2)
        }
    }

    let showName = printFullName.polyfill_bind(name, 'Jabari village')
    showName('Wakanda');

    // Output: John Doe from Jabari village, Wakanda

References:

• Function.prototype.apply()
• Function.prototype.bind()
• Function.prototype.call()

Read on Medium

Let's see this in example:

    const name = {
        firstName: 'John',
        lastName: 'Doe',
        showFullName: function() {
                console.log(this.firstName + ' ' + this.lastName);
        }
    };

Try to execute showFullName() method

    name.showFullName()

The outpout will be

    John Doe

Calling the showFullName() method with the name object, so the this keyword refers to the name object.

Let’s assign the name object's showFullName() method to any identifier to use it without the name object.

    const printName = name.showFullName
    printName()

So if we execute the above-mentioned code, the output:

    undefined undefined

Shocked! Why this happening?

Here, we are storing a reference of name.showFullName() to printName variable. After that, we are calling it without an object reference, so this will now refer to the window (global) object or undefined (in strict mode).

Similarly, other examples are:

    function DemoFunction() {
        console.log(this);
    }
    // Constructor invocation
    new DemoFunction(); // logs an instance of DemoFunction

    const demoObject = {
        demoMethod() {
            console.log(this);
        }
    };
    // Method invocation
    demoObject.demoMethod(); // logs demoObject

    function demoFunction() {
        console.log(this);
    }
    // Simple invocation
    demoFunction(); // logs global object (window)

So, The apply(), bind() and, call() is saviour here. Here the value of this equals to the first argument.

Now we define another name object as name2:

    let name2 = {
        firstName: "Bharat",
        lastName: "Sahu"
    }

and define a separate showFullName() method:

    let showFullName = function (city, state) {
        console.log(this.firstName + " " + this.lastName + " from " + city + ", " + state);
    }

call()

The call() method calls a function with a given this value and arguments provided individually.

and we make call with call() method:

    showFullName.call(name2, 'Raipur', 'Chhattisgarh');
    // output: Bharat Sahu from Raipur, Chhattisgarh

apply()

similar to call(), but expects an array of all of our parameters.

    showFullName.apply(name2, ['Raipur', 'Chhattisgarh']);
    // output: Bharat Sahu from Raipur, Chhattisgarh

bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

    // bind, when we need to call method later
    const showMyName = showFullName.bind(name2, 'Raipur', 'Chhattisgarh');
    showMyName();
    // output: Bharat Sahu from Raipur, Chhattisgarh

The full code snippets will be:

    let name2 = {
        firstName: "Bharat",
        lastName: "Sahu"
    }

    let showFullName = function (city, state) {
        console.log(this.firstName + " " + this.lastName + " from " + city + ", " + state);
    }

    showFullName.call(name2, 'Raipur', 'Chhattisgarh');
    // output: Bharat Sahu from Raipur, Chhattisgarh

    showFullName.apply(name2, ['Raipur', 'Chhattisgarh']);
    // output: Bharat Sahu from Raipur, Chhattisgarh

    const showMyName = showFullName.bind(name2, 'Raipur', 'Chhattisgarh');
    showMyName();
    // output: Bharat Sahu from Raipur, Chhattisgarh

References:

• Function.prototype.apply()
• Function.prototype.bind()
• Function.prototype.call()

If you implement Firebase phone authentication using Cordova plugin, it must be capable to provide all the Firebase services otherwise, your Cordova application cannot perform CRUD operations with firebase-js-sdk where authentication required.

Or, if you want to implement Firebase phone authentication with firebase-js-sdk, you have to configure things related to Captcha/reCaptcha. You can see here in the official document.

Here I’ve found solution by combining both the dependencies i.e. firebase-js-sdk and a Cordova plugin so we don't need to configure all Captha related tasks.

Step I: Initially we have to create an Android project in Firebase console. where I have to register my new Android application name and package name in Firebase console. cause you won’t have an option for the Cordova application.

You’ll see the third option while registering the app as Debug signing certificate SHA-1. It seems optional but because we’re creating authentication based application I’ll recommend you generate those certificates. You can generate debug certificates by following it or by the following command default password is android

Ubuntu

    keytool -list -v -alias keystore -keystore ~/.android/debug.keystore

Windows

    keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

Generated certificate output will be like below:

Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09

Just copy the SHA1 fingerprint and paste in the third input field Debug signing certificate SHA-1. after then click to Register App.

Step II: The below screen will appear after click on the Register App button.

Click on the Download google-service.json, you’ll have a JSON file, place it on the root of your project. and, remember you need to specify in config.xml for google-service.json so, Cordova will place the copied file inside platforms/android/app directory while generating the app.

<platform name="android">
    <resource-file
      src="google-services.json"
      target="app/google-services.json"
    />
</platform>

after this click on Next, Next… Finally, you’ve set up an Android project in Firebase.

Step III: Now, you have to enable the Phone Authentication for your newly registered Android application.

1. Select Authentication from Develop option.
2. Choose Sign-in method
3. Choose Phone
4. Just Enable it from the right upper toggle button
5. By clicking on Save, we’ve finished the configuration here.

Now we’ve to look upon our local project, You will see the major role of two dependencies. because we’re not going to use Captcha/reCaptcha I’ll use a Cordova plugin for generating verification id for phone numbers. and we’re going to verify that verification id and OTP by using firebase-js-sdk. Add these dependencies by below commands:

1. Cordova plugin cordova-plugin-firebase-authentication

cordova plugin add cordova-plugin-firebase-authentication --save

2. Add firebase-js-sdk in your project, using npm:

    npm i firebase

Or using yarn

    yarn add firebase

3. Configure your firebase-js-sdk to already created projects on Firebase console. you need to create a file as I’ve created in src/store.js and use this boilerplate code for configuration.

import firebase from "firebase";
import "firebase/firestore";
import "firebase/auth";

const config = firebase.initializeApp({
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  projectId: '<your-cloud-firestore-project>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-sender-id>'
  appId: '<key>:<key>:<android>:<your-sender-id>',
});

const auth = firebase.auth();
const db = config.firestore();

export { auth, firebase };

You can get configuration details in google-service.json for firebase app initialization or if you feel the hassle to get those keys/configurations detail in one place, Add a web app in the same project of Firebase console where we added the Android app before. you’ll have exactly the same configuration detail as mentioned above in Project Settings > Web Apps > Firebase SDK snippet copy and paste the config in your project.

Here I have exported instances auth, firebase now I can use it wherever I want.

Its time to design the login page, Here we’ll talk about code snippet, not about UI but in the Github repository, you’ll get the full code.

4. I have created a Login.js page, where I have to register a listener method for an authenticated user. You can register your listener in React’s lifecycle method static getDerivedStateFromProps and, if you’re using React Hooks you can register it in useEffect.

import { auth, firebase } from "./store";

Whenever a user logged in or log out listener method will be invoked automatically, I have registered listener method from firebase-js-sdk of auth. You’ll see a listener method in added Cordova plugin too but we’re not going to use it because we have decided to work with firebase-js-sdk.

auth.onAuthStateChanged((authUser) => {
  if (authUser) {
    // Pass authUser
  } else {
    // Handle null
  }
});

Create a function, that will starts the phone number verification process for the given phone number. for this use the Cordova plugin method inside verifyPhoneNumber which takes two parameters first phone number along with country code and second is timeout [milliseconds] is the maximum amount of time you are willing to wait for SMS auto-retrieval to be completed by the library. The maximum allowed value is 2 minutes. Use 0 to disable SMS-auto-retrieval. If you specify a positive value less than 30 seconds, the library will default to 30 seconds.

cordova.plugins.firebase.auth
  .verifyPhoneNumber("+91" + phoneNumber, 0)
  .then((verificationId) => {
    // Pass verificationId
  });

After invoking verifyPhoneNumber OTP will be sent to given mobile number. then the last process to be required is to verify the otp and generated verificationId for this again we’re going to use a function signInAndRetrieveDataWithCredential from firebase-js-sdk.

const credential = firebase.auth.PhoneAuthProvider.credential(
  verificationId,
  otp
);

auth
  .signInAndRetrieveDataWithCredential(credential)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    // Handle error
  });

Done! If otp and, verificationId verify successfully automatically your registered listener onAuthStateChanged will be invoked.

References:

• firebase-js-sdk
• cordova-plugin-firebase-authentication

Read on Medium

Important: Unlike "push IDs" in the Firebase Realtime Database, Cloud Firestore auto-generated IDs do not provide any automatic ordering. If you want to be able to order your documents by creation date, you should store a timestamp as a field in the documents.

I don’t recommend custom document ID over Firestore auto-generated ids cause the scalability comes from how Firestore spreads the document out over its storage layer. In a simplified way: sequential IDs have more hashing collisions, which means you hit write limitations sooner. Having more random IDs ensures the writes are spread out evenly across the storage layer. At the reading, there is no such bottleneck, which is why the recommended approach is to use random keys and a field for ordering upon reads.

Before starting it requires some basic knowledge of Firestore transactions. And, if you want to store your data a field with custom incremental order, Let’s start…

Suppose we have 2 collections first as Organisations and the other is Purchases. I have an application that has organizations that can maintain their purchase records on Firebase Firestore and, Every organization will have its incremental serial number for their respective purchases. quick look of both objects:

organisation: {
  name: 'traderA',
  serialNumberGenerated: 0,
}

purchase: {
  created_at: new  Date(),
  amount: 889.99,
  serialNumber: 'traderA_025'   // Can be Number or Alphanumeric
}

Now, The serialNumber can be stored with purchase document two types, first as custom document_id or it can be stored as an object field/property. As we already talked about storing data with custom document_id is an anti-pattern, I don’t recommend custom document_id. But we can maintain a field/property in an ordered way.

Before starting transactions we need Firestore document reference of the selected organization and another reference from purchases with a random document_id to be stored with data.

// Create a reference to the organisations doc.
const orgRef = db.collection("organisations").doc("traderA_docId");

// Get random document id for purchases
const purchaseRef = db.collection("purchases").doc();

After this, we need to fetch serial numbers (serialNumberGenerated) till generated for purchases which is stored in organizations for a particular organization. For the next purchase data, it will be incremented by one to maintain order and, must be stored in both organizations and purchase documents. We’ll do this work inside transactions.

return db
  .runTransaction((trx) => {
    return trx.get(orgRef).then((orgDoc) => {
      if (!orgDoc.exists) throw "Document does not exist!";

      // Increment one serialNumberGenerated to the organisations.
      const nextSerial = orgDoc.data().serialNumberGenerated + 1;

      trx.set(purchaseRef, {
        created_at: new Date(),
        amount: 888.99,
        serialNumber: nextSerial, // OR concat with String.
      });

      trx.update(orgRef, { serialNumberGenerated: nextSerial });
    });
  })
  .then(() => console.log("Transaction successfully committed!"))
  .catch((error) => console.log("Transaction failed: ", error));

Note:

1. You can’t run transactions when offline.
2. Increment operation could be done using function FieldValue.increment.

Read on Medium