React-Native Email Authentication with Firebase

This tutorial covers the email auth method, skip to the next article for more OAuth providers as firebase does not support them out of the box for react-native yet.

If you haven’t setup your react-native app yet, you can learn how to do it in my Setting up a React-Native Cross-Platform App post.

Create a Firebase account

First step will be to head over to Firebase and create a free account.

After that, head over to Authentication and enable the Email/Password provider by clicking it and switching on the toggle.

Next step will be adding firebase to our project, I use yarn, mainly because of bugs I had lately on newer Node.JS version (8+) but you can use npm as well if you don’t have those.

yarn add firebase

Now we need to tell the firebase library: “Hey bro, when you boot up, we need to connect to my firebase bucket of data”, we do this by initializing the library with our WEB SETUP config and keys from our firebase console. (The button will be at the top right of your firebase console).

The config code should look something like this:

<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "xxxxxxx",
    authDomain: "xxxxx.firebaseapp.com",
    databaseURL: "https://xxxx.firebaseio.com",
    projectId: "xxxx",
    storageBucket: "xxxxx.appspot.com",
    messagingSenderId: "xxxxxx"
  };
  firebase.initializeApp(config);
</script>

This is built for a web environment, so we’ll need to convert it to pure JS to work with RN and add it to a react-native life-cycle method componentWillMount that is automatically invoked before it mounts the component, so we just need to define it in our component and RN will take care of the rest.

This is our updated app.js file, notice how we imported firebase at the top and used the initializeApp method with the content of the config object supplied by firebase.

Note: eslint really hates double quotes in JS, so we replace them with single-quotes.

Power Tip: if you’re using VSCode, select the first double-quote and hit CMD+D to “split” your cursor and edit all occurrences of double quotes in one go. Keep hitting CMD+D until you’ve selected all of them and edit away. ESC releases you from that mode.

Setting up our signup form in a separate component

First let’s create an input component with a title, to house our input fields for the email and password. We need to make sure it also supports SecureTextEntry for a secure password input.

TitledInput.js — to be placed inside of our component directory.

We’ve set 5 props and deconstructed the styles object for a nicer code.

Now let’s create our LoginForm.js file (component) to house our login form.

LoginForm.js

Moving on, now let’s add our login form to our App. This is a fixed implementation, after authenticating this form should go away by changing the view.

import LoginForm from './components/LoginForm'; //Goes at the top
...
<LoginForm />

Using the <LoginForm /> will inject our login form component wherever placed.

Authentication with Firebase from our form (or state vars more accurately)

Updated LoginForm.js file

You can see we’ve added a Spinner component. It only imports the ActivityIndicator component and calls it like this <ActivityIndicator size=’small’ />.

You can simply add a <Text>Loading</Text> or anything else if you want. The main point is that we have a new method that returns either a loader or a login button, set by the loading var state.

Now that you have your auth system in place, add some forever free tools to your new project to save dev time:

2019 Recap: Great Startup Tools with Forever-Free Plans

We’ve implemented a “login or signup method”, with error and success handling using firebase.

Got any questions? Hit that comment button, don't be shy…

Follow me on Twitter for updates and articles.