In this comprehensive guide, we'll walk you through the steps to build a social media app using Ionic framework and Firebase backend. By the end of this tutorial, you'll have a fully functional social media app that can be compiled for both iOS and Android devices.

Prerequisites

Before we start, make sure you have the following software installed on your system:

  • Node.js: https://nodejs.org
  • Ionic CLI: Run npm install -g ionic
  • Firebase CLI: Run npm install -g firebase-tools

You'll also need a Firebase project. If you don't have one, sign in to the Firebase console (https://console.firebase.google.com), create a new project, and note down the project ID and API keys.

Setting Up the Ionic Project

Let's start by setting up our Ionic project. Open a terminal or command prompt and run the following commands:

  • ionic start social-media-app blank --type=angular
  • cd social-media-app
  • Add the iOS and Android platforms: ionic capacitor add ios and ionic capacitor add android

User Authentication with Firebase

To allow users to sign up and sign in to our app, we'll use Firebase Authentication. Run the following command to install the Firebase SDK:

  • npm install firebase @angular/fire

Next, open the src/environments/environment.ts file and add the Firebase configuration. Replace YOUR_FIREBASE_CONFIG with your actual Firebase project configuration:

`

export const environment = {

production: false,

firebase: {

apiKey: "YOUR_FIREBASE_API_KEY",

authDomain: "YOUR_FIREBASE_AUTH_DOMAIN",

projectId: "YOUR_FIREBASE_PROJECT_ID",

storageBucket: "YOUR_FIREBASE_STORAGE_BUCKET",

messagingSenderId: "YOUR_FIREBASE_MESSAGING_SENDER_ID",

appId: "YOUR_FIREBASE_APP_ID"

}

};

`

Now, open the src/app/app.module.ts file and import the following modules:

  • import { AngularFireModule } from '@angular/fire';
  • import { AngularFireAuthModule } from '@angular/fire/auth';
  • import { environment } from '../environments/environment';

Then, add AngularFireModule.initializeApp(environment.firebase) and AngularFireAuthModule to the imports section of the @NgModule decorator.

Creating the Authentication Service

Let's create a service to handle user authentication. Run the following command to generate a new service:

  • ionic generate service services/authentication

Open the newly created src/app/services/authentication.service.ts file and replace the contents with the following code:

`

import { Injectable } from "@angular/core";

import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({

providedIn: "root"

})

export class AuthenticationService {

constructor(private afAuth: AngularFireAuth) {}

signup(email: string, password: string) {

return this.afAuth.createUserWithEmailAndPassword(email, password);

}

login(email: string, password: string) {

return this.afAuth.signInWithEmailAndPassword(email, password);

}

logout() {

return this.afAuth.signOut();

}

getCurrentUser() {

return this.afAuth.user;

}

}

`

This service provides methods for signing up, logging in, logging out, and getting the current user.

Implementing the Authentication Flow

Now, let's add the authentication flow to our app. Open the src/app/app.component.html file and replace its contents with the following code:

`

`

Next, create a new file src/app/pages/login/login.page.html and add the following code:

`

Login

Login to your account

`

Create a new file src/app/pages/login/login.page.ts and add the following code:

`

import { Component, OnInit } from "@angular/core";

import { Router } from "@angular/router";

import { AuthenticationService } from "../../services/authentication.service";

@Component({

selector: "app-login",

templateUrl: "./login.page.html",

styleUrls: ["./login.page.scss"]

})

export class LoginPage implements OnInit {

email: string;

password: string;

constructor(private authService: AuthenticationService, private router: Router) {}

ngOnInit() {}

login() {

this.authService.login(this.email, this.password).then(() => {

this.router.navigateByUrl("/home");

});

}

goToSignup() {

this.router.navigateByUrl("/signup");

}

}

`

Similarly, create a new file src/app/pages/signup/signup.page.html with the following content:

By following these steps, you'll have a fully functional social media app that can be compiled for both iOS and Android devices.