zudoku 0.66.2 → 0.66.3

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

@@ -3,12 +3,15 @@ import {
   type Auth,
   createUserWithEmailAndPassword,
   getAuth,
+  sendEmailVerification,
+  sendPasswordResetEmail,
   signInWithEmailAndPassword,
   signInWithPopup,
   signOut,
   type User,
 } from "firebase/auth";
 import type { FirebaseAuthenticationConfig } from "../../../config/config.js";
+import { ZudokuError } from "../../util/invariant.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
   AuthActionContext,
@@ -19,7 +22,12 @@ import type {
 import { SignOut } from "../components/SignOut.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState } from "../state.js";
-import { ZudokuSignInUi, ZudokuSignUpUi } from "../ui/ZudokuAuthUi.js";
+import { EmailVerificationUi } from "../ui/EmailVerificationUi.js";
+import {
+  ZudokuPasswordResetUi,
+  ZudokuSignInUi,
+  ZudokuSignUpUi,
+} from "../ui/ZudokuAuthUi.js";
 
 class FirebaseAuthenticationProvider
   extends CoreAuthenticationPlugin
@@ -28,6 +36,7 @@ class FirebaseAuthenticationProvider
   private readonly app: FirebaseApp;
   private readonly auth: Auth;
   private readonly providers: string[];
+  private readonly enableUsernamePassword: boolean;
 
   constructor(config: FirebaseAuthenticationConfig) {
     super();
@@ -42,7 +51,13 @@ class FirebaseAuthenticationProvider
       measurementId: config.measurementId,
     });
     this.auth = getAuth(this.app);
-    this.providers = config.providers ?? [];
+    this.providers = config.providers?.filter((p) => p !== "password") ?? [];
+    this.enableUsernamePassword =
+      config.providers?.includes("password") ?? false;
+  }
+
+  async initialize() {
+    await this.auth.authStateReady();
   }
 
   async signRequest(request: Request): Promise<Request> {
@@ -76,13 +91,77 @@ class FirebaseAuthenticationProvider
     );
   };
 
