Repository

Electron Github Address

https://github.com/electron/electron

AngularJs Github Address

https://github.com/angular/angular.js/

My Github Adress

https://github.com/pckurdu

This Project Github Address

https://github.com/pckurdu/Build-Application-Using-Firebase-With-Electronjs-Part-2

What Will I Learn?

• You will learn ng-model and ng-click
• You will learn $location service in Angularjs
• You will learn $rootScope in AngularJs
• You will learn Firebase email / password authentication
• You will learn Firebase signInWithEmailAndPassword() method
• You will learn Firebase createUserWithEmailAndPassword() method

Requirements

• text editor (I used visual studio code)
• Basic javascript information
• Basic electron information
• Basic angularjs information

Difficulty

• Basic

Tutorial Contents

Hello to everyone,

I created the infrastructure of the desktop application using firebase in previous tutorial.

In this tutorial we will use firebase authentication and cloud firestore in the application.

We'll create a login page and we'll ask the user for an email address and password.

If the user is not registered, we will perform the registration and if they are registered we will perform the login.

We'll create a dashboard page and we'll redirect the user to the dashboard page if the entry is done correctly where we'll add the article to the user and view a list of the articles he added.

Let's start by creating the login page

Create Login Page

Create the login.html page .

I'll use two form controls on this page, the user's email address and password will be learned through these inputs.
ng-model is used to learn the data written into the input in angularjs. The ng-model provides two-way binding and changes within the input if this variable is changed within the controller.

After creating input groups, I will add two buttons, these buttons allow user to signup or login.

With ng-click, we can define the function to be executed when the button is clicked.

After this information, create the login.html page as follows.

In login.html

<form class="container">
    <div class="form-group">
      <label for="username">Mail Address</label>
      <input type="username" class="form-control" id="username" ng-model="username" >
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" ng-model="password">
    </div>
    <button type="submit" class="btn btn-success" ng-click="login()">Login</button>
    <button type="submit" class="btn btn-primary" ng-click="signup()">Sign Up</button>
</form>

Since the previous tutorial de '/' is mapped to the login.html page, the login page will open when the electron application is executed.



Of course this is just the image :)

For firebase operations, the controller settings of this page must be set and the functions must be coded.

Let's open the script.js file and create the controller of the login page.

Create loginCtrl

In angular routing settings, we have set the controller name of the login page as loginCtrl.

app.controller('loginCtrl',function($scope,$location,$rootScope){
}

If login and signup operations are performed correctly, we will use the $location service because we need to routing to the dashboard page.

With the $location service, we can move from one page to another.

The dashboard page only needs to be opened when the user logs in. This is why we will use the $rootScope object.

Since the $rootScope object is an angular application object, it can use all controllers.

I will set the $ rootScope object to true when the user logs in or creates a membership in loginCtrl.

If this is $ rootScope is true in dashboardCtrl, I will open the dashboard page.

Create login Function

In script.js

app.controller('loginCtrl',function($scope,$location,$rootScope){

$rootScope.auth=false;//I created auth object from rootScope and set it to false as initial

    $scope.login=function(){//the function that will work when the login button is clicked

        auth.signInWithEmailAndPassword($scope.mail,$scope.parola).then((res)=>{//the function that controls the user in the firebase

            $rootScope.auth=true;
console.log(res.user);
            $location.path('/dashboard');//if the user has a firebase, go to the dashboard page
        })

    }
});

Let me explain what we did at loginCtrl.

I generated auth object from $rootScope and I did false first.

I created the login function and checked the presence of the user using the auth object from firebase-auth.

In the firebase, we check the user's presence with the signInWithEmailAndPassword () function.

This function requires two parameters to be entered. The first parameter is the user's e-mail address to be checked. The second parameter is the user's password.

We already created this information with the ng-model.

If the user is in the firebase then the then() function will work.

I can access the firebase information with the res variable I have defined in the then() function.

User information can be accessed by saying res.user.I printed this information to the console and set the $rootScope.auth object to true.

Let's create a dashboard.html and test the code we've written.

In dashboard.html

<p>Dashboard</p>

First create a user within the Firebase Authentication page because we did not improve the signup feature in application.



Let's run the application and login with [email protected] mail Address.



We can access the user's information when the correct entry is made.

Create signup Function

app.controller('loginCtrl',function($scope,$location,$rootScope){
…
    $scope.signup=function(){//the function that will work when the signup button is clicked

        auth.createUserWithEmailAndPassword($scope.username,$scope.password).then(res=>{//the function that adds user to firebase
            console.log(res.user);
            $rootScope.auth=true;
            $location.path('/dashboard');//if the user has a firebase, go to the dashboard page
        });
    }
});

In the signup function, we create the user who does not exist in the firebase.

The createUserWithEmailAndPassword() function is used to create users with email / password.

If no error occurred when this function is running, the user sends information back in the then() function.

There is not only email authentication in firebase. You can register the user using facebook, twitter, Google and github authentication in your applications.

Then let's run our application and create a new user.



We can see that our user has been added on firebase.



Thus we have defined the firebase authentication properties on our electron application.

Curriculum

https://steemit.com/utopian-io/@pckurdu/build-application-using-firebase-with-electronjs-part-1

Proof of Work Done

https://github.com/pckurdu/Build-Application-Using-Firebase-With-Electronjs-Part-2