---
description: Authentication screens included in this Ionic starter app.
---

# Ionic Authentication

The authentication screens included in this ionic template are:&#x20;

* **sign up** page
* **log in** page
* **forgot password** page
* **terms and conditions** modal
* **privacy policy** modal&#x20;

In the authentication forms you can find a `show-hide` password custom component super useful for mobile screens. Learn more about this component [here](../custom-components#show-hide-password).

![Log In Screen](https://362621185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX5O9ed6QuUbQmpkuCd%2F-LZFDRwAeNilMzD7cVtr%2F-LZFD_AdMzyTIjZKzClg%2Fauthentication-1.jpg?alt=media\&token=abd315dd-b980-4319-85fc-d67c5d0e2f53)

You can find the code of this component in `src/app/components/show-hide-password`

{% hint style="warning" %}
Please note that Facebook, Twitter and Google login are not implemented in this page. They are implemented in the [Firebase Authentication section](firebase-integration/firebase-authentication).
{% endhint %}

Form Validations for password can be found inside the [**Forms & Validations**](forms-and-validations) section of the template.

### How to use authentication pages?

Each of these pages has a Form with the inputs required by the page such as username, email and password. We use [Angular Reactive Forms](https://angular-templates.io/tutorials/about/angular-forms-and-validations) from `@angular/forms` library.

#### Angular Reactive Forms

Angular reactive forms, also known as model-driven forms, offers an easy way to use reactive patterns and validations. They follow the reactive programming style that supports an explicit data management flow between non-UI data models (frequently retrieved from a server) and a UI-oriented form model that keeps the states and values of HTML controls on the app screen. Learn more [here](https://angular-templates.io/tutorials/about/angular-forms-and-validations#template-driven-forms-vs-angular-reactive-forms).

#### Modals

For the terms and conditions and privacy policy modals we use the [Ionic Modal Controller](https://ionicframework.com/docs/api/modal). It's super easy to use and customize. Basically you need to create a Component for the modal you want to show and then just display it using the Modal controller. You can find the components we created for these modals in:`src/app/privacy-policy/privacy-policy.page.ts` and `src/app/terms-of-service/terms-of-service.page.ts`

![](https://362621185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX5O9ed6QuUbQmpkuCd%2F-LZFDRwAeNilMzD7cVtr%2F-LZFDeUME9627EVDl84w%2Fauthentication-3.jpg?alt=media\&token=602c2c23-09a2-40e0-8857-b8b6a625fd8f)

#### Submit the Authentication Forms

As we mentioned before, we don't use any specific backend for this template. However, if you are going to provide a custom email/password authentication you will need a backend for this. You can try Firebase Firestore Database and use [this tutorial](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) as a guide.&#x20;
