Firebase firestore in the forum application #3:Logout function and Login with facebook account

Repository

https://github.com/firebase

What Will I Learn?

• Log out function
• Connect Facebook login with Firebase
• Login with facebook account

Requirements

• Basic Javascript
• Install Firebase

Resources

• Firebase-https://firebase.google.com/

Difficulty

Basic

Tutorial Content

This tutorial is a continuation of the previous tutorial series. In the previous tutorial, we have learned about authentication with Gmail and some of the features we have activated in Firebase and we have also implemented routing systems and templates on our forum applications. In this tutorial, we will continue the auth system that we have created. For that, we just start the tutorial.

Log out in Gmail

In the previous section, we have successfully logged in with Gmail. Login function in Gmail, only to log in and after logging in we haven't done anything, just alert(). If you have successfully logged in, then we can see that the account has been registered in the Auth database in Firebase. we can see the example below:

Well, we will continue the next feature, which is how we log out with Gmail. Before making the function, we have to make the interface first. for that, I will make a button. here's how.

views/home.hbs

<div class="jumbotron">
  <h1 class="display-4">Hi, Welcome to forum app in firebase!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
   <button class="btn btn-danger" type="button" name="button" onclick="login()">Login Gmail</button>
   <button class="btn btn-success" type="button" name="button" onclick="logout()">Log out</button>
  </p>
</div>

In the home.hbs template, there is an additional button to log out, the onclick() function will be added on that button onclick="logout()". We can see how the interface is as we saw in the picture below:

• Add Logout function

We have defined the logout function on the interface, now we will make it function like the following example:

auth.js

function logout() {
    auth.signOut().then(function() {
        alert("Successfully logged out..");
    });
}

To log out, we still use the method that is on firebase auth which we have defined in the var auth = firebase.auth ();. So by accessing the auth variable, we can use the functions that are on firebase auth. to log out we can use the signOut() function. In this logout function, we will alert () only to indicate that our logout has been successful, for more details, we can see the picture below:

Login with Facebook

The next part we will continue authentication by using a Facebook account. this is part of the continued auth that we have made before. To activate the login with our Facebook page, open the Firebase console. in this firebase console, we will activate how to sign in with the method.

• Facebook login on developers.facebook.com

To use the Facebook login feature, we have to make apps first on developers. Facebook.com. In this section, we will create an app on Facebook so we can use the Facebook login. You should be able to visit it at https://developers.facebook.com. Please log in and after some verification, you can see the dashboard from the facebook app as you can see in the picture below:

Choose features

Facebook provides many features that we can use. in this application, we will use the facebook login feature. After we choose facebook login, then we will be told to choose what platform we will use. In this tutorial we will use the WEB :

Choose platform

After you choose the web, Facebook will ask for the URL of our site, because we use Firebase hosting, we can use hosting that has been given firebase as we can see in the picture below:

Well, a little more settings we will be able to use the login feature with facebook. then we will do a set on the firebase auth dashboard.

Firebase with facebook auth synchronization

On the Firebase Auth Dashboard when you want to use Facebook login, you have to enter the App ID and App Secret that you get from Dashboard developers.facebook.com. For more details, we can see in the picture below:

we can see the App Id and App secret there are in settings->basic. After we get the App ID and App Secret we can enter it in the Firebase console on the Facebook section of the dashboard auth. like the picture below:

Well now our facebook and firebase auth are connected, now what we will do is how to use them on our forum application.

Use Facebook login

We have made settings on facebook and firebase now we will use it on the application that we made. In the application section, we created we have to create a button for the user interface. for more details, we can see the code below:

views/home.hbs

<div class="jumbotron">
  <h1 class="display-4">Hi, Welcome to forum app in firebase!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
   <button class="btn btn-danger" type="button" name="button" onclick="login('gmail')">Login Gmail</button>
   <button class="btn btn-primary" type="button" name="button" onclick="login('fb')">Login FB</button>
   <button class="btn btn-success" type="button" name="button" onclick="logout()">Log out</button>
  </p>
</div>

In the code above we will still use the same function, namely the login(). here will create a new button that is <button class="btn btn-primary" type="button" name="button" onclick="login('fb')">Login FB</button>.

In the login() we will pass the 'gmail' parameter to log in with Gmail and 'fb' to log in using Facebook. We will make a switch () {} to choose what provider we will use when logging in, here is an example:

assets/js/auth.js

var auth = firebase.auth();

function login(provider) {
    switch () {
        case 'gmail':
            var provider = new firebase.auth.GoogleAuthProvider(); break;
        case 'fb':
            var provider = new firebase.auth.FacebookAuthProvider(); break;
        default:
    }

    firebase.auth().signInWithPopup(provider).then(function(result) {

      alert("Successfully logged in..");
    }).catch(function(error) {
      console.log(error)
    });
}

function logout() {
    auth.signOut().then(function() {
        alert("Successfully logged out..");
    });
}

There is no difference in the function we are going to use, the only thing that is different is the method used to log in. If you log in using Gmail then you can use the new firebase.auth.GoogleAuthProvider (); and if you use Facebook you can use the new firebase.auth.FacebookAuthProvider ();.

We can run the server in firebase with the command firebase-server --- only functions, hosting. If there is no error then we can see the results as shown below:

As we saw in the demonstration above we have succeeded to log in using Facebook and When we want to log in with Facebook, Facebook asks for confirmation to retrieve your data. We can see the data that we get from Facebook users.

Curriculum

• Forum app

Firebase app#1

Proof of work done

https://github.com/milleaduski/firebase-forum