I encountered a challenge while developing a small task for Gmail user login and logout using Firebase authentication. The issue in my code is
Uncaught Error: [$injector:modulerr]The libraries I included are:
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://apis.google.com/js/platform.js" async defer></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script><script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script><script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>Also, I configured the firebase settings.
index.html
<html ng-app="appName">
<body ng-controller="loginCtrl">
<div id="message">
<button ng-click="googleSignin()">SignIn into App</button>
</div>
<p id="load">Firebase SDK Loading…</p>
</body>
https://i.sstatic.net/UlR9C.png
On clicking the sign-in button, a Gmail authentication popup appears. After successful authentication, it redirects to the page htmlnew.html
app.js
var app = angular.module("appName", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'assests/index.html',
controller: 'loginCtrl'
})
});
app.controller('loginCtrl', function ($scope) {
var provider = new firebase.auth.GoogleAuthProvider();
$scope.googleSignin = function () {
firebase.auth()
.signInWithPopup(provider).then(function (result) {
var token = result.credential.accessToken;
var user = result.user;
console.log(token);
console.log(user);
firebase.auth().onAuthStateChanged(function user() {
if (user) {
window.location = 'htmlnew.html';
}
});
}).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
}
});
app.controller('SecondController', [function ($scope) {
$scope.googleSignout = function () {
firebase.auth().signOut()
.then(function () {
console.log('Signout Succesfull');
}, function (error) {
console.log('Signout Failed');
});
}
}]);
htmlnew.html
<html data-ng-app="appName">
<body ng-controller="SecondController">
<div id="message">
<h1>Welcome</h1>
<button ng-click="googleSignout()">Google Signout</button>
</div>
</body>
https://i.sstatic.net/zkmtw.png
The issues faced are:
1.) Upon entering the htmlnew.html page, an Uncaught Error: [$injector:modulerr] error is thrown.
https://i.sstatic.net/B9YsV.png
2.) The Signout functionality is not working properly