+  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`,
+    );
+  };
+
   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);
@@ -109,7 +188,13 @@ class FirebaseAuthenticationProvider
               password: string,
             ) => {
               try {
-                await signInWithEmailAndPassword(this.auth, email, password);
+                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 });
               }
@@ -122,6 +207,7 @@ class FirebaseAuthenticationProvider
         element: (
           <ZudokuSignUpUi
             providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
             onOAuthSignUp={async (providerId: string) => {
               const provider = await getProviderForId(providerId);
               if (!provider) {
@@ -135,7 +221,13 @@ class FirebaseAuthenticationProvider
               email: string,
               password: string,
             ) => {
-              await createUserWithEmailAndPassword(this.auth, email, password);
+              useAuthState.setState({ isPending: true });
+              const createUser = await createUserWithEmailAndPassword(
+                this.auth,
+                email,
+                password,
+              );
+              await this.setUserLoggedIn(createUser.user);
             }}
           />
         ),
@@ -162,13 +254,13 @@ class FirebaseAuthenticationProvider
     const user = this.auth.currentUser;
 
     if (user) {
-      await this.updateUserState(user);
+      await this.setUserLoggedIn(user);
     } else {
       useAuthState.setState({ isPending: false });
     }
   };
 
-  private async updateUserState(user: User) {
+  private async setUserLoggedIn(user: User) {
     useAuthState.getState().setLoggedIn({
       profile: {
         sub: user.uid,

package/src/lib/authentication/ui/EmailVerificationUi.tsx

@@ -0,0 +1,129 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
+import { Navigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+
+export const EmailVerificationUi = ({
+  onResendVerification,
+  onCheckVerification,
+}: {
+  onResendVerification: () => Promise<void>;
+  onCheckVerification: () => Promise<boolean>;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const resendMutation = useMutation({
+    mutationFn: async () => {
+      await onResendVerification();
+    },
+  });
+
+  const checkVerificationMutation = useQuery({
+    queryKey: ["check-verification"],
+    queryFn: async () => {
+      const isVerified = await onCheckVerification();
+      return isVerified;
+    },
+  });
+
+  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
+
+  return (
+    <AuthCard>
+      {checkVerificationMutation.data === true && (
+        <Navigate to={relativeRedirectTo} />
+      )}
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <MailCheck className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>We've sent a verification link</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {checkVerificationMutation.isSuccess &&
+          !checkVerificationMutation.data && (
+            <Alert>
+              <AlertDescription>
+                {checkVerificationMutation.isFetching
+                  ? "Checking verification..."
+                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+        <div className="space-y-4">
+          <ActionButton
+            onClick={() => void checkVerificationMutation.refetch()}
+            isPending={checkVerificationMutation.isFetching}
+            className="w-full"
+          >
+            <div className="flex items-center gap-2">
+              <CheckIcon className="h-4 w-4" /> Continue
+            </div>
+          </ActionButton>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-card px-2 text-muted-foreground">
+                Didn't receive the email?
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => void resendMutation.mutate()}
+            disabled={resendMutation.isPending}
+            className="w-full gap-2"
+          >
+            {resendMutation.isPending ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            Resend verification email
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Make sure to check your spam folder if you don't see the email.
+        </p>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");

package/src/lib/authentication/ui/ZudokuAuthUi.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../ui/Form.js";
 import { cn } from "../../util/cn.js";
 import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
 import AppleIcon from "./icons/Apple.js";
 import FacebookIcon from "./icons/Facebook.js";
 import GithubIcon from "./icons/Github.js";
@@ -137,8 +138,10 @@ export const ZudokuSignInUi = ({
   providers,
   onOAuthSignIn,
   onUsernamePasswordSignIn,
+  enableUsernamePassword,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignIn: (providerId: string) => Promise<void>;
   onUsernamePasswordSignIn: (email: string, password: string) => Promise<void>;
 }) => {
@@ -146,6 +149,8 @@ export const ZudokuSignInUi = ({
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
 
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
   const invalidProviders = providers.filter(
     (provider) => !isValidAuthProviderId(provider),
   );
@@ -165,7 +170,7 @@ export const ZudokuSignInUi = ({
       await onUsernamePasswordSignIn(email, password);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
   const signInByProviderMutation = useMutation({
@@ -173,7 +178,7 @@ export const ZudokuSignInUi = ({
       await onOAuthSignIn(providerId);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
 
@@ -202,24 +207,38 @@ export const ZudokuSignInUi = ({
             <AlertDescription>{error?.message}</AlertDescription>
           </Alert>
         )}
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signInUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign in"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signInByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <>
+            <EmailPasswordForm
+              form={form}
+              onSubmit={(data) =>
+                void signInUsernameMutation.mutate({
+                  email: data.email,
+                  password: data.password,
+                })
+              }
+              submitLabel="Sign in"
+              isPending={pending}
+            />
+            <Link
+              to="/reset-password"
+              className="text-sm text-muted-foreground text-right -mt-2"
+            >
+              Forgot password?
+            </Link>
+          </>
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signInByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signup" className="text-sm text-muted-foreground">
           Don't have an account? Sign up.
         </Link>
@@ -230,13 +249,21 @@ export const ZudokuSignInUi = ({
 
 export const ZudokuSignUpUi = ({
   providers,
+  enableUsernamePassword,
   onOAuthSignUp,
   onUsernamePasswordSignUp,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignUp: (providerId: string) => Promise<void>;
   onUsernamePasswordSignUp: (email: string, password: string) => Promise<void>;
 }) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  const relativeRedirectTo = redirectTo?.replace(window.location.origin, "");
+
   if (!isAuthProviderIdArray(providers)) {
     throw new Error("Invalid auth provider IDs");
   }
@@ -245,12 +272,18 @@ export const ZudokuSignUpUi = ({
     mutationFn: async ({ email, password }: FormFields) => {
       await onUsernamePasswordSignUp(email, password);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const signUpByProviderMutation = useMutation({
     mutationFn: async ({ providerId }: { providerId: string }) => {
       await onOAuthSignUp(providerId);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const form = useForm<FormFields>({
@@ -279,24 +312,30 @@ export const ZudokuSignUpUi = ({
           </Alert>
         )}
 
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signUpUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign up"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signUpByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <EmailPasswordForm
+            form={form}
+            onSubmit={(data) =>
+              void signUpUsernameMutation.mutate({
+                email: data.email,
+                password: data.password,
+              })
+            }
+            submitLabel="Sign up"
+            isPending={pending}
+          />
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signUpByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signin" className="text-sm text-muted-foreground">
           Already have an account? Sign in.
         </Link>
@@ -343,3 +382,96 @@ const ProviderSeparator = ({ providers }: { providers: AuthProviderId[] }) => {
     )
   );
 };
+
+export const ZudokuPasswordResetUi = ({
+  onPasswordReset,
+}: {
+  onPasswordReset: (email: string) => Promise<void>;
+}) => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const passwordResetMutation = useMutation({
+    mutationFn: async ({ email }: { email: string }) => {
+      await onPasswordReset(email);
+    },
+    onSuccess: () => {
+      setIsSubmitted(true);
+    },
+  });
+
+  const form = useForm<{ email: string }>({
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const error = passwordResetMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Reset password</CardTitle>
+        <CardDescription>
+          {isSubmitted
+            ? "Check your email for a password reset link."
+            : "Enter your email address and we'll send you a link to reset your password."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+        {isSubmitted ? (
+          <div className="flex flex-col gap-4">
+            <Alert>
+              <AlertTitle>Email sent</AlertTitle>
+              <AlertDescription>
+                If an account exists with that email address, you will receive a
+                password reset link shortly.
+              </AlertDescription>
+            </Alert>
+            <Link to="/signin">
+              <Button variant="outline" className="w-full">
+                Back to sign in
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit((data) =>
+                  passwordResetMutation.mutate({ email: data.email }),
+                )}
+                className="flex flex-col gap-2"
+              >
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="you@example.com"
+                      {...form.register("email")}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+                <ActionButton
+                  type="submit"
+                  isPending={passwordResetMutation.isPending}
+                >
+                  Reset password
+                </ActionButton>
+              </form>
+            </Form>
+            <Link to="/signin" className="text-sm text-muted-foreground">
+              Sign in
+            </Link>
+          </>
+        )}
+      </CardContent>
+    </AuthCard>
+  );
+};

package/src/lib/authentication/utils/relativeRedirectUrl.ts

@@ -0,0 +1,12 @@
+import { joinUrl } from "../../util/joinUrl.js";
+
+export const getRelativeRedirectUrl = (redirectTo?: string | null) => {
+  if (!redirectTo) {
+    return "/";
+  }
+
+  return redirectTo.replace(
+    joinUrl(window.location.origin, import.meta.env.BASE_URL),
+    "",
+  );
+};

package/src/lib/errors/ErrorMessage.tsx

@@ -0,0 +1,38 @@
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import { DeveloperHint } from "../components/DeveloperHint.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export function ErrorMessage({ error }: { error: unknown }) {
+  const message =
+    error instanceof Error ? error.message : "Something went wrong";
+
+  const showDeveloperHints = process.env.NODE_ENV === "development";
+
+  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
+  const title =
+    error instanceof ZudokuError ? error.title : "Something went wrong";
+  const stack = error instanceof Error ? error.stack : undefined;
+  const cause = error instanceof Error ? error.cause : undefined;
+
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
+  return (
+    <>
+      <Alert variant="destructive">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{message}</AlertDescription>
+      </Alert>
+      {showDeveloperHints && hint && (
+        <DeveloperHint className="mb-4">{hint}</DeveloperHint>
+      )}
+      {showDeveloperHints && stringError && (
+        <SyntaxHighlight
+          className="max-h-[400px] [&>pre]:p-4"
+          language="js"
+          code={stringError}
+        />
+      )}
+    </>
+  );
+}