Security and Authentication in React Native
Kadi Kraman / Formidable
@kadikraman
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6472940/speaker-kadi-kraman.ebff093b.png)
Kadi Kraman
Senior React Native Engineer
@kadikraman
Formidable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6472989/Screenshot_2019-08-25_at_15.36.32.png)
@kadikraman
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6472940/speaker-kadi-kraman.ebff093b.png)
Kadi Kraman
Senior Software Engineer
Web Developer
...who writes mobile apps now, because we can do it in JavaScript (thanks, Facebook)
Secrets
How to keep them safe?
If the user shouldn't see it,
1. Do not send it via a network request
2. Do not ship it in the app code
3. Do not save it in Async Storage
3Fun Security Fail
Alternative dating app leaking their members' sensitive info
(August, 2019)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495348/3fun-security-breach.png)
Source: https://securityaffairs.co/
Source: https://www.independent.co.uk
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495396/3fun-location.jpeg)
Users' real time location...
Source: https://securityaffairs.co/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495407/Screenshot_2019-09-01_at_20.09.58.png)
Private photos...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6507912/facepalm.jpg)
But that will never happen to me!
...right?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6507926/smiling.png)
Mary Strawberry
react, react native, prosecco
I like long walks on the beach and puppies
Public
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6507930/man.png)
Paul Pear
Protected
Private
/api/users
[
{
id: 123,
firstName: "Mary",
lastName: "Strawberry"
avatar: "https://some.url/mary.png",
email: "mary.strawberry@fakemail.com",
phone: "123456789",
interests: ["react", "react native", "prosecco"],
bio: "I like long walks on the beach and puppies"
},
{
id: 234,
firstName: "Paul",
lastName: "Pear",
avatar: "https://some.url/paul.png"
}
]
Public, Protected, Private
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6507912/facepalm.jpg)
Sensitive info should always be filtered server-side
How easy is it really to see your mobile app traffic?
You will need...
Phone (iPhone 6s)
Laptop (MacBook Pro)
Proxy app (Charles Proxy)
WiFi
DO try this at home! 🏠
1. Download and install Charles Proxy
2. Configure mobile traffic to go through the proxy
3. Install the Charles Proxy SSL cert on your phone
4. Enable SSL proxying for all hosts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495482/IMG_3454.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495483/IMG_3455.jpg)
Slack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495570/Screenshot_2019-09-01_at_21.17.21.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495555/Screenshot_2019-09-01_at_21.12.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6502816/Screenshot_2019-09-03_at_21.10.39.png)
Virgin Active
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495615/virgin2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6508702/Screenshot_2019-09-05_at_12.58.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6495621/postmanvirgin.png)
Do not add sensitive info in your app source code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6501320/Screenshot_2019-09-03_at_14.54.00.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6501375/Screenshot_2019-09-03_at_15.05.53.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6501377/Screenshot_2019-09-03_at_15.07.49.png)
How does she do it?
1. Get the public .apk for each new version of the app
2. Decompile the app code using a publicly available tool (and a custom python script)
3. Read through the code to see what's changed
Source: https://finance.yahoo.com/news/
Async Storage
Simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app
It should be used instead of LocalStorage
Async Storage
Use for non-sensitive app info
Persisted app state - YES
Auth tokens - NO
Async Storage is sandboxed for each app
However this is an OS restriction, which can be overcome
Rooting/Jailbreaking devices
Rooting (Android)
obtaining root access to device
Jailbreaking (iOS)
privilege escalation of an Apple device for the purpose of removing software restrictions imposed by Apple
If the user shouldn't see it,
1. Do not send it via a network request
2. Do not ship it in the app code
3. Do not save it in Async Storage
Recap!
So where can you store tokens?
Android Shared Preferences
iOS Keychain
The info should still be encrypted, because jailbroken devices will be able to access it in plaintext
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6508166/Screenshot_2019-09-05_at_09.59.10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6508169/Screenshot_2019-09-05_at_10.01.50.png)
Security tips
1. Do calculate permissions server-side
2. Do only send the user data they're allowed to see
3. Do use secure storage, e.g.
- react-native-sensitive-info or
- react-native-keychain
for tokens and other sensitive info
Authentication
OAuth 2 !== OpenID
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6501987/slack-oauth.png)
Source: https://api.slack.com/docs/oauth
OAuth 2
OpenID
Open standard and decentralized authentication protocol
Allows users to be authenticated by co-operating sites
OpenID Connect - authentication layer that sits on top of the OAuth 2.0 authorization framework
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6502578/google.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6507966/demo.gif)
Potential Security concerns with OAuth2 on Native Apps
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>&
clientSecret=<secret>
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. Verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6502692/scheme.png)
Web addresses are unique, app schemes are not
The attacker can intercept the verification code and use it to obtain the auth token
PKCE ("pixy") to the rescue!
Security extension to OAuth 2.0 for public clients on mobile devices
Designed to prevent interception of the authorisation code by a malicious application that has sneaked into the same device
Proof Key for Code Exchange
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>&
code_challenge=<generated_code_challenge>&
code_challenge_method=<method_used>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>&
code_verifier=<generated_code_verifier>
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>&
code_challenge=<generated_code_challenge>&
code_challenge_method=<method_used>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>&
code_verifier=<generated_code_verifier>
const sha256 = (buffer) =>
crypto
.createHash('sha256')
.update(buffer)
.digest();
const challenge = base64URLEncode(sha256(verifier));
POST
/authorize?
clientId=<my_id>&
redirectUri=<my_redirect_uri>&
scope=<access_scope>&
code_challenge=<generated_code_challenge>&
code_challenge_method=<method_used>
1. Ask the user to authenticate
2. After a successful login, the provided redirect uri is called together with an verification code
3. Verification code is exchanged for an auth token
POST
/token?
clientId=<my_id>&
code=<code>&
code_verifier=<generated_code_verifier>
Cryptographically random key that was used to generate the code_challenge passed to /authorize.
const sha256 = (buffer) =>
crypto
.createHash('sha256')
.update(buffer)
.digest();
const challenge = base64URLEncode(sha256(verifier));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/155612/images/6502783/react-native-app-auth-logo.png)
React Native App Auth
Thank you!
Unsplash photos by @wflwong @jonah_jpg @jonaselia @markusspiske
Authentication and Security in React Native
By Kadi Kraman
Authentication and Security in React Native
- 1,520