![electron.fw.png](https://cdn.steemitimages.com/DQmb7azVzVTo9UXaTUxAtmgDLUpP4kaoQX5X9a8ZTCP3U8b/electron.fw.png)
<br>
# 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>
```
<br/>
Since the previous tutorial de '/' is mapped to the login.html page, the login page will open when the electron application is executed.
![electron1.JPG](https://cdn.steemitimages.com/DQmZT9kGEMyKgfgdysMeTBSknZb4HRLCYfKSss2FraxjS7u/electron1.JPG)
<br>
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){
}
```
<br>
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
        })

    }
});
```
<br>
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>
```
<br>
First create a user within the `Firebase Authentication` page because we did not improve the signup feature in application.
![electron2.JPG](https://cdn.steemitimages.com/DQmZEKgFEiXcKCmkx2iDtmFugCoPjyecZsu4rDxnscYh3dN/electron2.JPG)
<br>
Let's run the application and login with `pckurdu@pckurdu.com` mail Address.
![electron3.JPG](https://cdn.steemitimages.com/DQmQUpNMWzA9gXFQyGPTRP6LjRHL7QqRmvGNmXdFQZzgpBG/electron3.JPG)
<br>
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
        });
    }
});
```
<br>
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.
![electron4.JPG](https://cdn.steemitimages.com/DQmY7F7mWasVUeNQ8M1pH77dAQbPF2Uh5NvE9DbMCFopghz/electron4.JPG)
<br>
We can see that our user has been added on firebase.
![electron5.JPG](https://cdn.steemitimages.com/DQmXJwaMXwEdvhYiR2tDsf8dDTytSZLuKMV791rQEYPeH8d/electron5.JPG)
<br>
Thus we have defined the firebase authentication properties on our electron application.
![electron-firebase-part2.gif](https://cdn.steemitimages.com/DQmXoT9aNdeqL9arnCcVeGS2Z8NahSCgeq6RuiCdaFcNzpx/electron-firebase-part2.gif)
<br>
# 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