Skip to content

Instantly share code, notes, and snippets.

@reyco1
reyco1 / ioni-capacitor-angular.md
Last active November 2, 2022 23:41
Step by step instructions in setting up an Ionic Capacitor Angular project

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

@reyco1
reyco1 / auth.service.ts
Created September 16, 2022 15:04
Angular Firebase Auth Service
import { Injectable } from '@angular/core';
import {
Auth, authState, createUserWithEmailAndPassword, GoogleAuthProvider, OAuthCredential,
signInWithCredential, signInWithEmailAndPassword, signInWithPopup, signOut
} from '@angular/fire/auth';
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
import { Capacitor } from '@capacitor/core';
import { AlertController, LoadingController } from '@ionic/angular';
import { switchMap } from 'rxjs/operators';
@reyco1
reyco1 / upload.service.ts
Created September 16, 2022 14:45
Angular Firebase upload service
import { Injectable } from '@angular/core';
import { getDownloadURL, ref, Storage, StringFormat, uploadBytes, uploadString } from '@angular/fire/storage';
@Injectable({
providedIn: 'root'
})
export class UploadService {
constructor(
private storage: Storage,
@reyco1
reyco1 / user.service.ts
Created September 16, 2022 14:43
Angular Firebase User Service
import { Injectable } from '@angular/core';
import { User } from '@angular/fire/auth';
import { BehaviorSubject } from 'rxjs';
import { take } from 'rxjs/operators';
import { AppUser } from '../models/user.model';
import { DbService } from './db.service';
@Injectable({
providedIn: 'root'
@reyco1
reyco1 / db.service.ts
Created September 16, 2022 14:40
Firebase Firestore Angular Service
import { Injectable } from '@angular/core';
import {
addDoc, collection, collectionData, CollectionReference,
deleteDoc, doc, docData, DocumentData, DocumentReference,
Firestore, query, QueryConstraint, setDoc, updateDoc
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
@reyco1
reyco1 / tailwind.config.js
Created September 16, 2022 14:20
tailwind config that includes Ionic Framework Color Pallet
const tailwindColors = require('tailwindcss/colors');
const ionicColors = Object.assign(tailwindColors, {
primary: {
default: 'var(--ion-color-primary)',
shade: 'var(--ion-color-primary-shade)',
tint: 'var(--ion-color-primary-tint)',
},
secondary: {
default: 'var(--ion-color-secondary)',
shade: 'var(--ion-color-secondary-shade)',