enappd loader


Implement Anonymous login in Ionic 4 Apps with Firebase



In this post, you will learn how to implement anonymous login in Ionic 4 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 Ionic 4 app and test.

Complete source code of this tutorial is available in the Ionic-4-firebase-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 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.

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

What is Ionic 4?

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

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

STEPS

  1. Create a Firebase project
  2. Create a simple Ionic 4 app
  3. Connect the Ionic app to Firebase
  4. Implement anonymous login using AngularFire2
  5. Convert anonymous user to a regular user

We have two major objectives

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

Since this is an example in Ionic 4, you can avoid Step 6, and complete your testing on browser itself. Let’s dive right in ! 



Woah ! where did he dive in 😛

Step1 — 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



Firebase dashboard with your projects

Note — It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of this blog

Enable Anonymous login

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



Enable anonymous login in Firebase

Step 2 — Create a simple Ionic 4 app

I have covered this topic in detail in this blog.

In short, the steps you need to take here are

  • Make sure you have node installed in the system (V10.0.0 at the time of this blog post)
  • Install ionic cli using npm
  • Create an Ionic app using ionic start

You can create a blank starter for the sake of this tutorial. On running ionic start blank , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

With slight modifications, my app’s login page looks like this (fancy icon 🔥, huh)



Login page

Simple and sweet, just two buttons

This is what we’ll do

  • User logs in anonymously → goes to Home Page


Home Page
  • User clicks “I want to sign Up” to link his/her credentials with the anonymous account. Email and password fields are provided to user. User signs up. 


  • User then logs out, and logs back in with the credentials he/she connected to the anonymous account


User can log back in with credentials

We’ll see the code for this in subsequent steps

Step 3 — Connect the Ionic app to Firebase

Copy Firebase config

Details of this step can be found in our blog How to integrate Firebase in Ionic 4 apps

First, copy your Firebase config information from your Firebase console and paste it in environment files in your Ionic 4 app. The environment file will look like this



To connect the app to Firebase, and use the Firebase methods, we’ll use AngularFire2 package. Install the package using

$ npm install firebase @angular/fire --save

Import angularFire2 and your environment in app.module.ts 


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

Step 4 — Implement anonymous login 

In login.page.ts we’ll import angularFire2, and write a method to login anonymously. Our file will look like following


When user clicks “Anonymously Login”, login function is called. It uses auth.signInAnonymously() method of AngularFire2 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 user. So you don’t lose the data and easily convert the user to a regular user. 

Following is 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 ! Let’s test that by logging out.

Logout


Test normal login

Go to login page, and allow the user to enter email and password for login. Following function can be used to login a user with already existing credentials


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



Anonymous login and linking user credentials in Firebase

Conclusion

In this blog, we learnt how to implement anonymous login in Ionic 4 using Firebase. We also learnt 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 Ionic-4-firebase-anonymous-login

Next Steps

Now that you have learnt the implementation of Firebase anonymous login in Ionic 4, you can also try

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



Use Ionic 4 Full app for your next awesome app



Title
Subtitle
Kicker



SHARE BLOG

PUBLISHED BY

firebase-anonymous-login-in-ionic-4

Abhijeet Rathore

Co-founder, Enappd

ENAPPD