in the spirit of 'https://firebase.google.com/docs/auth/web/custom-dependencies' and 'firebase/firebase-js-sdk#4946' I am now deferring the loading of 'signInWithPopup' iFrame ... which pagespeed insights complains about. This is done by swapping getAuth(app) for initializeAuth(app,..) and then contextually loading the 'browserPopupRedirectResolver' method and passing as a third parameter to 'signInWithPopup' in both google and twitter login functions

Author: brightowltutoring

.svelte-kit/ambient.d.ts

@@ -123,7 +123,6 @@ declare module '$env/static/private' {
 	export const npm_node_execpath: string;
 	export const npm_config_prefix: string;
 	export const COLORTERM: string;
-	export const NODE_ENV: string;
 }
 
 /**
@@ -257,7 +256,6 @@ declare module '$env/dynamic/private' {
 		npm_node_execpath: string;
 		npm_config_prefix: string;
 		COLORTERM: string;
-		NODE_ENV: string;
 		[key: `PUBLIC_${string}`]: undefined;
 		[key: string]: string | undefined;
 	}

src/lib/Login/loginFunctions.js

@@ -42,7 +42,9 @@ export async function magicLinkToEmail(EMAIL) {
 // TODO: nov29.2022 : google login didnt work with 'signInWithRedirect' logic, so assuming the same for twitter login .. getting rid of the if-else logic and keeping only the 'signInWithPopup' logic
 export async function TwitterLogin() {
   // const auth = await import("$lib/firebase");
-  const { TwitterAuthProvider } = await import("firebase/auth");
+  const { TwitterAuthProvider, browserPopupRedirectResolver } = await import(
+    "firebase/auth"
+  );
   const provider = new TwitterAuthProvider();
 
   // if (get(lessThan768)) {
@@ -73,7 +75,8 @@ export async function TwitterLogin() {
   // else {
   const { signInWithPopup } = await import("firebase/auth");
   // console.log("twitter provider?", provider.providerId);
-  signInWithPopup(auth, provider)
+  // signInWithPopup(auth, provider)
+  signInWithPopup(auth, provider, browserPopupRedirectResolver)
     .then((result) => {
       // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
       // You can use these server side with your app's credentials to access the Twitter API.
@@ -101,11 +104,13 @@ export async function TwitterLogin() {
 // TODO: nov29.2022 noticed that 'signinWithRedirect' logic did not sign me in ... furthermore 'signInWithPopup' worked perfectly on both the PWA and on the mobile version of the website ... It appears firebase has consolidated the two??
 export async function GoogleLogin() {
   // const auth = await import("$lib/firebase");
+
   const {
     GoogleAuthProvider,
     // setPersistence,
     // browserSessionPersistence,
     // inMemoryPersistence,
+    browserPopupRedirectResolver,
   } = await import("firebase/auth");
 
   // if (get(lessThan768)) {
@@ -134,7 +139,8 @@ export async function GoogleLogin() {
 
   // setPersistence(auth, browserSessionPersistence).then(() => {
   const provider = new GoogleAuthProvider();
-  signInWithPopup(auth, provider)
+  // signInWithPopup(auth, provider)
+  signInWithPopup(auth, provider, browserPopupRedirectResolver)
     .then((result) => {
       // This gives you a Google Access Token. You can use it to access the Google API.
       const credential = GoogleAuthProvider.credentialFromResult(result);

src/lib/firebase.js

@@ -1,6 +1,13 @@
 import * as NV from "$env/static/public";
 import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
+// import { getAuth } from "firebase/auth";
+
+import {
+  initializeAuth,
+  indexedDBLocalPersistence,
+  browserLocalPersistence,
+  browserSessionPersistence,
+} from "firebase/auth";
 
 // import { getFirestore } from "firebase/firestore/lite";
 
@@ -14,7 +21,16 @@ const firebaseConfig = {
 };
 
 export const app = initializeApp(firebaseConfig);
-export const auth = getAuth(app);
+// export const auth = getAuth(app);
+
+export const auth = initializeAuth(app, {
+  persistence: [
+    indexedDBLocalPersistence,
+    browserLocalPersistence,
+    browserSessionPersistence,
+  ],
+});
+
 // this is used when website is mounted to persist login state ... maybe import when login clicked instead??
 
 // idea: import getAuth on page load IF visitor as logged in before ... e.g. can set a localstorage variable ("previouslyLoggedIn") inside the logged in logic (not here)

vite.config.js

@@ -4,7 +4,7 @@ import { sveltekit } from "@sveltejs/kit/vite";
 const config = {
   plugins: [sveltekit()],
   build: {
-    minify: true,
+    minify: true, // added dec 13,2022; not sure of perf gains
     rollupOptions: {
       external: [
         "/Users/brightowl/Documents/GitHub/sveltekit/node_modules/dropzone/dist/dropzone.css",