maxresdefault 2025 05 02T125553.628
Creating an Ionic App with Firebase User Authentication and File Upload

Creating mobile applications can often be a challenging endeavor, especially when integrating backend services for user authentication and file storage. However, with the combination of the Ionic framework and Firebase, developers can rapidly build powerful applications that harness cloud capabilities. In this guide, we’ll explore how to create an Ionic app that enables user registration, login, and image uploads to Firebase cloud storage using AngularFire 7 and Capacitor.

Why Use Ionic with Firebase?

The Ionic framework offers developers an efficient way to build native mobile applications using web technologies like HTML, CSS, and JavaScript or TypeScript. Alongside Firebase, a versatile Backend-as-a-Service (BaaS) platform, you can manage user data and images seamlessly. Firebase provides robust features such as authentication and real-time databases, allowing developers to focus on user experience instead of backend concerns.

Getting Started

To kick things off, ensure that you have the latest Ionic CLI installed on your machine. If you don’t have it yet, you can install it using npm:
“`bash
npm install -g @ionic/cli

Next, create a new Ionic application:

bash
ionic start myApp blank –type=angular
cd myApp

After creating the project, we need to add AngularFire and Firebase to your app:

bash
npm install firebase @angular/fire

### Setting Up Firebase  
1. **Create a Firebase Project**: Go to the [Firebase console](https://console.firebase.google.com/), create a new project, and add a web app to connect it to your Ionic application.
2. **Enable Authentication**: In the Firebase console, navigate to the Authentication tab, then enable the Email/Password sign-in method.
3. **Setup Firestore and Storage**: Initialize Firestore Database and Firebase Storage by clicking on their respective databases and following the prompts.

Make sure to set the rules to allow authenticated users to read/write to Firestore and Storage.  

### Configuring AngularFire  
We can easily integrate AngularFire with our Ionic app. First, open `src/environments/environment.ts` and add your Firebase configuration:

typescript
export const environment = {
production: false,
firebase: {
apiKey: ‘YOUR_API_KEY’,
authDomain: ‘YOUR_AUTH_DOMAIN’,
projectId: ‘YOUR_PROJECT_ID’,
storageBucket: ‘YOUR_STORAGE_BUCKET’,
messagingSenderId: ‘YOUR_SENDER_ID’,
appId: ‘YOUR_APP_ID’
}
};

Next, integrate AngularFire into your app module located at `src/app/app.module.ts`:

typescript
import { AngularFireModule } from ‘@angular/fire’;
import { AngularFireAuthModule } from ‘@angular/fire/auth’;
import { AngularFirestoreModule } from ‘@angular/fire/firestore’;
import { AngularFireStorageModule } from ‘@angular/fire/storage’;
import { environment } from ‘../environments/environment’;

@NgModule({
declarations: […],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
…
],
providers: […],
bootstrap: [IonicApp]
})
export class AppModule {}

### Implementing User Authentication  
Next, let's create an authentication service to handle user accounts. In your project structure, create a file named `auth.service.ts`:

typescript
import { Injectable } from ‘@angular/core’;
import { AngularFireAuth } from ‘@angular/fire/auth’;
import firebase from ‘firebase/app’;

@Injectable({
providedIn: ‘root’
})
export class AuthService {
constructor(private afAuth: AngularFireAuth) {}
async register(email: string, password: string) {
return this.afAuth.createUserWithEmailAndPassword(email, password);
}
async login(email: string, password: string) {
return this.afAuth.signInWithEmailAndPassword(email, password);
}
async logout() {
return this.afAuth.signOut();
}
}

### Building the Login and Registration Pages  
To complete the application, we need to create login and registration pages with forms that allow users to input their credentials. You can create a new page with Ionic CLI commands:

bash
ionic generate page login
ionic generate page register

Implement Reactive Forms in these pages to manage the user inputs and validation.

### Uploading Images to Firebase  
In addition to user authentication, we’ll allow users to upload images. Integrate the Capacitor Camera plugin to take or select images:

bash
npm install @capacitor/camera
ionic build
npx cap sync

Create an `image-upload.service.ts` to handle image uploads:

typescript
import { Injectable } from ‘@angular/core’;
import { AngularFireStorage } from ‘@angular/fire/storage’;
import { AuthService } from ‘./auth.service’;

@Injectable({
providedIn: ‘root’
})
export class ImageUploadService {
constructor(private storage: AngularFireStorage, private authService: AuthService) {}
async uploadImage(image: any) {
const user = this.authService.userId;
const filePath = uploads/${user}/profile.png;
const fileRef = this.storage.ref(filePath);
return this.storage.upload(filePath, image);
}
}
“`

Conclusion

Building an Ionic application that leverages Firebase’s features can significantly reduce development time while enhancing the application’s capability. This guide covered essential steps from user authentication to image uploads, allowing you to focus on core functionality rather than backend complexities. With Firebase, launching a powerful app becomes a straightforward process.

For further assistance or more detailed topics, feel free to leave a comment or check out the resources available at Ionic Academy for a deeper dive into Ionic applications.

    More posts