Evaluating third party authentication providers for React Native

Authentication may be one of the less exciting aspects of producing a great React Native application, yet it is one that is almost always a consideration. As one who has worked with React Native for awhile, I have utilized a variety of approaches, each with their benefits and drawbacks.

For most apps, the screen that prompts a user to sign in is among the first impressions users will have when they initially open your app. Yet most of the more popular approaches to authentication in the React Native world tend to avoid using a native experience. For React Native developers looking to convince more traditional native developers and/or other decision makers to use React Native with more prominence, it’s a concession not many wish to make.

Expo

Quickly becoming the ubiquitous method to bootstrap React Native apps for both new and seasoned React Native developers, Expo offers an accessible approach to many facets of native development. Their platform delivers a superset of React Native functionality ranging from additional device access (camera, gyroscope), file upload, location and map integrations, graphics editing, and much more.

Included within their grab bag of features is an accessible approach to authentication using their AuthSession API. One of its main benefits includes the reduction of boilerplate frequently needed with any sort of web based authentication, which can include Facebook, Twitter, or a custom Auth0 client.

While great to get started, using this approach means offering the web based authentication workflow that many hope to avoid when delivering a native application.

Auth0 Web

While Auth0 functionality is used under the hood within Expo’s implementation, Auth0 also offers an accessible approach to authentication for developers who want additional control. An incrementally more flexible approach to Expo’s AuthSession is to create a separate Auth0 account and use it with AuthSession or install the react-native-auth0 package directly if not using Expo.

Default Auth0 Web Form

In addition to supporting user management within Auth0, one can enable social and other types of login providers within the Connections settings.

With a custom Auth0 client, some adjustment of the login form interface can be achieved within the Auth0 dashboard by toggling on the Custom Login Page. Once enabled, developers can alter the HTML within the default template provided by Auth0 to achieve some level of branding similar to the theme of the rest of the React Native app.

While the header image can be replaced and fonts can be adjusted, for those looking to offer a sign up or login screen that more closely matches the aesthetics of the rest of the app, Auth0’s web based approach still leaves something to be desired. If those limitations are not a deal breaker, Auth0 does offer clear documentation and well maintained reference examples to help people get started.

Auth0 Embedded Form

For those who wish to leverage the benefits of using Auth0 but wish to have more control over the login experience, Auth0 does offer an alternative to their recommended universal/web form approach. For more details illuminating their views about the pros and cons of each, they offer ample guidance.

While it is clear they attempt to steer developers away from using the embedded custom login approach, they nonetheless offer a comprehensive sample illustrating a custom login approach using React Native under their official Auth0 Samples Github organization.

AWS Amplify

Relatively new on the scene, AWS Amplify offers a great way to authenticate React Native apps using AWS Cognito, especially if you are already leveraging other cloud services within AWS. This can be especially useful if you wish to run AWS Lambda functions in response to certain authentication events.

The simplest approach I’ve found (as of this writing) is to download their global CLI and initialize AWS mobile settings within your project along with user signin and push notifications using Amazon SNS. Note that a AWS account is required to get started.

$ npm install -g awsmobile-cli
$ cd my-app
$ awsmobile init
$ awsmobile user-signin enable
$ awsmobile push

Once installed, user workflow features such as sign in, account confirmation, signup, and password retrieval can all be managed using the JavaScript API provided by theaws-mobile module. AWS Amplify offers a straightforward approach to supporting MFA with SMS that can be entered within a custom UI.

One of the benefits of this approach is that the CLI can automatically take care of provisioning required resources such as the IAM role the app users will utilize as well as the necessary user pool where custom messages, analytics, and more can be configured.

For a more in depth walkthrough of adding AWS Amplify to your project, check out Nader Dabit’s excellent two part series (Part 1, Part 2). The blog series also includes a screencast and Github repo.

If you are already using AWS, Amplify is a compelling alternative. The official documentation is not yet as polished as that of Auth0, but it should likely be accessible to most React Native developers. Among its other strong points is the potential for integration with AWS App Sync for those looking to leverage its GraphQL, offline synchronization, and other capabilities.

Wrapping Up

Given the numerous authentication options React Native developers must consider, I hope this post has been informative.

If there are other providers that could be considered or I have misrepresented any of the functionality in my descriptions above, please don’t hesitate to message me and I will update this post.