Kashiprasad's blog

Building a React Native Password Generator App

Kashiprasad's photo
Kashiprasad
·

3 min read

Building a React Native Password Generator App

In today's digital age, strong and secure passwords are essential for protecting our online accounts. However, coming up with a complex password that's also easy to remember can be a daunting task. To simplify this process, we've created a React Native Password Generator App that allows you to generate strong and customizable passwords effortlessly.

Getting Started

Before we dive into the code, let's set the stage for what this app does. Our Password Generator App lets you:

  • Specify the desired password length.

  • Include lowercase and uppercase letters.

  • Include numbers.

  • Include symbols.

The app will then generate a password based on your preferences.

The Code

Our app is built using React Native, a popular framework for building cross-platform mobile applications. We've also used a few additional libraries to streamline the development process:

  • Formik: For handling form input and validation.

  • Yup: For defining the validation schema.

  • react-native-bouncy-checkbox: For creating custom checkboxes.

Initializing State

We start by initializing the state variables that will hold our password and customization options. These variables will change as the user interacts with the app.

const [password, setPassword] = useState('');
const [isPassGenerated, setIsPassGenerated] = useState(false);
const [lowerCase, setLowerCase] = useState(true);
const [upperCase, setUpperCase] = useState(false);
const [numbers, setNumbers] = useState(false);
const [symbols, setSymbols] = useState(false);

Generating Passwords

The generatePasswordString function is responsible for creating passwords based on the selected options. It takes the desired password length and a character set as input and sets the generated password in the state.

const generatePasswordString = (passwordLength: number) => {
  let characterList = '';
  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
    const digitChars = '0123456789';
    const specialChars = '!@#$%^&*()_+';

    if (upperCase) {
      characterList += upperCaseChars
    }
    if (lowerCase) {
      characterList += lowerCaseChars
    }
    if (numbers) {
      characterList += digitChars
    }
    if (symbols) {
      characterList += specialChars
    }

    const passwordResult = createPassword(characterList, passwordLength)
    setPassword(passwordResult)
    setIsPassGenerated(true)
};

Validating the Form

We use Formik and Yup for form handling and validation. Formik simplifies the process of managing form state and handling form submissions, while Yup defines the validation schema for the password length field.

<Formik
  initialValues={{ passwordLength: '' }}
  validationSchema={PasswordSchema}
  onSubmit={values => {
   console.log(values);
   generatePasswordString(+values.passwordLength)
  }}
>
  {/* Form components */}
</Formik>

User Interface

The user interface consists of input fields for password length and custom checkboxes for password options. When the user generates a password, it is displayed on a styled card.

Styling

We've included styles for various components using the `StyleSheet.create` function. The styles define the look and feel of our app, including fonts, colors, and layout.

Conclusion

Building a React Native Password Generator App is a great way to simplify the process of creating strong and secure passwords. By customizing the password generation options, you can create passwords that meet your specific requirements.

This app serves as an example of how to use React Native, Formik, and Yup to build a user-friendly mobile application. You can further enhance it by adding features like password strength indicators or the ability to save generated passwords securely.

Feel free to explore the code and customize it to suit your needs. You can find the complete code for this app at https://github.com/prasadpatil1123/PasswordGenerator.git.

We hope you find this app useful for generating strong and secure passwords. Happy coding!

ReactReact Nativeformikyup