Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page

Was this helpful?

Ionic Authentication

Authentication screens included in this Ionic starter app.

PreviousGetting StartedNextIonic Side Menu

Last updated 3 years ago

Was this helpful?

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 .

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

How to use authentication pages?

Angular Reactive Forms

Modals

Submit the Authentication Forms

Please note that Facebook, Twitter and Google login are not implemented in this page. They are implemented in the .

Form Validations for password can be found inside the section of the template.

Each of these pages has a Form with the inputs required by the page such as username, email and password. We use from @angular/forms library.

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 .

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

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 as a guide.

Firebase Authentication section
Forms & Validations
Angular Reactive Forms
here
Ionic Modal Controller
this tutorial
here
Log In Screen