Security is always an absolutely important issue of the software. For mobile applications, normally we will have to secure information such as account name, password, touch id, credit card information etc.
The react-native-keychain library provides keychain / keystore so we can store and retrieve stored information securely for the application.
Setting
- Run the command:
1 2 | yarn add react-native-keychain |
- If React Native version <= 0.59, run the following command to link the library:
1 2 | react-native link react-native-keychain |
- Run
pod installin the ios / directory to install iOS dependencies - If you want to support FaceID, add the NSFaceIDUsageDescription entry to Info.plist
Use
Take a look at the example below, we will store and access login information with Keychain offline.
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 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> Keychain <span class="token keyword">from</span> <span class="token string">'react-native-keychain'</span> <span class="token punctuation">;</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token string">'markzuckerberg'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">;</span> <span class="token comment">// Store the credentials</span> <span class="token keyword">await</span> Keychain <span class="token punctuation">.</span> <span class="token function">setGenericPassword</span> <span class="token punctuation">(</span> username <span class="token punctuation">,</span> password <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token comment">// Retrieve the credentials</span> <span class="token keyword">const</span> credentials <span class="token operator">=</span> <span class="token keyword">await</span> Keychain <span class="token punctuation">.</span> <span class="token function">getGenericPassword</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> credentials <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Credentials successfully loaded for user '</span> <span class="token operator">+</span> credentials <span class="token punctuation">.</span> username <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'No credentials stored'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Keychain couldn't be accessed!"</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">await</span> Keychain <span class="token punctuation">.</span> <span class="token function">resetGenericPassword</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
setGenericPassword
This function will store username / password information in secure storage. Note that this function will only store strings, so if you want to store information in object form, we must convert to JSON string to store offline.
getGenericPassword
This function will help us retrieve login information stored in secure storage.
resetGenericPassword
This function will delete all saved logins and reset it.
getSupportedBiometryType
This function will be used to check the biometrics that the device supports
1 2 3 4 | Keychain <span class="token punctuation">.</span> <span class="token function">getSupportedBiometryType</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">biometryType</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> biometryType <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Use with server
The library also provides an API to store server information along with a username and password.
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 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> Keychain <span class="token keyword">from</span> <span class="token string">'react-native-keychain'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> DeviceInfo <span class="token keyword">from</span> <span class="token string">'react-native-device-info'</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token string">'markzuckerberg'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> server <span class="token operator">=</span> DeviceInfo <span class="token punctuation">.</span> <span class="token function">getBundleId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// Store the credentials</span> <span class="token keyword">await</span> Keychain <span class="token punctuation">.</span> <span class="token function">setInternetCredentials</span> <span class="token punctuation">(</span> server <span class="token punctuation">,</span> username <span class="token punctuation">,</span> password <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token comment">// Retreive the credentials</span> <span class="token keyword">const</span> credentials <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getInternetCredentials</span> <span class="token punctuation">(</span> server <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> credentials <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Credentials successfully loaded for user '</span> <span class="token operator">+</span> credentials <span class="token punctuation">.</span> username <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'No credentials stored'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Keychain couldn't be accessed!'</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">await</span> Keychain <span class="token punctuation">.</span> <span class="token function">resetInternetCredentials</span> <span class="token punctuation">(</span> server <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Note
For Android, this module will implement CipherStorage based on API level:
- API level 16-22 will en / de crypt use Facebook Conceal
- API level 23+ will en / de crypt use the Android Keystore
The encrypted information will be stored in SharedPreference.
Refer:
- Refer to the detailed example at: https://github.com/oblador/react-native-keychain