feat(auth): experimental server-side auth

package.json

@@ -78,6 +78,7 @@
     "@angular/compiler-cli": "^9.0.0 || ^10.0.0 || ^11.0.0",
     "@angular/platform-server": "^9.0.0 || ^10.0.0 || ^11.0.0",
     "@firebase/app-types": "^0.6.1",
+    "@nguniversal/express-engine": "^11.0.0",
     "@types/fs-extra": "^7.0.0",
     "@types/gzip-size": "^5.1.1",
     "@types/inquirer": "^0.0.44",

sample/firebase.json

@@ -27,6 +27,12 @@
       ],
       "rewrites": [
         {
+          "source": "yada",
+          "function": "yada"
+        }, {
+          "source": "createSession",
+          "function": "createSession"
+        }, {
           "source": "**",
           "function": "ssr"
         }

sample/functions/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "aftest-94085"
+  }
+}

sample/functions/firebase.json

@@ -0,0 +1,9 @@
+{
+    "functions": {
+        "source": ".",
+        "predeploy": [
+            "npm run lint",
+            "npm run build"
+        ]
+    }
+}

sample/functions/package.json

@@ -15,8 +15,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "firebase-admin": "^9.2.0",
-    "firebase-functions": "^3.11.0",
-    "ssr-functions": "file:../dist/sample"
+    "firebase-functions": "^3.11.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.9.1",

sample/functions/src/index.ts

@@ -1,15 +1,10 @@
 import * as functions from 'firebase-functions';
 
-// // Start writing Firebase Functions
-// // https://firebase.google.com/docs/functions/typescript
-//
-// export const helloWorld = functions.https.onRequest((request, response) => {
-//   functions.logger.info("Hello logs!", {structuredData: true});
-//   response.send("Hello from Firebase!");
-// });
+// import * as admin from 'firebase-admin';
+// admin.initializeApp();
 
