.
302 IonicV1 Creator Sign Up and Login App Using Firebase Auth
1. Prepare Firebase Server
1. Create a Firebase project in the Firebase console, if you don't have one.
2. Click Add Firebase to your web app.
Note the initialization code snippet, which you will use in a minute.
You can retrieve the above data again by following the steps below.
3. Add Firebase connection to Ionic Creator Project.
4. Enter connection details.
Required Settings:
- API Key
- Auth Domain
- Database URL
- Storage Bucket
Here's what ionic creator did for you:
Added the Firebase and AngularFire scripts to "External JS" settings
Added the "firebase" module to "Angular Modules" settings
Created a "firebase.init.js" file in "Other JS" where you can find your settings and an example.
Added the Firebase and AngularFire scripts to "External JS" settings
Added the "firebase" module to "Angular Modules" settings
Created a "firebase.init.js" file in "Other JS" where you can find your settings and an example.
2. Create Sign Up Page.
Set the Sign Up Page as default page.
Ionic Creator generates a page with a form template that consists of 3 input fields and a Sign up button.
Add four additional dummy buttons to test our codes in the next coming steps.
In the Property Panel for the components, set as follows:
Component
|
Properties
|
Name Input
|
Directive= ng-model, user.displayName
|
Email Input
|
Directive= ng-model, user.email
|
Password Input
|
Directive= ng-model, user.password
|
Sign up Button
|
Directive=
ng-click, handleSignUp(user)
|
Sign Up Button
|
Directive=
ng-click, handleSignUp(user)
|
Update Button
|
Directive=
ng-click, handleUpdate(user)
|
Sign In Button
|
Directive=
ng-click, handleSignIn(user)
|
Is Signed In
|
Directive=
ng-click, handleIsSignedIn(user)
|
Log Out Button
|
Directive=
ng-click, handleLogout()
|
3. Add Controller Codes
function($scope, $stateParams, $state, AuthService, $ionicLoading, $timeout) {
$scope.user={}
$scope.handleSignUp = function(user) {
$ionicLoading.show({
template: 'Signing Up ...'
});
AuthService.doSignUp(user)
.then(function(user) {
$ionicLoading.hide();
console.log('handleSignUp success:' + JSON.stringify(user))
//$state.go('user');
}, function(err) {
$ionicLoading.hide();
console.log('handleSignUp error:' + err)
});
}
$scope.handleUpdate = function(user) { /*update user display name only*/
$ionicLoading.show({
template: 'Updating ...'
});
AuthService.doUpdate(user)
.then(function(user) {
$ionicLoading.hide();
console.log('handleUpdate success:' + JSON.stringify(user))
//$state.go('user');
}, function(err) {
$ionicLoading.hide();
console.log('handleUpdate error:' + err)
});
}
$scope.handleSignIn = function(user) {
$ionicLoading.show({
template: 'Signing In ...'
});
AuthService.doSignIn(user)
.then(function(response) {
$ionicLoading.hide();
console.log('handleSignIn success:' + JSON.stringify(response))
//$state.go('user');
}, function(err) {
$ionicLoading.hide();
console.log('handleSignIn error:' + err)
});
}
$scope.handleIsSignedIn = function(user) {
$ionicLoading.show({
template: 'Checking Logged user ...'
});
AuthService.isSignedIn(user)
.then(function(response) {
$ionicLoading.hide();
console.log('handleIsSignedIn success:' + JSON.stringify(response))
}, function(err) {
$ionicLoading.hide();
console.log('handleIsSignedIn error:' + JSON.stringify(err))
});
}
$scope.handleLogout = function() {
$ionicLoading.show({
template: 'Logging out ...'
});
AuthService.doLogout()
.then(function(success) {
$ionicLoading.hide();
console.log('handleLogout success');
}, function(err) {
$ionicLoading.hide();
console.log('handleLogout error');
}).finally(function() {
$ionicLoading.hide();
});
}
}
|
4. Add Service Codes
service.js
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('AuthService', ['$q', function($q){
this.doSignUp = function(user) {
var deferred = $q.defer();
authService = this;
firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
.then(function(response) {
console.log('doSignUp response:' + JSON.stringify(response));
deferred.resolve(response);
// After signup we should automatically login the user
authService.doSignIn(user)
.then(function(response) {
console.log('doSignUp success');
deferred.resolve(response);
}, function(error) {
// error
console.log('doSignUp error');
deferred.reject(error);
});
}).catch(function(error) {
console.log('doSignUp catch:' + error);
deferred.reject(error);
});
return deferred.promise;
}
this.doUpdate = function(userupdate) {
var deferred = $q.defer();
var user = firebase.auth().currentUser;
var displayName=userupdate.displayName||'';
var photoURL=userupdate.photoURL||'';
if (user) {
// User is signed in.
user.updateProfile({
displayName: displayName,
photoURL: photoURL})
.then(function() {
console.log('doUpdate profile was updated:' + JSON.stringify(user));
deferred.resolve(user);
}).catch(function(error) {
console.log('doUpdate profile was not updated:' + JSON.stringify(error));
deferred.reject(0);
});
} else {
deferred.reject(0);
}
return deferred.promise;
}
this.doSignIn = function(user) {
var deferred = $q.defer();
firebase.auth().signInWithEmailAndPassword(user.email, user.password).then(function(response) {
console.log('doSignIn response:' + JSON.stringify(response))
deferred.resolve(response);
})
.catch(function(error) {
console.log('doSignIn error:' + error)
deferred.reject(error);
});
return deferred.promise;
};
this.isSignedIn = function() {
var deferred = $q.defer(),
authService = this,
signedIn = (authService.getUser() !== null);
console.log('userisloggedin:' + signedIn)
deferred.resolve(signedIn);
return deferred.promise;
};
this.getUser = function() {
var user = firebase.auth().currentUser;
if (user) {
// User is signed in.
console.log('user is signed in:' + JSON.stringify(user));
return user;
} else {
// No user is signed in.
console.log('no user is signed in');
return null;
}
};
this.doLogout = function() {
var deferred = $q.defer();
firebase.auth().signOut().then(function() {
// Sign-out successful.
console.log('sign out successful');
deferred.resolve(1);
}).catch(function(error) {
// An error happened.
console.log('an error happened');
deferred.reject(0);
});
return deferred.promise;
};
}]);
|
DOWNLOAD
REFERENCES
Additional References:
.
No comments:
Post a Comment