Hide/Show Password in React

When logging in or creating an account for a website or application, it is useful for a user to be able to see their password, especially when passwords are long and include different symbols. I implemented this show/hide password functionality in my React frontend capstone project at Flatiron School. There are many variations of this functionality such as a toggle button or icon change. I chose to use an eye and strikethrough eye icon for my website.

First, I installed the React Icons Kit library and imported the library and the two icons into my React component:

import {Icon} from 'react-icons-kit';
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

Next, I created three states. The first state was to manage and eventually set the password of a user, with an initial state of an empty string. The second state was for the type, which had an initial state of 'password'. This will be used in the controlled form to render the password on the page. The last state was for the icon, which had an initial state set as "eyeOff" icon because we want a user's password to be initially hidden:

const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

I then created a function that would handle the toggle between the hide password (eyeOff icon) and the show password (eye icon):

const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

This handleToggle function is saying: when the type is equal to 'password', have the icon set as eye open icon and show the password in text form, and when the type is anything else, have the icon set as the eyeOff icon and hid the password.

Now that the logic is made, we want to render the password and the toggle hid/show functionality on the page. Inside the return:

return (
     <div>
        <div>
           <div class="mb-4 flex">
              <input
                  type={type}
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  autoComplete="current-password"
             />
             <span class="flex justify-around items-center" onClick={handleToggle}>
                  <Icon class="absolute mr-10" icon={icon} size={25}/>
              </span>
            </div>
         </div>
      </div>
); 

I used Tailwind CSS framework to style the position of the icon so that the icon is within the password input.

This is how the form looks with the eyeOff icon with password hidden:

And this is how the form looks with the eye icon with the password shown:

And that's it! I originally though this functionality would be very difficult but I was pleasantly surprised how easy this feature was to implement. I hope this was a helpful tutorial!