-// @ts-ignore
-export const ssr = require('ssr-functions').ssr;
+// Increase readability in Cloud Logging
+import 'firebase-functions/lib/logger/compat';
 
 export const yada = functions.https.onCall(() => {
     return { time: new Date().getTime() };

sample/package.json

@@ -32,6 +32,7 @@
     "core-js": "^3.6.5",
     "firebase": "^8.0.0",
     "first-input-delay": "^0.1.3",
+    "ngx-cookie-service": "^10.1.1",
     "proxy-polyfill": "^0.3.2",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",

sample/server.ts

@@ -36,7 +36,7 @@ export function app() {
   // Serve static files from /browser
   server.get('*.*', express.static(distFolder, {
     maxAge: '1y'
-  }));
+  }) as any);
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {

sample/src/app/app.module.ts

@@ -18,11 +18,17 @@ import {
   COLLECTION_ENABLED
 } from '@angular/fire/analytics';
 
+import {
+  AngularFireAuthModule,
+  USE_DEVICE_LANGUAGE,
+  USE_EMULATOR as USE_AUTH_EMULATOR,
+  EXPERIMENTAL_COOKIE_AUTH
+} from '@angular/fire/auth';
+
 import { FirestoreComponent } from './firestore/firestore.component';
 import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
 import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
 import { AngularFireStorageModule } from '@angular/fire/storage';
-import { AngularFireAuthModule, USE_DEVICE_LANGUAGE, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
 import { AngularFireMessagingModule, SERVICE_WORKER, VAPID_KEY } from '@angular/fire/messaging';
 import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR, ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
 import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS, DEFAULTS as REMOTE_CONFIG_DEFAULTS } from '@angular/fire/remote-config';
@@ -38,7 +44,7 @@ import { FunctionsComponent } from './functions/functions.component';
 import { FirestoreOfflineComponent } from './firestore-offline/firestore-offline.component';
 import { FirestoreOfflineModule } from './firestore-offline/firestore-offline.module';
 import { UpboatsComponent } from './upboats/upboats.component';
-
+import { CookieService } from 'ngx-cookie-service';
 @NgModule({
   declarations: [
     AppComponent,
@@ -72,9 +78,11 @@ import { UpboatsComponent } from './upboats/upboats.component';
     FirestoreOfflineModule
   ],
   providers: [
+    CookieService,
     UserTrackingService,
     ScreenTrackingService,
     PerformanceMonitoringService,
+    { provide: EXPERIMENTAL_COOKIE_AUTH, useValue: true },
     { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
     { provide: ANALYTICS_DEBUG_MODE, useValue: true },
     { provide: COLLECTION_ENABLED, useValue: true },

sample/src/app/auth/auth.component.ts

@@ -2,18 +2,19 @@ import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
 import firebase from 'firebase/app';
 import { Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { filter, map, pairwise, tap } from 'rxjs/operators';
 import { trace } from '@angular/fire/performance';
 import { Inject } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
   selector: 'app-auth',
   template: `
     <p>
       Auth!
       {{ (auth.user | async)?.uid | json }}
-      {{ (auth.credential | async)?.additionalUserInfo.isNewUser | json }}
+      {{ (auth.credential | async)?.additionalUserInfo?.isNewUser | json }}
       <button (click)="login()" *ngIf="showLoginButton">Log in with Google</button>
       <button (click)="loginAnonymously()" *ngIf="showLoginButton">Log in anonymously</button>
       <button (click)="logout()" *ngIf="showLogoutButton">Log out</button>
@@ -24,20 +25,47 @@ import { isPlatformServer } from '@angular/common';
 export class AuthComponent implements OnInit, OnDestroy {
 
   private readonly userDisposable: Subscription|undefined;
+  private readonly cookieExchangeDisposable: Subscription|undefined;
 
   showLoginButton = false;
   showLogoutButton = false;
 
-  constructor(public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: object) {
+  constructor(
+    public readonly auth: AngularFireAuth,
+    @Inject(PLATFORM_ID) platformId: object,
+    cookies: CookieService,
+  ) {
 
     if (!isPlatformServer(platformId)) {
-      this.userDisposable = this.auth.authState.pipe(
+
+
+      this.userDisposable = auth.authState.pipe(
         trace('auth'),
         map(u => !!u)
       ).subscribe(isLoggedIn => {
         this.showLoginButton = !isLoggedIn;
         this.showLogoutButton = isLoggedIn;
       });
+
+      this.cookieExchangeDisposable = auth.credential.pipe(
+        filter(it => !!it),
+        tap(it => console.log(it.credential)),
+      ).subscribe(userCredential => {
+        const json = userCredential.credential.toJSON() as any;
+        json._uid = userCredential.user.uid;
+        cookies.set('session', JSON.stringify(json));
+      });
+
+      auth.user.pipe(
+        pairwise(),
+        filter(([a, b]) => !!a && !b)
+      ).subscribe(() => {
+        cookies.delete('session');
+      });
+
+      auth.getRedirectResult().then(it => console.log('redirectResult', it));
+      auth.credential.subscribe(it => console.log('credential', it));
+
     }
   }
 
@@ -47,21 +75,21 @@ export class AuthComponent implements OnInit, OnDestroy {
     if (this.userDisposable) {
       this.userDisposable.unsubscribe();
     }
+    if (this.cookieExchangeDisposable) {
+      this.cookieExchangeDisposable.unsubscribe();
+    }
   }
 
   async login() {
     const user = await this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
-    // TODO sign into offline app
   }
 
   async loginAnonymously() {
     const user = await this.auth.signInAnonymously();
-    // TODO sign into offline app
   }
 
   logout() {
     this.auth.signOut();
-    // TODO sign out of offline app
   }
 
 }

sample/src/app/firestore-offline/firestore-offline.module.ts

@@ -2,7 +2,8 @@ import { Inject, Injectable, InjectionToken, NgModule, NgZone, Optional, PLATFOR
 import { FirebaseOptions, FIREBASE_OPTIONS } from '@angular/fire';
 import { USE_EMULATOR } from '@angular/fire/firestore';
 import { AngularFirestore, SETTINGS, Settings } from '@angular/fire/firestore';
-import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
+import { USE_EMULATOR as USE_AUTH_EMULATOR, AngularFireAuth } from '@angular/fire/auth';
+import { credential } from 'firebase-admin';
 
 export const FIRESTORE_OFFLINE = new InjectionToken<AngularFirestore>('my.firestore');
 
@@ -16,8 +17,17 @@ export class AngularFirestoreOffline extends AngularFirestore {
         zone: NgZone,
         @Optional() @Inject(USE_EMULATOR) useEmulator: any,
         @Optional() @Inject(USE_AUTH_EMULATOR) useAuthEmulator: any,
+        afAuth: AngularFireAuth,
       ) {
         super(options, 'offline', true, settings, platformId, zone, { synchronizeTabs: true }, useEmulator, useAuthEmulator);
+        afAuth.credential.subscribe(userCredential => {
+          const auth = this.firestore.app.auth();
+          if (userCredential) {
+            auth.signInWithCredential(userCredential.credential);
+          } else {
+            auth.signOut();
+          }
+        });
       }
 }
 

sample/src/app/functions/functions.component.ts

@@ -24,7 +24,7 @@ export class FunctionsComponent implements OnInit {
   ngOnInit(): void {}
 
   request() {
-    this.response$ = this.functions.httpsCallable('yada', { timeout: 3 })({});
+    this.response$ = this.functions.httpsCallable('yada', { timeout: 3_000 })({});
   }
 
 }

sample/yarn.lock

@@ -241,7 +241,7 @@
     tslib "^2.0.0"
 
 "@angular/fire@../dist/packages-dist":
-  version "6.1.1"
+  version "6.1.2"
   dependencies:
     tslib "^2.0.0"
 
@@ -8459,6 +8459,13 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+ngx-cookie-service@^10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz#4d7f41ba7d788896c59cb68283df3ae9d8ffcd37"
+  integrity sha512-HvBrYHdxMN1NvFJGEIF/8EuAg2fjxj8QwqTv9h6qZGqNLU+lUba8Pb2zRPw1YA+gqKkJawOy5dYNeH0kyPyipw==
+  dependencies:
+    tslib "^2.0.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"