Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (How Authentication Works In React Native ?) .
In this note series, we will learn how Authentication Works In React Native. Mostly Authentication is done by the OAuth2 Authentication Protocol in React Native application. This protocol is incredibly popular nowadays, prided as the most complete and secure protocol around. The OpenID Connect protocol is also based on this protocol.
So Let’s begin.
OAuth2 and Redirects
The OAuth2 authentication protocol is incredibly popular and the most complete and secure protocol around. In OAuth2, the user asks to the authenticate via a third party. On successful completion, this third party redirects back to the requesting application with a verification code which can be exchanged for a JWT — a JSON Web Token. JWT is an open standard for securely transmitting information between parties on the web.
PKCE (Proof of Key Code Exchange)
On the web, this redirect step is secure, because it guarantees URLs to be unique on the web. This is not true for apps because, as mentioned earlier, there is no centralized method of registering URL schemes! In order to address this security concern, an additional check must be added in the form of PKCE.
PKCE, pronounced “Pixy” stands for Proof of Key Code Exchange, and is an extension to the OAuth 2 spec. This involves adding a layer of security, which verifies that the authentication and token exchange requests come from the same client. PKCE uses the SHA 256 Cryptographic Hash Algorithm. SHA 256 creates a unique “signature” for a text or file of any size, but it is:
- Always the same length regardless of the input file.
- Guaranteed to be always produce the same result for the same input.
- One way (that is, we can’t reverse engineer it to reveal the original input).
Now we have two values:
- code_verifier – a large random string generated by the client.
- code_challenge – the SHA 256 of the code_verifier.
During the initial /authorize request, the client also sends the code_challenge for the code_verifier , it keeps in memory. After the authorize request has returned correctly, the client also sends the code_verifier that was used to generate the code_challenge. The IDP will then calculate the code_challenge, see if it matches what was set on the very first /authorize request, and only send the access token if the values match.
This guarantees that only the application that triggered the initial authorization flow would be able to successfully exchange the verification code for a JWT. So even if a malicious application gets access to the verification code, it will be useless on its own.
OAuth Library
A library to consider for native OAuth is react-native-app-auth. React-native-app-auth is an SDK for communicating with OAuth2 providers. It wraps the native AppAuth-iOS and AppAuth-Android libraries and can support PKCE. React-native-app-auth can support PKCE only if our Identity Provider supports it.
Conclusion
In this note series, we understood how Authentication works in React Native. We discussed the work flow of OAuth2 Authentication Protocol with PKCE in react native.
Thanks for reading ! I hope you enjoyed and learned about OAuth2 Authentication Protocol concept in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React Native as below links :
If you have any comments, questions, or think I missed something, leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
