Firebase makes it easy for developers to create applications. We can use hosting, realtime databases, cloud functions, notifications, etc. in an integrated manner only with Firebase services. We don’t need to bother renting a server or VPS to make a high-quality application innovation that requires expensive fees. Firebase offers its services for free for small-scale developers.
Google Authentication Using JavaScript
Firebase offers a variety of authentication models and one of them is authentication using a Google account that can be done using a JavaScript API. With this authentication, we don’t need to bother making a system to accommodate users themselves. All that has been made by Google through its product, Firebase.
Google Authentication Steps On Firebase
Before we can use Firebase in the application, we need to add the Javascript dependency script to our project document. The script that needs to be added to enforce this authentication is as follows:
Add Firebase Dependency
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-auth.js"></script>
Add the code above in the <head> tag in the project document that we are working on.
Adding Project Firebase Configuration
After the dependency is added, then we add the configuration code. This configuration code can be obtained from the Firebase project settings: Project Settings > Add App > Add Firebase to your web app.
The configuration code looks like this:
<script src="https://www.gstatic.com/firebasejs/4.10.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID"
};
firebase.initializeApp(config);
</script>Add the configuration code above right after the dependency code we added before.
Make the Code to Login Using Google
Below is an example for making authentication using Google.
function login(){
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
firebase.auth().languageCode = 'id';
firebase.auth().signInWithPopup(provider).then(function (result) {
// This gives you a Google Access Token. You can use it to access the Google API.
token = result.credential.accessToken;
// The signed-in user info.
user = result.user;
// ...
}).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
}Checking the User Status Already Logged In or Not
To check the status of the user whether it’s logged in or not, we can use the onAuthStateChanged () function; Examples of its use are as below:
firebase.auth().onAuthStateChanged(function (user) {
if(user==null){
login();
}else{
//user allready logged in
}
});That is a short tutorial for making Google authentication on Firebase using JavaScript. If there are codes that are not visible / missing, please visit directly through the browser because on Instant Article Facebook, usually the sample codes cannot be displayed.
