Add support to google login

package.json

@@ -25,6 +25,8 @@
     "@ngneat/overview": "^3.0.0",
     "@ngneat/until-destroy": "^9.0.0",
     "firebase": "^9.4.0",
+    "firebase-functions": "^3.13.1",
+    "firebase-tools": "^9.4.0",
     "rxfire": "^6.0.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -22,7 +22,9 @@ import { LandingComponent } from './components/landing/landing.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { ProfileComponent } from './components/profile/profile.component';
 import { getStorage, provideStorage } from '@angular/fire/storage';
-
+import { provideAnalytics, getAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
+import { FIREBASE_OPTIONS } from '@angular/fire/compat';
+import { AuthService } from './services/auth.service';
 @NgModule({
   declarations: [
     AppComponent,
@@ -49,7 +51,11 @@ import { getStorage, provideStorage } from '@angular/fire/storage';
     HotToastModule.forRoot(),
     MatMenuModule,
   ],
-  providers: [],
+  providers: [
+    ScreenTrackingService, UserTrackingService, AuthService,
+    { provide: FIREBASE_OPTIONS, useValue: environment.firebase }
+
+  ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/components/login/login.component.html

@@ -17,8 +17,14 @@ <h1>Login</h1>
       </mat-error>
     </mat-form-field>
     <div class="center margin-top">
-        <button type="submit" mat-raised-button color="primary">Login</button>
+      <button type="submit" mat-raised-button color="primary">Login</button>
     </div>
-    <span class="center margin-top">New to our platform? <a class="sign-up-link" routerLink="/sign-up">Sign up!</a></span>
+    <span class="center margin-top">New to our platform? <a class="sign-up-link" routerLink="/sign-up">Sign
+        up!</a></span>
   </form>
-</div>
+  <span class="center margin-top">
+    <button type="button" mat-raised-button color="primary" (click)="authService.GoogleAuth()">
+      Log in with Google
+    </button>
+  </span>
+</div>

src/app/components/login/login.component.ts

@@ -16,13 +16,13 @@ export class LoginComponent implements OnInit {
   });
 
   constructor(
-    private authService: AuthService,
+    public authService: AuthService,
     private toast: HotToastService,
     private router: Router,
     private fb: NonNullableFormBuilder
-  ) {}
+  ) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   get email() {
     return this.loginForm.get('email');

src/app/components/profile/profile.component.html

@@ -1,15 +1,8 @@
-<div
-  class="form-container mat-elevation-z5 text-center"
-  *ngIf="user$ | async as user"
->
+<div class="form-container mat-elevation-z5 text-center" *ngIf="user$ | async as user">
   <h1>Update Profile</h1>
   <div class="profile-image">
-    <img
-      width="120"
-      height="120"
-      class="margin-top mat-elevation-z1"
-      [src]="user.photoURL ?? '/assets/images/image-placeholder.png'"
-    />
+    <img width="120" height="120" class="margin-top mat-elevation-z1"
+      [src]="user.photoURL ?? '/assets/images/image-placeholder.png'" />
     <button mat-mini-fab (click)="inputField.click()">
       <mat-icon>edit</mat-icon>
     </button>
@@ -19,52 +12,27 @@ <h1>Update Profile</h1>
   <form class="margin-top" [formGroup]="profileForm" (ngSubmit)="saveProfile()">
     <div class="row">
       <mat-form-field>
-        <input
-          type="text"
-          matInput
-          formControlName="firstName"
-          placeholder="First Name"
-        />
+        <input type="text" matInput formControlName="firstName" placeholder="First Name" />
       </mat-form-field>
       <mat-form-field>
-        <input
-          type="text"
-          matInput
-          formControlName="lastName"
-          placeholder="Last Name"
-        />
+        <input type="text" matInput formControlName="lastName" placeholder="Last Name" />
       </mat-form-field>
     </div>
 
     <div class="row">
       <mat-form-field>
-        <input
-          type="text"
-          matInput
-          formControlName="displayName"
-          placeholder="Display Name"
-        />
+        <input type="text" matInput formControlName="displayName" placeholder="Display Name" />
       </mat-form-field>
       <mat-form-field>
-        <input
-          type="number"
-          matInput
-          formControlName="phone"
-          placeholder="Phone"
-        />
+        <input type="number" matInput formControlName="phone" placeholder="Phone" />
       </mat-form-field>
     </div>
     <mat-form-field>
-      <input
-        type="text"
-        matInput
-        formControlName="address"
-        placeholder="Address"
-      />
+      <input type="text" matInput formControlName="address" placeholder="Address" />
     </mat-form-field>
 
     <button type="submit" class="margin-top" mat-raised-button color="primary">
       Save
     </button>
   </form>
-</div>
+</div>

src/app/components/profile/profile.component.ts

@@ -30,7 +30,7 @@ export class ProfileComponent implements OnInit {
     private toast: HotToastService,
     private usersService: UsersService,
     private fb: NonNullableFormBuilder
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.usersService.currentUserProfile$
@@ -42,7 +42,7 @@ export class ProfileComponent implements OnInit {
 
   uploadFile(event: any, { uid }: ProfileUser) {
     this.imageUploadService
-      .uploadImage(event.target.files[0], `images/profile/${uid}`)
+      .uploadImage(event.target.files[0], `images/profile/users/${uid}`)
       .pipe(
         this.toast.observe({
           loading: 'Uploading profile image...',

src/app/components/sign-up/sign-up.component.html

@@ -17,32 +17,27 @@ <h1>Sign Up a New User!</h1>
       </mat-error>
     </mat-form-field>
     <mat-form-field>
-      <input
-        matInput
-        type="password"
-        placeholder="Password"
-        formControlName="password"
-      />
+      <input matInput type="password" placeholder="Password" formControlName="password" />
       <mat-error *ngIf="password?.errors?.['required']">
         Password is required
       </mat-error>
     </mat-form-field>
     <mat-form-field>
-      <input
-        matInput
-        type="password"
-        placeholder="Confirm Password"
-        formControlName="confirmPassword"
-      />
+      <input matInput type="password" placeholder="Confirm Password" formControlName="confirmPassword" />
       <mat-error *ngIf="confirmPassword?.errors?.['required']">
         Confirm Password is required
       </mat-error>
     </mat-form-field>
     <mat-error *ngIf="signUpForm.errors?.['passwordsDontMatch']">
-        Passwords should match
+      Passwords should match
     </mat-error>
     <div class="center margin-top">
       <button type="submit" mat-raised-button color="primary">Sign Up!</button>
     </div>
   </form>
-</div>
+  <span class="center margin-top">
+    <button type="button" mat-raised-button color="primary" (click)="authService.GoogleAuth()">
+      Log in with Google
+    </button>
+  </span>
+</div>

src/app/components/sign-up/sign-up.component.ts

@@ -44,14 +44,14 @@ export class SignUpComponent implements OnInit {
   );
 
   constructor(
-    private authService: AuthService,
+    public authService: AuthService,
     private router: Router,
     private toast: HotToastService,
     private usersService: UsersService,
     private fb: NonNullableFormBuilder
-  ) {}
+  ) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   get email() {
     return this.signUpForm.get('email');

src/app/services/auth.service.ts

@@ -6,17 +6,29 @@ import {
   createUserWithEmailAndPassword,
   updateProfile,
   UserInfo,
+  signInWithPopup,
   UserCredential,
 } from '@angular/fire/auth';
 import { concatMap, from, Observable, of, switchMap } from 'rxjs';
+import { GoogleAuthProvider } from 'firebase/auth';
+import firebase from 'firebase/compat';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
   currentUser$ = authState(this.auth);
 
-  constructor(private auth: Auth) {}
+  constructor(private auth: Auth) { }
+
+  // Sign in with Google
+  GoogleAuth() {
+    return this.AuthLogin(new GoogleAuthProvider());
+  }
+  // Auth logic to run auth providers
+  AuthLogin(provider: firebase.auth.AuthProvider | GoogleAuthProvider): Observable<UserCredential> {
+    return from(signInWithPopup(this.auth, provider));
+  }
 
   signUp(email: string, password: string): Observable<UserCredential> {
     return from(createUserWithEmailAndPassword(this.auth, email, password));