Bumping everything, transparent cookie sync in Next.js

Author: jamesdaniels

package-lock.json

@@ -20,6 +20,7 @@
     "nuxt3",
     "ssr"
   ],
+  "sideEffects": false,
   "scripts": {
     "build": "rm -rf dist && tsc && ts-node ./tools/build.ts",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -39,10 +40,20 @@
       "node": "./dist/index.js",
       "default": null
     },
+    "./tools": {
+      "node": "./dist/tools.js",
+      "default": null
+    },
     "./server": {
       "node": "./dist/server/index.js",
       "default": null
-    }
+    },
+    "./server/firebase-aware": {
+      "node": "./dist/server/firebase-aware.js",
+      "default": null
+    },
+    "./client/auth": "./dist/client/auth/index.js",
+    "./client/app": "./dist/client/app/index.js"
   },
   "files": [
     "dist"
@@ -51,6 +62,7 @@
   "dependencies": {
     "fs-extra": "^10.1.0",
     "jsonc-parser": "^3.0.0",
+    "semver": "^7.3.7",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -62,8 +74,9 @@
     "@types/inquirer": "^8.1.3",
     "@types/lru-cache": "^7.6.1",
     "@types/node": "^16.11.12",
+    "@types/semver": "^7.3.9",
     "cookie": "^0.5.0",
-    "firebase": "^9.6.8",
+    "firebase": "^9.7.1-20220505222723",
     "firebase-admin": "^10.1.0",
     "firebase-functions": "^3.20.1",
     "firebase-tools": "^10.5.0",

package.json

@@ -0,0 +1,55 @@
+export * from 'firebase/auth';
+import {
+    beforeAuthStateChanged,
+    onIdTokenChanged,
+    getAuth as getFirebaseAuth,
+    initializeAuth as initializeFirebaseAuth,
+    User,
+    Auth,
+    Dependencies
+} from 'firebase/auth';
+import type { FirebaseApp } from 'firebase/app';
+import { ID_TOKEN_MAX_AGE } from '../../constants';
+
+let alreadySetup = false;
+let lastPostedIdToken: string|undefined;
+
+const mintCookie = async (user: User|null) => {
+    const idTokenResult = user && await user.getIdTokenResult();
+    const idTokenAge = idTokenResult && (new Date().getTime() - Date.parse(idTokenResult.issuedAtTime)) / 1_000;
+    if (idTokenAge && idTokenAge > ID_TOKEN_MAX_AGE) return;
+    const idToken = idTokenResult?.token;
+    if (lastPostedIdToken === idToken) return;
+    lastPostedIdToken = idToken;
+    await fetch('/__session', {
+        method: idToken ? 'POST' : 'DELETE',
+        headers: idToken ? {
+            'Authorization': `Bearer ${idToken}`,
+        } : {}
+    });
+};
+
+const setup = (auth: Auth) => {
+    if (auth.app.name !== '[DEFAULT]') return;
+    if (typeof window === 'undefined') return;
+    if (alreadySetup) return;
+    alreadySetup = true;
+    beforeAuthStateChanged(auth, mintCookie, () => {
+        mintCookie(auth.currentUser)
+    });
+    onIdTokenChanged(auth, user => mintCookie(user));
+}
+
+export function getAuth(app?: FirebaseApp) {
+    console.log('getFirebaseAuth');
+    const auth = getFirebaseAuth(app);
+    setup(auth);
+    return auth;
+}
+
+export function initializeAuth(app: FirebaseApp, deps?: Dependencies) {
+    console.log('initializeFirebaseAuth');
+    const auth = initializeFirebaseAuth(app, deps);
+    setup(auth);
+    return auth;
+}

src/client/auth/index.ts

@@ -0,0 +1,10 @@
+export const FIREBASE_ADMIN_VERSION = '__FIREBASE_ADMIN_VERSION__';
+export const FIREBASE_FUNCTIONS_VERSION = '__FIREBASE_FUNCTIONS_VERSION__';
+export const COOKIE_VERSION = '__COOKIE_VERSION__';
+export const LRU_CACHE_VERSION = '__LRU_CACHE_VERSION__';
+export const FIREBASE_FRAMEWORKS_VERSION = '__FIREBASE_FRAMEWORKS_VERSION__';
+export const DEFAULT_REGION = 'us-central1';
+export const LRU_MAX_INSTANCES = 100;
+export const LRU_TTL = 1_000 * 60 * 5;
+export const ID_TOKEN_MAX_AGE = 5 * 60;
+export const COOKIE_MAX_AGE = 60 * 60 * 24 * 5 * 1_000;

src/constants.ts

@@ -1,7 +1,19 @@
+import { spawnSync } from 'child_process';
 import { existsSync } from 'fs';
-import { rm } from 'fs/promises';
+import { copyFile, rm, stat, writeFile } from 'fs/promises';
+import { basename, join, relative } from 'path';
 
-import { DeployConfig, PathFactory } from '../utils';
+import {
+    DEFAULT_REGION,
+    COOKIE_VERSION,
+    FIREBASE_ADMIN_VERSION,
+    FIREBASE_FRAMEWORKS_VERSION,
+    FIREBASE_FUNCTIONS_VERSION,
+    LRU_CACHE_VERSION
+} from '../constants';
+import { DeployConfig, findDependency, PathFactory } from '../utils';
+
+const NODE_VERSION = parseInt(process.versions.node, 10).toString();
 
 const dynamicImport = (getProjectPath: PathFactory) => {
     const exists = (...files: string[]) => files.some(file => existsSync(getProjectPath(file)));
@@ -14,5 +26,82 @@ const dynamicImport = (getProjectPath: PathFactory) => {
 export const build = async (config: DeployConfig | Required<DeployConfig>, getProjectPath: PathFactory) => {
     const command = await dynamicImport(getProjectPath);
     await rm(config.dist, { recursive: true, force: true });
-    return command.build(config, getProjectPath);
+    const results = await command.build(config, getProjectPath);
+    const { usingCloudFunctions, packageJson, framework, bootstrapScript, rewrites, redirects, headers } = results;
+    let usesFirebaseConfig = false;
+    if (usingCloudFunctions) {
+        const firebaseAuthDependency = findDependency('@firebase/auth', getProjectPath());
+        usesFirebaseConfig = !!firebaseAuthDependency;
+
+        packageJson.main = 'server.js';
+        delete packageJson.devDependencies;
+        packageJson.dependencies ||= {};
+        packageJson.dependencies['firebase-frameworks'] = FIREBASE_FRAMEWORKS_VERSION;
+        const functionsDist = join(config.dist, 'functions');
+        for (const [name, version] of Object.entries(packageJson.dependencies as Record<string, string>)) {
+            if (version.startsWith('file:')) {
+                const path = version.split(':')[1];
+                const stats = await stat(path);
+                if (stats.isDirectory()) {
+                    const result = spawnSync('npm', ['pack', relative(functionsDist, path)], { cwd: functionsDist });
+                    if (!result.stdout) continue;
+                    const filename = result.stdout.toString().trim();
+                    packageJson.dependencies[name] = `file:${filename}`;
+                } else {
+                    const filename = basename(path);
+                    await copyFile(path, join(functionsDist, filename));
+                    packageJson.dependencies[name] = `file:${filename}`;
+                }
+            }
+        }
+
+        // TODO(jamesdaniels) test these with semver, error if already set out of range
+        packageJson.dependencies['firebase-admin'] ||= FIREBASE_ADMIN_VERSION;
+        packageJson.dependencies['firebase-functions'] ||= FIREBASE_FUNCTIONS_VERSION;
+        if (usesFirebaseConfig) {
+            packageJson.dependencies['cookie'] ||= COOKIE_VERSION;
+            packageJson.dependencies['lru-cache'] ||= LRU_CACHE_VERSION;
+        }
+        packageJson.engines ||= {};
+        packageJson.engines.node ||= NODE_VERSION;
+
+        await writeFile(join(functionsDist, 'package.json'), JSON.stringify(packageJson, null, 2));
+
+        await copyFile(getProjectPath('package-lock.json'), join(functionsDist, 'package-lock.json')).catch(() => {});
+
+        const npmInstall = spawnSync('npm', ['i', '--only', 'production', '--no-audit', '--silent'], { cwd: functionsDist });
+        if (npmInstall.status) {
+            console.error(npmInstall.output.toString());
+        }
+
+        // TODO(jamesdaniels) allow configuration of the Cloud Function
+        await writeFile(join(functionsDist, 'settings.js'), `exports.HTTPS_OPTIONS = {};
+exports.FRAMEWORK = '${framework}';
+`);
+
+        if (bootstrapScript) {
+            await writeFile(join(functionsDist, 'bootstrap.js'), bootstrapScript);
+        }
+        if (usesFirebaseConfig) {
+            await writeFile(join(functionsDist, 'server.js'), "exports.ssr = require('firebase-frameworks/server/firebase-aware').ssr;\n");
+        } else {
+            await writeFile(join(functionsDist, 'server.js'), "exports.ssr = require('firebase-frameworks/server').ssr;\n");
+        }
+
+        await writeFile(join(functionsDist, 'functions.yaml'), JSON.stringify({
+            endpoints: {
+                [config.function!.name]: {
+                    platform:  'gcfv2',
+                    region: [DEFAULT_REGION],
+                    labels: {},
+                    httpsTrigger: {},
+                    entryPoint: 'ssr'
+                }
+            },
+            specVersion: 'v1alpha1',
+            // TODO(jamesdaniels) add persistent disk if needed
+            requiredAPIs: []
+        }, null, 2));
+    }
+    return { usingCloudFunctions, rewrites, redirects, headers, usesFirebaseConfig };
 };

src/firebase.ts

@@ -13,20 +13,18 @@
 // limitations under the License.
 
 import { readFile, mkdir, copyFile, stat } from 'fs/promises';
-import { dirname, extname, join } from 'path';
-import type { NextConfig } from 'next/dist/server/config-shared';
+import { dirname, extname, join, relative, resolve, sep } from 'path';
 import type { Header, Rewrite, Redirect } from 'next/dist/lib/load-custom-routes';
+import type { NextConfig } from 'next';
 import nextBuild from 'next/dist/build';
 import { copy } from 'fs-extra';
+import * as webpack from 'webpack';
+import { lt } from 'semver';
 
-import { DeployConfig, PathFactory, exec } from '../../utils';
+import { DeployConfig, PathFactory, exec, findDependency } from '../../utils';
 
 export const build = async (config: DeployConfig | Required<DeployConfig>, getProjectPath: PathFactory) => {
 
-    await nextBuild(getProjectPath(), null, false, false, true);
-    // TODO be a bit smarter about this
-    await exec(`${getProjectPath('node_modules', '.bin', 'next')} export`, { cwd: getProjectPath() }).catch(() => {});
-
     let nextConfig: NextConfig;
     try {
         const { default: loadConfig }: typeof import('next/dist/server/config') = require(getProjectPath('node_modules', 'next', 'dist', 'server', 'config'));
@@ -37,6 +35,37 @@ export const build = async (config: DeployConfig | Required<DeployConfig>, getPr
         nextConfig = await import(getProjectPath('next.config.js'));
     }
 
+    let usesFirebaseConfig = false;
+    const firebaseDependency = findDependency('firebase', getProjectPath());
+    let overrideConfig: NextConfig|null = null;
+    if (firebaseDependency) {
+        overrideConfig = {
+            ...nextConfig,
+            webpack: (config, context) => {
+                let newConfig = config;
+                if (nextConfig.webpack) newConfig = nextConfig.webpack(config, context);
+                const plugin = new webpack.NormalModuleReplacementPlugin(/^firebase\/(auth)$/, (resource: any) => {
+                    // Don't allow firebase-frameworks to recurse
+                    const frameworksRoot = resolve(`${dirname(require.resolve('../..'))}${sep}..`);
+                    if (resource.context.startsWith(frameworksRoot)) return;
+                    // Don't mutate their node_modules
+                    if (relative(getProjectPath(), resource.context).startsWith(`node_modules${sep}`)) return;
+                    const client = resource.request.split('firebase/')[1];
+                    // auth requires beforeAuthStateChanged, released in 9.7.1
+                    if (client === 'auth' && lt(firebaseDependency.version, '9.7.1')) return;
+                    resource.request = require.resolve(`../../client/${client}`);
+                });
+                newConfig.plugins ||= [];
+                newConfig.plugins.push(plugin);
+                return newConfig;
+            }
+        }
+    }
+
+    await nextBuild(getProjectPath(), overrideConfig as any, false, false, true);
+    // TODO be a bit smarter about this
+    await exec(`${getProjectPath('node_modules', '.bin', 'next')} export`, { cwd: getProjectPath() }).catch(() => {});
+
     // SEMVER these defaults are only needed for Next 11
     const { distDir='.next', basePath='' } = nextConfig;
 
@@ -123,7 +152,7 @@ export const build = async (config: DeployConfig | Required<DeployConfig>, getPr
         return { source, destination };
     }).filter(it => it);
 
-    return { usingCloudFunctions, headers, redirects, rewrites, framework: 'next.js', packageJson, bootstrapScript: null };
+    return { usingCloudFunctions, usesFirebaseConfig, headers, redirects, rewrites, framework: 'next.js', packageJson, bootstrapScript: null };
 }