Capacitor Full App - Ionic Angular
  • What is Capacitor Full App - Ionic Angular?
  • Understand the Frameworks
  • Template Highlights
  • Setup
    • Initial Setup
  • Running the app
  • Building App on device
  • Deploying app as PWA
    • Deploy PWA on Firebase
  • How to use this template
    • Two way to use this Template
  • Removing a Page / Component
  • Removing a plugin
  • Extra
    • Troubleshooting
    • FAQ
  • Changelog
  • Features
    • Startup Features
      • Layouts
      • Firebase
      • Addons
        • Globalization - Translation
        • Content Loaders
        • Custom Fonts
        • Infinite Scroll
        • Pull to Refresh
        • List Re-ordering
        • Date Time Pickers
        • Settings
      • Login & Signups
      • Sidemenu Layouts
      • Wordpress
        • How to integrate
      • Video Playlist
      • Grid and List Layouts
      • Chat Lists & Chat Pages
    • Pro Features
      • Pro Addons
        • AdMob
          • Integration
          • Setting up Google Admob
        • Music Player
        • Push Notifications
        • Local Notifications
        • Device
        • Clipboard
        • Social Login
        • In-App Browser
        • Sweet Alerts
        • Social Sharing
        • Google Places
        • Google Autocomplete
        • Image Cropper
      • Phaser Game Framework
      • WooCommerce
      • Payment Gateways
    • Others
      • Adding Icon and Splash
Powered by GitBook
On this page
  • Authentication Using Firebase
  • Code Structure

Was this helpful?

  1. Features
  2. Startup Features

Firebase

Use Firebase authentication, upload, storage, CRUD functionalities

PreviousLayoutsNextAddons

Last updated 5 years ago

Was this helpful?

Authentication Using Firebase

This starter provides you with Login, Signup and Reset Password functionality using Firebase Authentication.

You can test the authentication in the already provided app code.

When you want to attach the authentication process to your own Firebase project, simply get the config parameters from Firebase console.

Once you have the config parameters, paste them in the environment files in the starter code. There are two environment files, one for dev and one for prod app.

This configuration can be imported in app.module.ts and main.ts by importing the environment

import { environment } from 'src/environments/environment';

Make sure to have the config in the environment.prod.ts when you create a production build

Code Structure

The src/app/pages/firebase folder contains the code related to

  • Login - Email login

  • Signup - Email signup

  • Image Upload

  • CRUD data functions - firebase-home

These files use service data and functions provided in src/app/services/firestore

  • filestorage.service.ts - For storage purpose

  • firebase-authentication.service.ts - For Authentication functions

  • firestore.services.ts - For CRUD functions

When you are using the app Sidemenu, the Login option actually performs a Logout actions to take you to the Login page.

Following articles from our knowledge base can assist you with Firebase features

How to connect Firebase with Ionic 5 AppEnappd
Logo
Firebase email authentication in Ionic 5 appsEnappd
Logo
Firebase with Ionic 4 - Hosting, Auth and DB connectionEnappd
Logo