Google FIREBASE Authentication
In this series I want to introduce you to Google FIREBASE cloud platform. During this course you will discover, that you don’t need to have ‘backend’ to create web app with database, file storage or authentication. This series consists of five parts:
- Firebase Authentication
- Firebase Realtime Database
- Cloud Firestore
- Firebase Storage
- Firebase Hosting
All examples are provided in Angular 10.
Starting your adventure with Firebase is easy. Just log in to this page and you are in ;). Next click Go to console button in the top right corner of the screen and you should see something like this.
As you can see I have already few projects. Pressing plus button will start wizard with 3 steps that will create for you new project. The steps are very simple, mainly you set the name of the new project. After creation of new project go to main dashboard and click project card. The left sidenav contains all options that you can use in this project.
Of course in this article we are interested in Authentication feature of Firebase. So let’s click on the first row of the sidenav and go thru configuration. On the sign-in method tab you can choose from 12 methods but in this course we will use the simplest, the first one (E-mail/password)
After choosing sing-in method add your user/users in users tab by clicking Add user button.
The last thing to do on Firebase website is to copy configuration of our app. So click on gear icon on the top left side of the screen. After that click project settings. Next scroll to bottom on general tab and click configuration radio button. Here you are, now you can copy whole firebaseConfig section and past to environment file in angular app.
I assume you already created angular app and you are ready to go. So first install firebase and @angular/fire npm packages. After that add
AngularFireModule.initializeApp(environment.firebaseConfig),to imports section of app.module.ts. Thanks to that angular will load your configuration of firebase app that you past earlier to enviroments file. After that you should create auth service that will handle login and logout. Here you can find a example of such service.
In gist below you can see login method. You just put login and password from UI to signInWithEmailAndPassword method that is from AngularFireAuth object provided by npm package. If password or email is incorrect method is calling snackBar from angular materiel lib. If every thing is okey we open medium page.
In constructor you can subscribe to afAuth.authState and save user data to local storage or do some other thinks before routeing user to next page.
And finally we have logout method that sing out Firebase user and removes his data from local storage. Pay attention that all of those methods are asynchronous so you must use async/await key words.
As you can see after login Firebase creates firebaseLocalStorageDb in IndexesDb and keep our fbase_key. Firebase key is very important when you use one of the Firebase database or Firebase storage. Without this key you will be unauthenticated in production ready scenarios (in testing mode you can set no authentication in your Firebase databases).
So this is basically everything , you can experiment with other methods of authentication like google or facebook. Here is the link to pricing of all Firebase services. For Spark plan (free) the basic authentication is free ;-).
In example project I used Angular 10, @angular/fire 6.0.3 and firebase 7.21.1
You can find link to example project in link section. If you have any question don’t hesitate to comment this article I will do my best to answer all questions.
