In this video, we’re going to look at how to set up a Firebase Authentication in an Ionic application built with StencilJS. I’ve already created an Ionic PWA using StencilJS and the Ionic PWA starter kit.
That’s a project I’ve got up now. If you don’t have a Stencil project that you can work on already you should go ahead and create one. I’ll link to some resources for that if you need it. Using the Ionic PWA Toolkit
What we’re going to do first is set up our Firebase project. What’s useful about Firebase is that it’s a database as a back-end service so we can set up things like authentication and using databases really easily because everything is handled through the service. Then we just need to interact with it through our application or through our back-end whenever we want to. One of the main benefits of using a service like this is that everything is provided for you out of the box. You don’t need to implement your own sort of complicated authentication scheme. The downside, of course, is it’s a paid service and there are some other things to consider as well but we’re not going to get into that in this video. As you can see I already have a project set up in here but I’m going to walk through the process of creating a new project in Firebase and setting up authentication.
What you’re going to do is come to the Firebase website console.firebase.google.com up here and if you have a Google account you should already be logged in and you’ll be able to see the screen that I’m looking at here. If not, obviously, you’re going to need to create an account. Once you’re here just click on the Add Project button and then it’s just going to give you some options here. So, we’ll just call this Stencil Firebase Example - you can call yours whatever you like. Then you can see we have locations and stuff here where the servers are going to be. I’m not really going to worry about any of that and we can just accept these conditions here and then click Create Project.
It’s going to create our project for us and once it’s done we’ll jump into implementing the rest of it. Okay, that’s all complete now it says your new project is ready. Let’s click Continue to jump into our dashboard and here you’ll see a whole bunch of things. First, we’ll notice we’re on the Smart Plan so this is free to use up to a certain amount of usage and then you need to start paying for it. If you look over on the left here you can see Authentication at the top which is what we want to use in this example but there are also other things like Database, Storage, Hosting, Functions which you can all use in your projects as well. We’re just going to be focusing on Authentication for this but likely in future videos we’ll cover some other things.
Before we get into the actual authentication, you can see here it says ‘add an app to get started’. What we need to do is connect Firebase to our application. We’re working with a SetencilJS application that is web-based so we are going to choose the little web icon here and if you click on that it gives you some information on how to configure Firebase in your project. You can see here it says ‘to include the script tag’ and then there’s the script here to run to configure your application. Since we are using StencilJS and Ionic and we’re using ES6 modules and things like that we can still use the script tag if we like. What we’re going to do instead is npm install this into our project so we get things like type checking and all the important stuff that you are used to using in a typical sort of Ionic application. What we’re going to need to do is open up the command prompt here in the terminal and we are just going to run
npm install firebase
Save and that is going to install that into our project. Okay, that’s finished installing now so we can come back into the Firebase website and we have the Firebase SDK installed into our application but we still need to configure it. What we’re going to do is copy the code from ‘Add Function to your web app’ and we’re going to paste it into our project.
So, I’ve already set up an auth service that we’re going to make use of here and I’ll talk a little bit through the rest of this in just a second. If you aren’t familiar with using a Singleton Services like this in your StencilJS applications I’ll link to a tutorial that I wrote recently that you can check out StencilJS Singleton Services. Just get the general idea behind what’s going on here in terms of creating a class and then exporting this service here. The basic idea is that this is something that we’re going to be able to use throughout our application to call our authentication function. You can see at the top here we have
import firebase from "firebase/app";
We’re importing Firebase auth as well so that’s coming from our Firebase SDK that we just npm installed and now, we need to configure it.
Inside of our constructor here for the service we’re calling
this.init(); and what we’re going to do at top of this method here we’re going to add in our configuration code that we just copied from Firebase. And we will change var to a const.
We have our API key here which is going to allow our application to authenticate against our project in Firebase so it knows it’s us. Obviously, this API key being a front-end code is going to be public so people are going to be able to see that so you have to make sure you set up the proper security rules and stuff like that depending on what you’re doing in your application. That’s not something to get into in this example, we’re just doing some really really simple authentication here. This will all be your own information in here you will have copied from Firebase, don’t copy what I have here. Then we call
firebase.initializeApp(config); and we are suppling that config. With that done, it’s going to connect our application to our Firebase project so we’re going to come back and look at the rest in this class here in just a moment.
For now, I’m just going to save that and we’re going to jump back into the Firebase project here and we’re going to set up authentication. If we come over to the menu over here and we click on the Authentication option we’re going to see a screen here and what we want to do is click on Setup a sign-in method and then you’re going to get a whole range of different ways that you can allow your users to sign in. A lot of these are auth-based so we can sign in with Google, Twitter, Facebook, Github, etc. where basically they’re going to be going to those services and clicking ‘allow’ in order to sign in to your application. What we’re going to do is create an anonymous user. What this does basically is it lets people authenticate without providing any sort of credentials and then they can use your application. They’ll have an ID as if they’re logged in and we can treat them like a logged in user but they don’t actually have any sort of account. This is just an easy thing to use for an example but it is possible to convert these anonymous accounts into full accounts later if you want to. What we’re going to do is just click the little Edit button that says ‘enable an anonymous guest account in your application’ which lets you enforce user-specific security and Firebase rules without requiring credentials from your users so we’ll just enable that. Save and then that’s going to allow us to run that anonymous authentication method. With that setup here, that’s all we need to do in the Firebase project.
Now, we can jump back into our code and let’s just quickly talk through what is happening here. Inside of our class here we’ve set up a user which is of the type
firebase.User which is what Firebase is going to return to us when a user authenticates. We have the initialization going on here. After we have initialized, we call
firebase.auth().onAuthStateChanged and so this is going to run when the user logs in or logs out. That’s going to allow us to set this user appropriately so that information is going to be available through the service. Then we also have a logInAnon method here and what this does basically is call the signInAnonymously method from Firebase auth. This is just going to trigger that process that’s going to go through that anonymous authentication that we just set up. Basically, nothing is going to happen on the user’s end. They’re just going to click a button and they’re going to be authenticated automatically and so once that happens that’s going to return the users information, you’re going to get an object back with their ID, and just a whole bunch of other information which we’re going to take a look at in just a second. We will just log that out somewhere for now. What we need to do now that we have this service which was exporting so it’s going to be available through our application. We’re just going to implement a simple login method on our Home Page and we’re just going to trigger this function and see what sort of data we get back from Firebase.
I’m just going to jump into the home component and I’ve already set up an
ion-button here and so all we’re doing is triggering this.login on click which is this function here and all we do is call the AuthService and call the loginAnon method. We wait for that to complete and then we log out the user that gets returned from that so that’s going to be that user credential information that I just mentioned.
We’ll make sure this is all saved and now we’re going to run this in the browser and hope that everything works. To run the project we’ll hop back into the command line and run
npm run start
That’s going to compile and load up in the browser.
I have my test login button now which I’m going to click and cross my fingers. You can see here, after just a second or two we get a new log statement popping up here and we get that user’s information. This is an anonymous user so there’s not going to be a whole lot here but if we scroll through here we can see they have a user ID. There’s information about the Firebased project there. There is profile information here. You have things like an email display name, email verified, and things like that which if you’re using a different authentication method that would be some data here you can also set this information for an anonymous user. Again, not something we are going to get into in this video, I just wanted to show a really simple example of using Firebase authentication with a StencilJS project. With just a few lines of code I was very easy to configure that in here and our service here. All we really need to do is after we initialize it is just make this call to this simple method here and we can authenticate a user and then do whatever we like with that.
As I mentioned I’ll probably do more videos on Firebase. I will do some Firestore videos and things like that in the future but I hope this video was helpful. If you did like it please do feel free to like and subscribe and I’ll see you in the next video.