Skip to content
Logo Theodo

Stop Building Auth: a case for using prebuilt authentication in React Native

Mo Khazali9 min read

A broken lock, symbolising weak authentication/security.

Authentication is simultaneously one the most and least important parts of your application. By default, most mobile apps will remember the user’s credentials (since phones are normally personal devices). This means that the user might spend a couple of minutes signing up, or a few seconds logging in and not need to authenticate again for weeks, months, or maybe even until they buy a new phone!

At the same time, authentication is incredibly fundamental to most apps. I don’t need to stress why it’s important, but in case you need reminding, user information breaches can cost businesses millions of pounds in fines.

We’ve built our fair share of auth over the years, and it’s always a long and tedious process which can end up taking weeks to finish.

I’m not going to be focusing on why you shouldn’t implement your own authentication logic on the backend. There are plenty of available articles talking about why building auth logic from scratch is a bad idea and auth SaaS solutions are spawning faster than Javascript frameworks.

Instead, this article is focused on the waste of building authentication UIs on the frontend. Even with an Auth provider, creating the frontend-side of your app’s authentication can still be a long and tedious process. We’ll cover why the time spent here isn’t a good investment, and what prebuilt solutions you can use to accelerate your team’s delivery, focusing instead on what really matters to your users.

The most MVP, basic Auth UI

Diagram for basic authentication flow on mobile app.

Let’s adopt an MVP mindset: the simplest implementation of an authentication flow in any app will require:

These are the screens that you’ll need to implement at a minimum for most apps, and they can end up taking a few days to create the components, wire navigation between them, handle the respective success & error state, among other edge cases.

If you want to be extra, you can throw in Google, Apple, Facebook, password-less, biometric auth, and the possibilities are endless. Each one of these adds extra work and will require some notable development time.

All of this work is for the minuscule amount of time that the user will be interacting with the app’s authentication - a couple of minutes in the whole lifecycle of the application.

High investment & low returns… not the most optimal tradeoff.

What could go wrong?

Let’s look at two scenarios where things go wrong:

  1. Your authentication doesn’t work → Users can’t signup/login → They get frustrated after a couple minutes of trying → They quit/uninstall the app → Your business loses a potential/active user → Loss of revenue.
  2. Your authentication works, but you’ve exposed a vulnerability → A malicious actor uses the vulnerability to target users (say through a CSRF attack) → The malicious actor gets access to a user’s account → Causes material loss to your users → Massive reputational damage to your business.

For a functionality that’s so minimally used, the risks can be fundamental and massively damaging to a business in its entirety.

The age old answer… Open Source to the rescue

With all this in mind, it’s best not to spend so much time implementing Auth on the frontend of your app from scratch. Luckily, there are a number of open source solutions available that you can use with most of the functionality that you need out of the box.

Prebuilt Auth Solutions

We’ll take a look a 3 options and compare them on the following metrics:

AWS Amplify

AWS Amplify Logo

Amplify is AWS’s full-stack suite of tools that includes SDKs allowing you to build, ship and host web & mobile apps on AWS. There’s a lot of different tools integrated into Amplify, including prebuilt app authentication (which uses AWS Cognito under the hood).

Amplify's basic Auth UI

Source: AWS Amplify Blog

Features

Ease of Integration

import React from 'react';
import { Text } from 'react-native';
import { Authenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <Text>You're logged in! 🎉<Text/>
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

Customisability

Pricing

Firebase

Firebase logo

Firebase is Google’s Backend as a Service (BaaS) platform. It is one of the most well-known and established platforms of its kind. It comes as a full suite of services that can be used to build applications, including a document based database (Firestore), serverless functions, hosting, and analytics. It gained popularity due to its batteries-included prebuilt authentication.

Source: react-native-firebaseui-auth Github Repo

Source: react-native-firebaseui-auth Github Repo

Features

Ease of Integration

Customisability

Pricing

Clerk

Clerk logo

Clerk is the newest kid on the block, starting business in March 2020. It describes itself as a “complete user management” tool that automatically handles all of the UI and API work for your authentication. It comes with almost every feature and integration you can imagine!

Source: Clerk React Native Docs

Source: Clerk React Native Docs

Features

Ease of Integration

Customisability

Pricing

Recommendation

This part is purely subjective: Having investigated all three of these solutions, I find myself leaning towards AWS Amplify Auth for most projects. It’s got easy-to-install customisable components, with affordable pricing. Sure it’s missing some of the shiny new features and isn’t as simple as Clerk, but the pricing on Clerk is simply not competitive for any serious project that needs to scale its user base. It’s also evident that Firebase has got some catching up to do if it wants to stay relevant in the React Native sphere.

Honourable Mentions

There’s obviously a few other contenders in this race, but they don’t really focus on prebuilt UIs or don’t support it for React Native yet. Notably, I’ve used:

Wrap-up

Using one of the tools above, you should be able to get up and running with your app’s auth in a matter of hours, rather than days. The time saved can be dedicated to implementing user features that will bring actual user values. On top of that, you will feel confident that your app’s security is being insured by using a dedicated authentication library with tried and tested logic.

Feel free to reach out

If you have any opinions or suggestions, feel free to reach out to me on Twitter @mo__javad. 🙂

Mo Khazali

Mo Khazali

Head of Mobile

Theodo UK

Liked this article?