Anonymous login in React Native Apps with Firebase

---

In this post, you will learn how to implement anonymous login in React Native apps using Firebase. We will also learn how to link an existing anonymous login with a new set of email password, so an anonymous user can convert into a normal user. We will implement these in a simple React Native app and test on device.

Complete source code of this tutorial is available in the react-native-anonymous-login

What is Firebase?

If you don’t know much about Firebase … you need to catch up with latest tech news. Firebase is the popular stuff in the market today. One can use Firebase to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.

The most used feature of Firebase is as a back-end. But along with back-end, Authentication features of Firebase are a must to use. So, essentially Auth becomes the most used feature by default.

Firebase Authentication Methods

Firebase provides a number of login methods — Email/password, social logins and anonymous login.

Yes! anonymous login. Sounds strange right?

Anonymous login is a special type of login Firebase provides, where the user does not provide any login info from their end. Firebase creates a random ID and logs user in the app. If the user wants to convert to a regular user at a later point, Firebase provides a way to link the anonymous account to a normal credential as well.

Anonymous login allows users to browse an app without sharing their identity, and later convert to a normal user if they want to

That being said, I’m sure you are very much interested in learning all kinds of login in React Native with Firebase. You can check out our Firebase social logins with Facebook, Google and Twitter blogs on our site, along with free starters ( 👻 woohoo ! )

What is React-Native

TLDR; — React Native (RN) apps are more “native” than webview apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.

React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React Native applications render using real mobile UI components, not webviews, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. Facebook, Palantir, TaskRabbit etc are already using it in production for user-facing applications.

Post structure

We will go in a step-by-step manner to explore the anonymous login feature of Firebase. This is my break-down of the blog

Major objectives

1. Anonymously login a user
2. Link an anonymous user to an email/password account, so user can login with those credentials

Overall app flow

STEPS

1. Create a Firebase project
2. Create a simple React Native app for login purpose
3. Connect the React Native app to Firebase
4. Implement anonymous login using Firebase
5. Convert anonymous user to a regular user

So let’s dive right in!

Step 1 — Create a Firebase project

If you have ever used Firebase, you can skip to next step. For beginners, you can create a Firebase project by going to Firebase console (sign-in if it asks you to). Create a new project or select an existing one. Your Firebase console dashboard should look like this

Note — It’s really easy to create a Firebase project, but if you still face any issue, follow this blog. Note the Firebase config parameters, which we’ll use later.

Enable Anonymous login

Once your project is created, go inside the project. Go to Authentication tab, and you need to toggle Anonymous login Enabled

2. Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.61.5 & node 10.16.0

Create a blank react-native app

$ react-native init RNAnonymousLogin

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Create the Login page and home page (after log in) similar to what is shown above. You can copy the code from the attached Github repository.

Step 3: Running the app on a device

To run the iOS app, you should specify simulator

$ react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first, either via Android Studio or adb , then call

$ react-native run-android

You’ll see the default start screen

You can use the code provided in the attached Github repository to change the default page to look like the UI we planned earlier. Now the login page looks like this.

Simple and sweet, just two buttons.

As per the plan, next steps are

1. User logs in anonymously → go to Home Page
2. User clicks “I want to Sign Up” to link his/her credentials with the anonymous account. Email and password fields are provided to the user. User signs up.
3. User then logs out, and logs back in with the credentials he/she connected to the anonymous account

Code for all these pages can be copied from the attached Github repository

React Navigation

To implement login functionality, we will navigate from login page to home page, and vice versa when logging out. To implement this, we need react-navigation library. This library helps in navigating in a react-native app.

Follow the installation steps of react-navigation from the official documentation.

Steps I used are

$ npm install react-navigation
$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
$ npm install react-navigation-stack

I didn’t modify the build.gradle and MainActivity.java files as mentioned in the documentation. But try that if the above alone doesn’t work for you. For the app’s navigation code, use App.js from the attached Github repository.

Step 4— Connect the React Native app to Firebase

Install Firebase in the project using

$ yarn add firebase

Create an environment directory inside the root folder. Add the firebase configuration in a new file inside environment/config.js . In config.js file, we will

• Import Firebase
• Input Firebase config parameters we picked from Firebase console
• Initialize Firebase app and export for authentication

Here’s the full code of Firebase config.js file

With this, your app is now equipped with Firebase. Next, we’ll write the functions for anonymous login, logout, linking credentials and signing in with normal credentials.

Step 5— Implement anonymous login

In LoginPage.js we’ll import firebaseAuth fromconfig.js, and write a method to login anonymously. Our file will look like following

When user clicks “Anonymously Login”, signIn function is called. It uses auth.signInAnonymously() method of Firebase auth module. This signs in the user anonymously.

Your user is now logged in, but still anonymous. User can browse features of your app and take a call on becoming a regular user. First objective is achieved 😎 So easy, right?

Step 4 — Convert anonymous user to a regular user

In HomePage, we will provide the user an option to convert to a regular user. User can enter email/password details and signup as a regular user. This will connect all the data of the anonymous profile with the new credentials of the user. So you don’t lose the data and easily convert the user to a regular user.

The HomePage.js looks like following, along with the function for converting anonymous user to regular user

The email and password above are entered by the user. If the response goes to success, your user is successfully linked to the new credentials!

Logout

You can Logout using the logout function above, included in the HomePage.js file.

Test normal login

Go to login page, and allow the user to enter email and password for login. firebaseAuth.signInWithEmailAndPassword function can be used to login a user with already existing credentials. This is already included in LoginPage.js code above.

You’ll see that the user is logged in with the linked credentials. Although we don’t have any data associated with the anonymous user to show the linking, but if your app does, the user signed in with Email/password will stay connected to that data as well.

Overall, the process will look something like this

Tada ! You have learnt how to implement anonymous login in React Native app using Firebase. 🎉

Complete source code of this tutorial is available in the react-native-anonymous-login

Conclusion

In this blog, we learned how to implement anonymous login in React Native using Firebase. We also learned how we can connect an anonymous user to a new user with Email/password account. This way you can allow a user to anonymously login to the app, browse the features, and then signup if he/she likes, without losing the anonymous account data!

Complete source code of this tutorial is available in the react-native-anonymous-login

Next Steps

Now that you have learnt about setting up Apple Pay in React Native apps, here are some other topics you can look into

• Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
• How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
• Payments — Apple Pay | Stripe payments
• Authentication — Google Login| Facebook login | Phone Auth | Twitter login
• Create Instagram / Whatsapp Story Feature in React Native
• React Native life cycle hooks | Implement Redux | Async actions with Redux
• Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

This blog was originally published on enappd.com