Password Generator App with React Native and Expo

Introduction

Passwords help keep our online accounts safe, but coming up with a strong password can be tricky. So, I decided to build a Password Generator App using React Native and Expo. In this article, I’ll share how I made it, the tools I used, and the key features I added.

What I Used

For this project, I used:

• React Native with Expo for easy development and testing.

• TypeScript for better code structure.

• Formik and Yup for handling user input and validation.

• Bouncy Checkbox for easy selection of options.

The app lets users create a password based on:

1. Password length.

2. Uppercase letters.

3. Lowercase letters.

4. Numbers.

5. Special characters (symbols).

How It Works

The app takes input from the user and generates a random password based on their choices. Users can select the type of characters they want, and the app creates a secure password for them.

Here’s the function that makes the password:

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);
};

This function dynamically constructs a character list based on user selections and generates a random password.

Making Sure the Input is Correct

To ensure users enter a valid password length, I used Formik and Yup for validation. The app only accepts password lengths between 4 and 20 characters.

Example validation:

const PasswordSchema = Yup.object().shape({
  passwordLength: Yup.number()
    .min(4, 'Minimum length is 4')
    .max(20, 'Maximum length is 20')
    .required('Password length is required')
});

One challenge was making sure the password was truly random and secure. I solved this by:

• Using Math.random() to pick random characters.

• Making sure the password doesn’t repeat patterns too often.

Another issue was managing the app’s state. I used React’s useState hook to store and update the password dynamically.

Future Improvements

I plan to add:

• Dark mode for better readability at night.

• A copy button to quickly copy the password.

• A password strength meter to show how strong the generated password is.

Final Thoughts

Building this app with Expo and React Native was a great learning experience. I improved my skills in React Native, form validation, and state management. If you’re interested, check out my GitHub repository [Password-Generation].