Firebase Authentication in Ionic framework for login/signup app

User authentication for Login and Signup in Ionic app using Firebase.

Install firebase in your application

1. Open the terminal and make sure you are inside your project named ‘Mart-24’. Run the command:

$ npm install @angular/fire firebase --save

Setting Up the Firebase Account

1. Go to Firebase: https://firebase.google.com/
2. Click ‘Get Started’ or ‘Go to Console’.
3. Click ‘Add project’ and enter the project name.
   I used the demo-app project name.
4. Then click on next/continue, and the new project is created.
5. Inside your project click on ‘Add app’ as shown in figure-1.

Figure-1

6. Select ‘web’ option as shown in figure-2.

Figure-2

7. It will open the new window to register you app as shown in figure-3. Enter the name of the ‘App’.

Figure-3

8. Click the button ‘Register app’.

9. Firebase SDK is used to connect our web app with firebase. Copy the ‘firebaseConfig’ variable and will add it in our ionic project.

10. Open the file ‘src/app/app.module.ts’ and paste the above copied ‘firebaseConfig’ variable in it and import the libraries. Replace the JSON object ‘firebaseConfig’ with your configurations.

11. Open the ‘Authentication’ under the build option as shown in figure-4.

Figure-4

12. Select the ‘Get started’ button and you can see the number of possible authentication mechanism that Firebase supports as shown in figure-5.

Figure-5

13. To keep it simple, I am using the ‘Email/Password’ option. It will open the window where you can ‘enable’ the email/password option and click on ‘Save’ button as shown in figure-6.

Figure-6

Now time to write code in our ‘Mart-24’ project that first signup the users and then login the users.

1. For signup the user, we require three user details i.e name, email and password. To represent these values inside the signup.page.ts file, declare three varaibles inside the ‘SignupPage’ class as,

name: String = “”;
email: String = “”;
password: String = “”;

2. These variable have to bind the text-input field as well. For binding it with <ion-input> tag, use ngModel directive. For example,

<ion-item lines=”none” color=”light” class=”rowStyle”>
   <ion-input type=”text” placeholder=”your name” required  
     [(ngModel)]=”name”>
   </ion-input>
</ion-item>

3. Open the app.module.ts file and import the following libraries,

import { provideAuth, getAuth } from ‘@angular/fire/auth’;
import { provideStorage, getStorage } from ‘@angular/fire/storage’;

Update the import field inside the NgModule,

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, provideFirebaseApp(() => initializeApp(firebaseConfig)), provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
provideStorage(() => getStorage())
],

The update file of app.module.ts look like,

4. Open the ‘signup.page.ts’ and add the ‘signup’ function that is bind with the signup button.

async signup() {
   const user = await createUserWithEmailAndPassword(
     this.auth,
     this.email,
     this.password
     );
   return user;
}

5. Import the following dependency in the ‘signup.page.ts’ file.

import {
  Auth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut
} from ‘@angular/fire/auth’;

After adding function and dependency, the signup.page.ts file looks like,

Run and test the sign-up application

1. Open the app and enter the username, email and password. Click on ‘SignUp’ button.

2. Open the firebase console. Under the authentication window, select the ‘Users’ tab. It will show the user’s detail that is created from ‘SignUp’ page.

Login with user-authentication

1. Bind the login button with user-defined ‘login’ function.

<ion-item lines=”none” class=”align” color=”danger”>
   <ion-button color=”danger” class=”rowStyleButton”  
      (click)=”login()”>  
      Login 
   </ion-button>
</ion-item>

2. Bind the email and password with the <ion-input> field as same as we did for signup page.

3. Open the file login.page.ts and write the ‘login()’ function.

async login() {
  const user = await signInWithEmailAndPassword(
     this.auth,
     this.email,
     this.password
     );
  console.log(user);
  return user;
}

The login.page.ts file becomes,

Run and test the login application

1. Reload the application and open the login page ‘http://localhost:8000/login’.
2. Enter the user’s credentials.

3. Click the ‘Login’ button. At the moment, the successful login action do not show any dashboard/feed because we don’t create such pages and not redirect it. To check the user’s successful login and its details, open the inspect element tool and click on console tab, where you can see the login user’s details as shown in figure-7.

Figure-7

We are done with the login and signup functionality of our ‘Mart-24’ app. In my next article, I will create a dashboard/feed page where user can see all the available products in the mart.

You can find the code in my Github repo.

https://github.com/muhammad-usman-108/Mart-24