Create a Password Validator using React-Native

In this article we are going to implement a Password Validator using React Native. The Password validation app in React Native is a simple application that is used to check the strength of a password. Passwords protect your personal and sensitive data, such as financial information, medical records, and private communications, from being accessed by unauthorized individuals.

Preview of final output:Let us have a look at how the final output will look like.

Preview of the app

Prerequisites

• React Native

Approach

The Password validation app in React Native is a simple application that is used to check the strength of a password. In this app, we add a text area component in which user can enter their password and check the strength of the password. This app also provide suggestion to make your password more strong. We also add a meter in the app which shows strength of the password.

Conditions for a valid and strong password are:

• Password should not contain any space.
• Password should contain at least one digit(0-9).
• Password must contain at least one lowercase letter (A-Z).
• Password must contain at least one uppercase letter (A-Z).
• Password must contain at least one character like this (@, #, %, &, !, $, etc…).

Steps to Create React Native Application

Step 1: Create a react native application by using this command in command prompt

React-native init PasswordValidatorApp

Example: Implementation of the above approach.

Javascript

import React, { useState } from 'react';
import {View, TextInput, Text, StyleSheet}
    from 'react-native';

const PasswordValidatorApp = () => {
    const [password, setPassword] = useState('');
    const [suggestions, setSuggestions] = useState([]);
    const [strength, setStrength] = useState('');

    const validatePassword = (input) => {
        let newSuggestions = [];
        if (input.length < 8) {
            newSuggestions.push('Password should be at least 8 characters long')
        }
        if (!/\d/.test(input)) {
            newSuggestions.push('Add at least one number')
        }

        if (!/[A-Z]/.test(input) || !/[a-z]/.test(input)) {
            newSuggestions.push('Include both upper and lower case letters')
        }

        if (!/[^A-Za-z0-9]/.test(input)) {
            newSuggestions.push('Include at least one special character')
        }

        setSuggestions(newSuggestions);

        // Determine password strength based on suggestions
        if (newSuggestions.length === 0) {
            setStrength('Very Strong');
        }
        else if (newSuggestions.length <= 1) {
            setStrength('Strong')
        }
        else if (newSuggestions.length <= 2) {
            setStrength('Moderate')
        }
        else if (newSuggestions.length <= 3) {
            setStrength('Weak')
        }
        else {
            setStrength('Too Weak')
        }
    }

    return (
        <View style={styles.container}>
            <View style={styles.Heading}>
                <Text style={styles.HeadingText}>
                    Password Validator
                </Text>
            </View>
            <TextInput placeholder="Enter your password"
                       onChangeText={(text) => {
                           setPassword(text);
                           validatePassword(text)
                        }}
                       style={styles.textInput} />
            <Text style={styles.strengthText}>
                Password Strength: {strength}
            </Text>
            <Text style={styles.suggestionsText}>
                {suggestions.map((suggestion, index) => (
                    <Text key={index}>
                        {suggestion}{'\n'}
                    </Text>))}
            </Text>
            <View style={styles.strengthMeter}>
                <View style={{width: `${(strength === 'Very Strong' ? 100 :
                                      (strength === 'Strong' ? 75 :
                                      (strength === 'Moderate' ? 50 :
                                      (strength === 'Weak' ? 25 : 0))))}%`,
                              height: 20,
                              backgroundColor: strength === 'Too Weak' ? 'red' :
                                      (strength === 'Weak' ? 'orange' :
                                      (strength === 'Moderate' ? 'yellow' :
                                      (strength === 'Strong' ? 'green' : 'limegreen')))}}>
                </View>
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    Heading: {
        marginTop: 40,
        padding: 40,
    },
    HeadingText: {
        fontSize: 25,
        alignItems: 'center',
        fontWeight: 'bold',
    },
    textInput: {
        borderWidth: 1,
        width: 300,
        padding: 10,
        marginBottom: 10,
    },
    strengthText: {
        fontWeight: 'bold',
        fontSize: 18,
        color: '#007700',
    },
    suggestionsText: {
        color: 'red',
    },
    strengthMeter: {
        width: '80%',
        height: 20,
        backgroundColor: '#ccc',
        marginTop: 20,
        borderRadius: 10,
        overflow: 'hidden',
    },
});
export default PasswordValidatorApp;

Steps to run your application:

Step 1: Type following command in your terminal.

npx expo start

Step 2: According to your operating system run the following command.

• To run on Android

npx react-native run-android

• To run on IOS

npx react-native run-ios

Output

Passvalidator