Nadeem Shareef
Shareef

Shareef

How to hide password value in inspect using React and Formik

Nadeem Shareef's photo
Nadeem Shareef
ยทDec 6, 2021ยท

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Hello Developers ๐Ÿคฉ๐Ÿคฉ

Have you ever logged in to Facebook? Have you ever inspected the Facebook login page? If not go to Facebook and try inspecting it, you will find the value of the password filed is not showing.

We will replicate that behavior using React and Formik.

Creating Project

npx create-react-app my-app

After project setup, install formik.

npm install formik --save

Basic setup

Setup a basic template for email and password input with submit button.

import { useFormik } from "formik";

function App() {
    return (
        <form>
            <input name="email" type="email" placeholder="email" />
            <input 
                name="password"
                type="password"
                placeholder="password"
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default App;

Implementing Formik

import { useFormik } from "formik";

function App() {
    const handleSubmit = (values) => {
        console.log(values);
    };

    const formik = useFormik({
        initialValues: {
            email: "",
            password: "",
        },
    });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                handleSubmit(formik.values);
            }}
        >
            <input
                name="email"
                type="email"
                placeholder="email"
                {...formik.getFieldProps("email")}
            />
            <input
                name="password"
                type="password"
                placeholder="password"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default App;

Now check the value in Inspect. Kaboom ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ No value in Inspect.

Live Preview

Closing here ๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹

Github Code Repo This is Shareef. My recent project yourounotes My Portfolio Twitter ShareefBhai99 Linkedin My other Blogs

ย 
Share this