Security And Authentication In React Native

Kraman says not to send information users should not see through API responses, include it in app code, or store it in AsyncStorage. In one example, an API returned email addresses and phone numbers that the app did not display; a security researcher found them in network traffic and reported the issue for a reward. Kraman’s lesson is to filter data and permissions on the server.

Kraman describes routing phone traffic through Charles Proxy to inspect API requests, with an SSL certificate installed to view encrypted traffic. She found that an app’s refresh-token exchange exposed an auth token that could be used to explore its API. AsyncStorage is unencrypted, so she recommends native secure storage options such as iOS Keychain and Android Shared Preferences, with encryption for sensitive data.

Kraman explains that OAuth 2 lets an app obtain a token after a user grants authorization, while OpenID Connect adds an authentication layer and supports sign-in through providers such as Google, Twitter, or GitHub. The flow sends the user to an authorization server, returns an authorization code to the app, then exchanges that code for a token. Client secrets offer no security in a native app because its code can be inspected.

On mobile, multiple apps may be able to handle the same redirect scheme, allowing a malicious app to intercept an authorization code through scheme squatting. Kraman explains that PKCE adds a code challenge to the authorization request and requires the matching key during the token exchange. She points to AppAuth for Android and iOS and React Native AppAuth as libraries that handle this flow.