Ionic 5 Full Starter App
IonicThemesBuy NOWLive Preview
Search…
What is Ionic 5 Full Starter App?
About this template
Template versions
Set up the development environment
Running the app
How to use this template?
Capacitor
Code Structure
Data Integration
Theming
Progressive Web App
Navigation
Server Side Rendering (SSR)
Splash Screens and Icons
App Shell
Custom Components
Walkthrough (or tutorial)
Categories
Firebase Integration
Google Maps & Geolocation
Video Playlist
Multi Language
Getting Started
Authentication
Side Menu
Profile
Contact Card
Social Sharing
Notifications
Forms and Validations
Filters
FAQs
Common Errors and Solutions
Glossary
Upcoming features
Changelog
Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered By GitBook
Authentication
Authentication screens included in this Ionic starter app.
The authentication screens included in this ionic template are:
    sign up page
    log in page
    forgot password page
    terms and conditions modal
    privacy policy modal
In the authentication forms you can find a show-hide password custom component super useful for mobile screens. Learn more about this component here.
Log In Screen
You can find the code of this component in src/app/components/show-hide-password
Please note that Facebook, Twitter and Google login are not implemented in this page. They are implemented in the Firebase Authentication section.
Form Validations for password can be found inside the Forms & 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 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.

Modals

For the terms and conditions and privacy policy modals we use the Ionic Modal Controller. 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

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 as a guide.
Previous
Getting Started
Next
Side Menu
Last modified 1yr ago
Copy link
Contents
How to use authentication pages?