0% found this document useful (0 votes)
42 views21 pages

Ionic - Authentication With Firebase

This document discusses using Firebase authentication with Ionic apps. It covers setting up a Firebase project, adding Firebase to an Ionic app, and implementing user registration and login using email/password authentication with Firebase. Key steps include installing Firebase and Angular packages, configuring the Firebase SDK, creating authentication services, and using reactive forms to handle registration and login in Ionic pages.

Uploaded by

Material Eazie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
42 views21 pages

Ionic - Authentication With Firebase

This document discusses using Firebase authentication with Ionic apps. It covers setting up a Firebase project, adding Firebase to an Ionic app, and implementing user registration and login using email/password authentication with Firebase. Key steps include installing Firebase and Angular packages, configuring the Firebase SDK, creating authentication services, and using reactive forms to handle registration and login in Ionic pages.

Uploaded by

Material Eazie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Ionic – Authentication with

Firebase
Objectives
In this session we will:
 Learn about Firebase
 Register users using email & password
 Log into the system with email & password
Firebase
– Firebase is a handy cloud-based backend as a service.
– It offers wonderful documentation & features for building swift web &
mobile applications.
– It comes with Firestone & Real-time database services, simple
authentication, excellent storage, handy functions & nice dashboard
for monitoring data & analytics.
– Firebase allows us to create various types of authentication. These
range from email/password, Google, Facebook, GitHub, Twitter, Yahoo,
Microsoft….
Firebase Cont…
• Visit https://firebase.google.com/ in order to access Firebase.
Firebase Cont…
• Click get started & create a new project.
• Provide project name

• Once the project is created, you will be directed to Firebase dashboard.


Firebase Cont…
• To add Firebase to your Ionic app, make a selection as per the below
screenshot.
Firebase Cont…
• Provide the apps’ name
Firebase Cont…
• Copy Firebase configuration keys. These are needed to connect ionic to
Firebase.
Firebase Cont…
• Head over to Authentication section & open the Sign-in method tab. Here, we
see multiple authentication methods. Enable every method that you want to
use.
Registration
• After creating an Ionic App, install Firebase & Angular packages: npm install
firebase @angular/fire.
• Open the environments/environments.ts file & add the Firebase keys as the per
the below screenshot.
Registration Cont…
• Register Firebase modules in app.module.ts file. Open the app.module.ts file &
import AngularFireModule, AngularFireAuthModule & environment.
• Add three of those modules in the imports array.
Registration Cont…
• Create a Firebase authentication service to be used in the app.
• Create a shared folder, then run the following command to generate the
service: ng generate service ionicAuth ( ionicAuth is the name of service, can be
any name).
• Open add the following code in the ionic-auth.service.ts file. (see next
page)
• Create three pages, for Login, Registration & Dashboard.
Registration Cont…
Registration Cont…
• We make use of reactive forms api, make sure to register ReactiveFormsModule in
the register.module.ts file.

• Create the form group to get user-provided values & access the createUser()
method, passing user details & setting up a function to navigate to the login page.
Registration Cont…
Registration Cont…
Registration Cont…
• Head over to the register HTML template & create the basic form. Define the
FormGroup & use the ng-container to show the errors for the user registration
page.
Login
• We have to create the form in the login template, hence import
ReactiveFormsModule in the login.module.ts file.

• In the login.page.ts file, we will import IonicAuthService, access the loginFireAuth()


method & login with the registered user’s email & password.
Login Cont…
Login Cont…
• Open & add the following code to the login.page.html file. Run the app once
done.
Login Cont…
• You should have the following Output from the code.

You might also like