Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Thursday, July 13, 2017

302 IonicV1 Creator Sign Up and Login App Using Firebase Auth


.
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:
  1. API Key
  2. Auth Domain
  3. Database URL
  4. 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.

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