A Short Note – How Authentication Works In React Native ?

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

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.

How Authentication Works In React Native ?

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 is asked to 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.

On the web, this redirect step is secure, because URLs on the web are guaranteed to be unique. 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 an additional 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.

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.

OAuth2_With_PKCE_Diagram
OAuth2_With_PKCE_Diagram

Conclusion

In this note series, We understood how Authentication works in React Native. We discussed about 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 us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s