feat: update to ionic 5 angular 9

Author: djabif

.firebaserc

@@ -0,0 +1,14 @@
+{
+  "targets": {
+    "ionic5-firebase-authentication": {
+      "hosting": {
+        "app": [
+          "ionic5-firebase-authentication"
+        ]
+      }
+    }
+  },
+  "projects": {
+    "demo": "ionic5-firebase-authentication"
+  }
+}

.gitignore

@@ -3,33 +3,31 @@
 
 *~
 *.sw[mnpcod]
-*.log
+.tmp
 *.tmp
 *.tmp.*
-log.txt
 *.sublime-project
 *.sublime-workspace
-.vscode/
-npm-debug.log*
-
-.idea/
-.sourcemaps/
-.sass-cache/
-.tmp/
-.versions/
-coverage/
-dist/
-node_modules/
-tmp/
-temp/
-hooks/
-platforms/
-plugins/
-plugins/android.json
-plugins/ios.json
-www/
-$RECYCLE.BIN/
-
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
+$RECYCLE.BIN/
+
+*.log
+log.txt
+npm-debug.log*
+
+/.idea
+/.ionic
+/.sass-cache
+/.sourcemaps
+/.versions
+/.vscode
+/coverage
+/dist
+/node_modules
+/platforms
+/plugins
+/www
+
+.firebase

README.md

@@ -1,11 +1,56 @@
-## Firebase Authentication in Ionic Framework Apps
+# Ionic Firebase Authentication
+Enjoy this free Ionic 5 Firebase demo app and save tons of hours of work!
 
-In this ionic tutorial we will learn how to configure a firebase application to enable an ionic 3 application to log in with both Email and Password and social providers such as Facebook, Twitter and Google.
+<div>
+  <img src="https://ionicthemes.s3-us-west-2.amazonaws.com/tutorials/screenshots/firebase-authentication-in-ionic-framework-apps/ionic5/tutorial-sign-in.jpeg" width="270">
+  <img src="https://ionicthemes.s3-us-west-2.amazonaws.com/tutorials/screenshots/firebase-authentication-in-ionic-framework-apps/ionic5/tutorial-sign-up.jpeg" width="270">
+  <img src="https://ionicthemes.s3-us-west-2.amazonaws.com/tutorials/screenshots/firebase-authentication-in-ionic-framework-apps/ionic5/tutorial-profile.jpeg" width="270">
+</div>
 
-This repo is a simple ionic 3 app example with the goal of helping you integration Firebase Authentication to your Ionic app.
+## About this ionic demo
+This repo is the code of an Ionic 5 starter app that we created as part of the post: **[Ionic Firebase Authentication Tutorial](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps). In this post we explain how to perform Social Sign In with Firebase from an Ionic application.**
 
-![demo](https://s3-us-west-2.amazonaws.com/ionicthemes/tutorials/screenshots/firebase-authentication-in-ionic-framework-apps/firebase-auth-login.png)
-![demo](https://s3-us-west-2.amazonaws.com/ionicthemes/tutorials/screenshots/firebase-authentication-in-ionic-framework-apps/firebase-auth-register.png)
+Most apps need to know the identity of the user who is using it. Knowing a user's identity allows an app to securely save user data in the cloud and provide a personalized experience across all of the user's devices.
 
+In this Ionic + Firebase tutorial you will learn how to create an Ionic Framework Application with Firebase Authentication. We will show you how to configure both the Firebase and the Ionic 5 App to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password.
 
-Read the complete Ionic Firebase Authentication Tutorial in https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps
+As an example we built this Ionic Framework application that allows users to log in and log out using all of the above mentioned authentication options. Once they log in, they will see a profile page with their basic profile info taken from the authentication provider.
+
+Read the complete post in https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps.
+
+### Ionic Firebase Starter
+This repo is a simple ionic 5 starter app with three pages:
+- Sign In
+- Sign Up
+- Profile
+
+Find more Ionic tutorials and starter apps in https://ionicthemes.com
+
+### Demo
+- [Online demo](https://ionic5-firebase-authentication.web.app)
+
+## Install this Ionic 5 Firebase App
+```
+npm install
+```
+### Browse the app
+```
+ionic serve
+```
+
+### Get a premium Ionic 5 Starter App with Firebase Integration
+If you want a ready-made example of how to use Firebase Authentication in Ionic 5 with Capacitor configurations for iOS and Android, check [Ionic 5 Full Starter App PRO](https://ionicthemes.com/product/ionic5-full-starter-app-pro-version). We spent many hours configuring and testing everything so that you don't have to.
+
+This template has more than 100 carefully designed views and components, it will help you grasp the best practices and new concepts of Ionic 5.
+
+It also includes a very complete integration with Firebase which includes:
+- Firebase Authentication with different providers:
+  - Facebook sign in
+  - Twitter sign in
+  - Google sign in
+  - Email/Password sign in
+  - This implementation works in all environments: web, PWA, mobile apps with Capacitor.
+- Firebase CRUD
+- Firebase queries
+
+<img src="https://ionicthemes.s3-us-west-2.amazonaws.com/cover_images/redesign/ionic5-full-starter-app-pro.jpg"/>

angular.json

@@ -0,0 +1,193 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "defaultProject": "app",
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "www",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/theme/variables.scss"
+              },
+              {
+                "input": "src/global.scss"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+            "ci": {
+              "progress": false
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            },
+            "ci": {
+              "progress": false
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "styles": [],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          },
+          "configurations": {
+            "ci": {
+              "progress": false,
+              "watch": false
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "app:serve:production"
+            },
+            "ci": {
+              "devServerTarget": "app:serve:ci"
+            }
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "app:ionic-cordova-build",
+            "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "app:ionic-cordova-build:production",
+              "devServerTarget": "app:serve:production"
+            }
+          }
+        },
+        "deploy": {
+          "builder": "@angular/fire:deploy",
+          "options": {}
+        }
+      }
+    }
+  },
+  "cli": {
+    "defaultCollection": "@ionic/angular-toolkit"
+  },
+  "schematics": {
+    "@ionic/angular-toolkit:component": {
+      "styleext": "scss"
+    },
+    "@ionic/angular-toolkit:page": {
+      "styleext": "scss"
+    }
+  }
+}

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

capacitor.config.json

@@ -0,0 +1,8 @@
+{
+  "appId": "io.ionic.starter",
+  "appName": "ionic5-firebase-authentication",
+  "bundledWebRuntime": false,
+  "npmClient": "npm",
+  "webDir": "www",
+  "cordova": {}
+}

e2e/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

e2e/src/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('new App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should be blank', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toContain('Start with Ionic UI Components');
+  });
+});