@mehdad67/apitogo 0.1.24

package/src/lib/authentication/providers/firebase.tsx

@@ -0,0 +1,486 @@
+import { type FirebaseApp, initializeApp } from "firebase/app";
+import {
+  type Auth,
+  createUserWithEmailAndPassword,
+  getAuth,
+  isSignInWithEmailLink,
+  sendEmailVerification,
+  sendPasswordResetEmail,
+  sendSignInLinkToEmail,
+  signInWithEmailAndPassword,
+  signInWithEmailLink,
+  signInWithPopup,
+  signOut,
+  type User,
+} from "firebase/auth";
+import type { FirebaseAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { ZudokuError } from "../../util/invariant.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { SignOut } from "../components/SignOut.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState } from "../state.js";
+import { EmailLinkCallbackUi } from "../ui/EmailLinkCallbackUi.js";
+import { EmailLinkSentUi } from "../ui/EmailLinkSentUi.js";
+import { EmailLinkSignInUi } from "../ui/EmailLinkSignInUi.js";
+import { EmailVerificationUi } from "../ui/EmailVerificationUi.js";
+import {
+  ZudokuPasswordResetUi,
+  ZudokuSignInUi,
+  ZudokuSignUpUi,
+} from "../ui/ZudokuAuthUi.js";
+
+export type FirebaseProviderData = {
+  type: "firebase";
+  user: User;
+};
+
+declare module "../state.js" {
+  interface ProviderDataRegistry {
+    firebase: FirebaseProviderData;
+  }
+}
+
+import { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
+
+class FirebaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private readonly app: FirebaseApp;
+  private readonly auth: Auth;
+  private readonly providers: string[];
+  private readonly enableUsernamePassword: boolean;
+  private readonly enableEmailLink: boolean;
+
+  constructor(config: FirebaseAuthenticationConfig) {
+    super();
+
+    this.app = initializeApp({
+      apiKey: config.apiKey,
+      authDomain: config.authDomain,
+      projectId: config.projectId,
+      storageBucket: config.storageBucket,
+      messagingSenderId: config.messagingSenderId,
+      appId: config.appId,
+      measurementId: config.measurementId,
+    });
+    this.auth = getAuth(this.app);
+    this.providers =
+      config.providers?.filter((p) => p !== "password" && p !== "emailLink") ??
+      [];
+    this.enableUsernamePassword =
+      config.providers?.includes("password") ?? false;
+    this.enableEmailLink = config.providers?.includes("emailLink") ?? false;
+  }
+
+  async initialize() {
+    await this.auth.authStateReady();
+  }
+
+  async signRequest(request: Request): Promise<Request> {
+    const accessToken = await this.auth.currentUser?.getIdToken();
+    if (!accessToken) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  }
+
+  signUp = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signup`,
+    );
+  };
+
+  signIn = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signin?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signin`,
+    );
+  };
+
+  requestEmailVerification = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    if (!this.auth.currentUser) {
+      throw new ZudokuError("User is not authenticated", {
+        title: "User not authenticated",
+      });
+    }
+
+    await sendEmailVerification(this.auth.currentUser);
+    void navigate(
+      redirectTo
+        ? `/verify-email?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/verify-email`,
+    );
+  };
+
+  private getEmailLinkActionCodeSettings(redirectTo?: string) {
+    const callbackUrl = new URL(window.location.origin);
+    callbackUrl.pathname = joinUrl(
+      import.meta.env.BASE_URL,
+      "/signin/email-link-callback",
+    );
+    if (redirectTo) {
+      callbackUrl.searchParams.set("redirectTo", redirectTo);
+    }
+    return {
+      url: callbackUrl.toString(),
+      handleCodeInApp: true as const,
+    };
+  }
+
+  private async sendEmailLink(email: string, redirectTo?: string) {
+    try {
+      await sendSignInLinkToEmail(
+        this.auth,
+        email,
+        this.getEmailLinkActionCodeSettings(redirectTo),
+      );
+    } catch (error) {
+      throw new Error(getFirebaseErrorMessage(error), { cause: error });
+    }
+    localStorage.setItem(EMAIL_LINK_STORAGE_KEY, email);
+  }
+
+  getRoutes = () => {
+    return [
+      {
+        path: "/verify-email",
+        element: (
+          <EmailVerificationUi
+            onResendVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await sendEmailVerification(this.auth.currentUser);
+            }}
+            onCheckVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await this.auth.currentUser.reload();
+              const isVerified = this.auth.currentUser.emailVerified;
+
+              if (isVerified) {
+                await this.auth.currentUser.getIdToken(true);
+                await this.setUserLoggedIn(this.auth.currentUser);
+              }
+
+              return isVerified;
+            }}
+          />
+        ),
+      },
+      {
+        path: "/reset-password",
+        element: (
+          <ZudokuPasswordResetUi
+            onPasswordReset={async (email: string) => {
+              try {
+                await sendPasswordResetEmail(this.auth, email);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signin",
+        element: (
+          <ZudokuSignInUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            onOAuthSignIn={async (providerId: string) => {
+              useAuthState.setState({ isPending: true });
+              const provider = await getProviderForId(providerId);
+              if (!provider) {
+                throw new AuthorizationError(
+                  `Provider ${providerId} not found`,
+                );
+              }
+              const result = await signInWithPopup(this.auth, provider);
+              useAuthState.setState({ isPending: false });
+              useAuthState.getState().setLoggedIn({
+                providerData: { type: "firebase", user: result.user },
+                profile: {
+                  sub: result.user.uid,
+                  email: result.user.email ?? undefined,
+                  name: result.user.displayName ?? undefined,
+                  emailVerified: result.user.emailVerified,
+                  pictureUrl: result.user.photoURL ?? undefined,
+                },
+              });
+            }}
+            onUsernamePasswordSignIn={async (
+              email: string,
+              password: string,
+            ) => {
+              try {
+                useAuthState.setState({ isPending: false });
+                const result = await signInWithEmailAndPassword(
+                  this.auth,
+                  email,
+                  password,
+                );
+                await this.setUserLoggedIn(result.user);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+            enableEmailLink={this.enableEmailLink}
+          />
+        ),
+      },
+      {
+        path: "/signup",
+        element: (
+          <ZudokuSignUpUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            enableEmailLink={this.enableEmailLink}
+            onOAuthSignUp={async (providerId: string) => {
+              const provider = await getProviderForId(providerId);
+              if (!provider) {
+                throw new AuthorizationError(
+                  `Provider ${providerId} not found`,
+                );
+              }
+              await signInWithPopup(this.auth, provider);
+            }}
+            onUsernamePasswordSignUp={async (
+              email: string,
+              password: string,
+            ) => {
+              useAuthState.setState({ isPending: true });
+              const createUser = await createUserWithEmailAndPassword(
+                this.auth,
+                email,
+                password,
+              );
+              await this.setUserLoggedIn(createUser.user);
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signin/email-link",
+        element: (
+          <EmailLinkSignInUi
+            onSubmit={async (email: string, redirectTo?: string) => {
+              await this.sendEmailLink(email, redirectTo);
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signin/email-link-sent",
+        element: (
+          <ClientOnly>
+            <EmailLinkSentUi
+              onResendEmailLink={async () => {
+                const email = localStorage.getItem(EMAIL_LINK_STORAGE_KEY);
+                if (!email) {
+                  throw new ZudokuError(
+                    "No email address found. Please go back and try again.",
+                    { title: "Email not found" },
+                  );
+                }
+                await this.sendEmailLink(email);
+              }}
+            />
+          </ClientOnly>
+        ),
+      },
+      {
+        path: "/signin/email-link-callback",
+        element: (
+          <ClientOnly>
+            <EmailLinkCallbackUi
+              onCompleteSignIn={async (email: string) => {
+                try {
+                  const result = await signInWithEmailLink(
+                    this.auth,
+                    email,
+                    window.location.href,
+                  );
+                  await this.setUserLoggedIn(result.user);
+                } catch (error) {
+                  throw Error(getFirebaseErrorMessage(error), {
+                    cause: error,
+                  });
+                }
+              }}
+              isEmailLinkUrl={(url: string) =>
+                isSignInWithEmailLink(this.auth, url)
+              }
+            />
+          </ClientOnly>
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
+  };
+
+  signOut = async () => {
+    await signOut(this.auth);
+
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+      providerData: undefined,
+    });
+  };
+
+  onPageLoad = async () => {
+    const user = this.auth.currentUser;
+
+    if (user) {
+      await this.setUserLoggedIn(user);
+    } else {
+      useAuthState.setState({ isPending: false });
+    }
+  };
+
+  private async setUserLoggedIn(user: User) {
+    useAuthState.getState().setLoggedIn({
+      profile: {
+        sub: user.uid,
+        email: user.email ?? undefined,
+        name: user.displayName ?? undefined,
+        emailVerified: user.emailVerified,
+        pictureUrl: user.photoURL ?? undefined,
+      },
+      providerData: { type: "firebase", user },
+    });
+  }
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  FirebaseAuthenticationConfig
+> = (options) => new FirebaseAuthenticationProvider(options);
+
+export default supabaseAuth;
+
+const getProviderForId = async (providerId: string) => {
+  switch (providerId) {
+    case "google": {
+      const { GoogleAuthProvider } = await import("firebase/auth");
+      return new GoogleAuthProvider();
+    }
+    case "github": {
+      const { GithubAuthProvider } = await import("firebase/auth");
+      return new GithubAuthProvider();
+    }
+    case "facebook": {
+      const { FacebookAuthProvider } = await import("firebase/auth");
+      return new FacebookAuthProvider();
+    }
+    case "twitter": {
+      const { TwitterAuthProvider } = await import("firebase/auth");
+      return new TwitterAuthProvider();
+    }
+    case "microsoft": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("microsoft.com");
+    }
+    case "apple": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("apple.com");
+    }
+    case "yahoo": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("yahoo.com");
+    }
+  }
+
+  throw new AuthorizationError(`Provider ${providerId} not found`);
+};
+
+const getFirebaseErrorMessage = (error: unknown): string => {
+  if (!(error instanceof Error)) {
+    return "An unexpected error occurred. Please try again.";
+  }
+
+  const errorCode = (error as { code?: string }).code;
+
+  switch (errorCode) {
+    case "auth/email-already-in-use":
+      return "The email address is already used by another account.";
+    case "auth/invalid-email":
+      return "That email address isn't correct.";
+    case "auth/operation-not-allowed":
+      return "This sign-in method is not enabled. Please contact support.";
+    case "auth/weak-password":
+      return "The password must be at least 6 characters long.";
+    case "auth/user-disabled":
+      return "This account has been disabled. Please contact support.";
+    case "auth/user-not-found":
+      return "That email address doesn't match an existing account.";
+    case "auth/wrong-password":
+      return "The email and password you entered don't match.";
+    case "auth/too-many-requests":
+      return "You have entered an incorrect password too many times. Please try again in a few minutes.";
+    case "auth/popup-blocked":
+      return "The sign-in popup was blocked by your browser. Please allow popups and try again.";
+    case "auth/popup-closed-by-user":
+      return "The sign-in popup was closed before completing. Please try again.";
+    case "auth/network-request-failed":
+      return "A network error has occurred. Please check your connection and try again.";
+    case "auth/requires-recent-login":
+      return "Please login again to perform this operation.";
+    case "auth/invalid-credential":
+      return "The credential is invalid or has expired. Please try again.";
+    case "auth/account-exists-with-different-credential":
+      return "An account already exists with the same email address but different sign-in credentials.";
+    case "auth/credential-already-in-use":
+      return "This credential is already associated with a different user account.";
+    case "auth/invalid-verification-code":
+      return "Wrong code. Try again.";
+    case "auth/invalid-verification-id":
+      return "The verification ID is invalid.";
+    case "auth/missing-verification-code":
+      return "Please enter the verification code.";
+    case "auth/user-cancelled":
+      return "Please authorize the required permissions to sign in.";
+    case "auth/expired-action-code":
+      return "This code has expired.";
+    case "auth/invalid-action-code":
+      return "The action code is invalid. This can happen if the code is malformed or has already been used.";
+    case "auth/unauthorized-domain":
+      return "This domain is not authorized for OAuth operations.";
+    default:
+      return (
+        error.message ||
+        "An error occurred during authentication. Please try again."
+      );
+  }
+};