Step by step instructions in setting up an Ionic Capacitor Angular project

ioni-capacitor-angular.md

Create a Firebase Project

1. Create a project at https://firebase.google.com/

2. Add iOS, Android and Web apps

3. Download the config files for each of your apps: a. Copy the configuration object for the web app b. Download the google-services.json file from your Android app c. Get your SHA1 Certificate fingerprint by running the following in your terminal keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore and copying the SHA1 result (more info here: https://developers.google.com/android/guides/client-auth) c. Download the GoogleService-info.plist from your iOS app

4. Enable Firebase Authentication sign in methods for email and Google

5. Enable Firestore Database

6. Enable Firebase Storage

Base Ionic Capacitor Setup

1. Make sure you have the Capacitor VSCode Extension installed and updated

2. Create a new ionic capacitor project

3. Globally replace io.ionic.starter with your apps reverse domain name (the one specified when creating your Firebase project)

4. Add an iOS project a. Add your GoogleService-info.plist to the ios/App/App directory

5. Add an Android project a. Add your google-services.json to the android/app directory

Add Google Authentication dependancies

1. Go to https://github.com/capawesome-team/capacitor-firebase

2. Follow installation steps for @capacitor-firebase/authentication

Add Mobile Specific Capacitor Plugins

1. Haptics Plugin for vibrations : https://capacitorjs.com/docs/apis/haptics
2. Splash Screen Plugin for granular splash screen control : https://capacitorjs.com/docs/apis/splash-screen
3. Camera Plugin for uploading images from cameral or cameral roll or file system: https://capacitorjs.com/docs/apis/camera

Add Firebase

1. Run ng add @angular/fire and follow the instructions.

2. Choose the Firebase project you created

3. Add the following: a. Firestore b. Authentication c. Storage

4. Update your app.module.ts to initialize Firebase authentication in the following manner:

   provideAuth(() => {
     if (Capacitor.isNativePlatform()) {
   return initializeAuth(getApp(), { persistence: indexedDBLocalPersistence });
     } else {
   return getAuth();
     }
   }),

5. Firestore Service: https://gist.github.com/reyco1/46417f5fce787ed4135b6ba315fa0831

6. User Service: https://gist.github.com/reyco1/cedbf994587c9dfa5511112edcfa1197

7. Upload Service: https://gist.github.com/reyco1/13329485a4966a3e479382388c5b83b1

8. Auth Service : https://gist.github.com/reyco1/e4f8747289efd9c981c3babb2be4218e

Add Tailwind dependencies

1. Make sure you have the Tailwind CSS IntelliSense Extension installed in VSCode

2. In the command line in your project, do: ng add ngx-tailwind and follow the instructions

3. Use this Gist to include your ionic color pallet in Tailwind https://gist.github.com/reyco1/10b1d390b5f3f214c1a30072f316437a