Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page
  • Authentication Using Firebase
  • Code Structure

Was this helpful?

  1. Ionic 5 Full App
  2. Beginner Pack Features

Firebase

Use Firebase authentication, upload, storage, CRUD functionalities

PreviousBeginner Pack FeaturesNextLayouts

Last updated 6 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.

Environment files for Firebase config
Folders for Firebase features