feat(core): Add provider strategy

Author: Ehesp

packages/core/src/auth.ts

@@ -29,7 +29,6 @@ import {
   linkWithCredential,
   PhoneAuthProvider,
   signInWithCredential,
-  signInWithRedirect,
   UserCredential,
 } from "firebase/auth";
 import { FirebaseUIConfiguration } from "./config";
@@ -214,20 +213,24 @@ export async function signInAnonymously(ui: FirebaseUIConfiguration): Promise<Us
   }
 }
 
-export async function signInWithProvider(ui: FirebaseUIConfiguration, provider: AuthProvider): Promise<void> {
+export async function signInWithProvider(ui: FirebaseUIConfiguration, provider: AuthProvider): Promise<UserCredential | never> {
   try {
     if (hasBehavior(ui, "autoUpgradeAnonymousProvider")) {
-      await getBehavior(ui, "autoUpgradeAnonymousProvider")(ui, provider);
-      // If we get to here, the user is not anonymous, otherwise they
-      // have been redirected to the provider's sign in page.
+      const credential = await getBehavior(ui, "autoUpgradeAnonymousProvider")(ui, provider);
+
+      // If we got here, the user is either not anonymous, or they have been linked
+      // via a popup, and the credential has been created.
+      if (credential) {
+        return handlePendingCredential(ui, credential);
+      }
     }
 
-    ui.setState("pending");
+    const strategy = getBehavior(ui, "providerSignInStrategy");
+    const result = await strategy(ui, provider);
 
-    // TODO(ehesp): Handle popup or redirect based on behavior
-    await signInWithRedirect(ui.auth, provider);
-    // We don't modify state here since the user is redirected.
-    // If we support popups, we'd need to modify state here.
+    // If we got here, the user has been signed in via a popup.
+    // Otherwise, they will have been redirected.
+    return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
   } finally {

packages/core/src/behaviors/anonymous-upgrade.ts

@@ -1,11 +1,11 @@
 import { AuthCredential, AuthProvider, linkWithCredential, linkWithRedirect } from "firebase/auth";
 import { FirebaseUIConfiguration } from "~/config";
 import { RedirectHandler } from "./utils";
+import { getBehavior } from "~/behaviors";
 
 export const autoUpgradeAnonymousCredentialHandler = async (ui: FirebaseUIConfiguration, credential: AuthCredential) => {
   const currentUser = ui.auth.currentUser;
 
-  // Check if the user is anonymous. If not, we can't upgrade them.
   if (!currentUser?.isAnonymous) {
     return;
   }
@@ -24,11 +24,7 @@ export const autoUpgradeAnonymousProviderHandler = async (ui: FirebaseUIConfigur
     return;
   }
 
-  ui.setState("pending");
-  // TODO... this should use redirect OR popup
-  await linkWithRedirect(currentUser, provider);
-  // We don't modify state here since the user is redirected.
-  // If we support popups, we'd need to modify state here.
+  return getBehavior(ui, "providerLinkStrategy")(ui, currentUser, provider);
 };
 
 export const autoUpgradeAnonymousUserRedirectHandler: RedirectHandler = async () => {

packages/core/src/behaviors/index.ts

@@ -3,6 +3,7 @@ import type { RecaptchaVerifier } from "firebase/auth";
 import * as anonymousUpgradeHandlers from "./anonymous-upgrade";
 import * as autoAnonymousLoginHandlers from "./auto-anonymous-login";
 import * as recaptchaHandlers from "./recaptcha";
+import * as providerStrategyHandlers from "./provider-strategy";
 import {
   callableBehavior,
   initBehavior,
@@ -22,6 +23,8 @@ type Registry = {
     typeof anonymousUpgradeHandlers.autoUpgradeAnonymousUserRedirectHandler
   >;
   recaptchaVerification: CallableBehavior<(ui: FirebaseUIConfiguration, element: HTMLElement) => RecaptchaVerifier>;
+  providerSignInStrategy: CallableBehavior<providerStrategyHandlers.ProviderSignInStrategyHandler>;
+  providerLinkStrategy: CallableBehavior<providerStrategyHandlers.ProviderLinkStrategyHandler>;
 };
 
 export type Behavior<T extends keyof Registry = keyof Registry> = Pick<Registry, T>;
@@ -55,6 +58,20 @@ export function recaptchaVerification(options?: RecaptchaVerificationOptions): B
   };
 }
 
+export function providerRedirectStrategy(): Behavior<"providerSignInStrategy" | "providerLinkStrategy"> {
+  return {
+    providerSignInStrategy: callableBehavior(providerStrategyHandlers.signInWithRediectHandler),
+    providerLinkStrategy: callableBehavior(providerStrategyHandlers.linkWithRedirectHandler),
+  };
+}
+
+export function providerPopupStrategy(): Behavior<"providerSignInStrategy" | "providerLinkStrategy"> {
+  return {
+    providerSignInStrategy: callableBehavior(providerStrategyHandlers.signInWithPopupHandler),
+    providerLinkStrategy: callableBehavior(providerStrategyHandlers.linkWithPopupHandler),
+  };
+}
+
 export function hasBehavior<T extends keyof Registry>(ui: FirebaseUIConfiguration, key: T): boolean {
   return !!ui.behaviors[key];
 }
@@ -69,4 +86,5 @@ export function getBehavior<T extends keyof Registry>(ui: FirebaseUIConfiguratio
 
 export const defaultBehaviors: Behavior<"recaptchaVerification"> = {
   ...recaptchaVerification(),
+  ...providerRedirectStrategy(),
 };

packages/core/src/behaviors/provider-strategy.ts

@@ -0,0 +1,29 @@
+import { AuthProvider, linkWithPopup, linkWithRedirect, signInWithPopup, signInWithRedirect, User, UserCredential } from "firebase/auth";
+import { FirebaseUIConfiguration } from "~/config";
+
+export type ProviderSignInStrategyHandler = (ui: FirebaseUIConfiguration, provider: AuthProvider) => Promise<never | UserCredential>
+export type ProviderLinkStrategyHandler = (ui: FirebaseUIConfiguration, user: User, provider: AuthProvider) => Promise<never | UserCredential>;
+
+export const signInWithRediectHandler: ProviderSignInStrategyHandler = async (ui, provider) => {
+  ui.setState("pending");
+  return signInWithRedirect(ui.auth, provider);
+};
+
+export const signInWithPopupHandler: ProviderSignInStrategyHandler = async (ui, provider) => {
+  ui.setState("pending");
+  const result = await signInWithPopup(ui.auth, provider);
+  ui.setState("idle");
+  return result;
+};
+
+export const linkWithRedirectHandler: ProviderLinkStrategyHandler = async (ui, user, provider) => {
+  ui.setState("pending");
+  return linkWithRedirect(user, provider);
+};
+
+export const linkWithPopupHandler: ProviderLinkStrategyHandler = async (ui, user, provider) => {
+  ui.setState("pending");
+  const result = await linkWithPopup(user, provider);
+  ui.setState("idle");
+  return result;
+};