Password is a secret group of characters with symbols used to gain access into a certain place. Normally before the password encryption technique the password is saved as same typed form, Which can be easily readable via human eyes. Which is not safe for users. Now days the password is first convert into a fixed encrypted form which can be relabel by human eyes but not used to LOG-In because its converted. A most famous password encryption technique is known as Base64 encryption which is used by hundreds of websites and mobile applications to store their password. In this tutorial we would learn about Password Encryption Decryption using Base64 Method in React Native Android iOS Example tutorial.
Content in this project Password Encryption Decryption using Base64 Method in React Native Android iOS Example:
1. Before getting started the coding we need to install a NPM library named as js-base64. This library has almost 4.6 million weekly downloads and most popular among developers. So open your react native project folder in command prompt or Terminal and execute below command to install the js-base64 library. base64 library comes in pure JavaScript code so there is no need to use the link command after done installation.
|
1
|
npm install —save js–base64
|
Screenshot of CMD:
2. Open your project’s App.js file and import StyleSheet, Text, View, TouchableOpacity and TextInput component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from ‘react-native’;
|
2. Import Base64 component from js-base64 library in your project.
|
1
|
import { Base64 } from ‘js-base64’;
|
3. Create constructor() method in your app’s main export default class and inside it create 2 States named as Password_Holder and update_data.
Password_Holder : Is used to hold the entered password text in TextInput component.
update_data : Is used to hold the password after applying the Encryption.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor() {
super()
this.state = {
Password_Holder: ”,
update_data: ”,
}
}
|
4. Create a function named as encrypt_password(). Inside the function we would use the Base64 component to convert the TextInput entered string in Base64 encryption and store the encrypted password into state.
|
1
2
3
4
5
6
|
encrypt_password = () => {
var temp = Base64.encode(this.state.Password_Holder);
this.setState({ update_data: temp });
}
|
5. Create a function named as decrypt_password(). Inside the function we would again use the Base64 component to Decrypt the encrypted string into normal format and store in State.
|
1
2
3
4
5
6
|
decrypt_password = () => {
var temp2 = Base64.decode(this.state.update_data);
this.setState({ update_data: temp2 });
}
|
6. Creating 1 TextInput, 2 Buttons using TouchableOpacity and 1 Text component in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Password Here”
onChangeText={data => this.setState({ Password_Holder: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity style={styles.button} onPress={this.encrypt_password} >
<Text style={styles.text}>Click Here to Encode Password</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.decrypt_password} >
<Text style={styles.text}>Click Here to Decode Password</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20, textAlign: ‘center’, marginTop: 10 }}>
{this.state.update_data}
</Text>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
width: ‘80%’,
paddingTop: 2,
paddingBottom: 2,
backgroundColor: ‘#01579B’,
borderRadius: 3,
marginTop: 20
},
textInputStyle: {
textAlign: ‘center’,
height: 42,
width: ‘80%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
},
text: {
color: ‘#fff’,
fontSize: 20,
textAlign: ‘center’,
padding: 5
}
});
|
8. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from ‘react-native’;
import { Base64 } from ‘js-base64’;
export default class App extends Component {
constructor() {
super()
this.state = {
Password_Holder: ”,
update_data: ”,
}
}
encrypt_password = () => {
var temp = Base64.encode(this.state.Password_Holder);
this.setState({ update_data: temp });
}
decrypt_password = () => {
var temp2 = Base64.decode(this.state.update_data);
this.setState({ update_data: temp2 });
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Password Here”
onChangeText={data => this.setState({ Password_Holder: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity style={styles.button} onPress={this.encrypt_password} >
<Text style={styles.text}>Click Here to Encode Password</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.decrypt_password} >
<Text style={styles.text}>Click Here to Decode Password</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20, textAlign: ‘center’, marginTop: 10 }}>
{this.state.update_data}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
width: ‘80%’,
paddingTop: 2,
paddingBottom: 2,
backgroundColor: ‘#01579B’,
borderRadius: 3,
marginTop: 20
},
textInputStyle: {
textAlign: ‘center’,
height: 42,
width: ‘80%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
},
text: {
color: ‘#fff’,
fontSize: 20,
textAlign: ‘center’,
padding: 5
}
});
|
Screenshots:
Also Read :
React Native Set TextInput maxLength Validation iOS Android Example
React Native Override Android Hardware Back Button Behavior
Render Raw HTML Code in React Native App Using WebView
How to Use Switch Case Statement in React Native With Example
React Native Disable Remove All Yellow Warning Messages Box
