Merge branch '@invertase/v7-development' of https://github.com/firebase/firebaseui-web into @invertase/publish-artifacts

Author: Ehesp

examples/react/src/routes.ts

@@ -64,7 +64,7 @@ export const routes = [
   {
     name: "Forgot Password Screen",
     description: "A screen allowing a user to reset their password",
-    path: "/screens/forgot-password-screen",
+    path: "/screens/forgot-password-auth-screen",
     component: ForgotPasswordAuthScreenPage,
   },
   {

examples/react/src/screens/email-link-auth-screen-w-oauth.tsx

@@ -33,7 +33,7 @@ export default function EmailLinkAuthScreenWithOAuthPage() {
   return (
     <EmailLinkAuthScreen
       onEmailSent={() => {
-        alert("Email has been sent");
+        alert("Email has been sent - please check your email");
       }}
       onSignIn={(credential) => {
         console.log(credential);

examples/react/src/screens/sign-in-auth-screen-w-handlers.tsx

@@ -24,9 +24,9 @@ export default function SignInAuthScreenWithHandlersPage() {
   return (
     <SignInAuthScreen
       onForgotPasswordClick={() => {
-        navigate("/screen/forgot-password-auth-screen");
+        navigate("/screens/forgot-password-auth-screen");
       }}
-      onRegisterClick={() => {
+      onSignUpClick={() => {
         navigate("/screens/sign-up-auth-screen");
       }}
     />

examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { PhoneMultiFactorGenerator, TotpMultiFactorGenerator, type MultiFactorInfo } from "firebase/auth";
+import {
+  PhoneMultiFactorGenerator,
+  TotpMultiFactorGenerator,
+  type MultiFactorInfo,
+  type UserCredential,
+} from "firebase/auth";
 import { type ComponentProps, useState } from "react";
 import { getTranslation } from "@invertase/firebaseui-core";
 import { useUI } from "@invertase/firebaseui-react";
@@ -9,7 +14,11 @@ import { SmsMultiFactorAssertionForm } from "./sms-multi-factor-assertion-form";
 import { TotpMultiFactorAssertionForm } from "./totp-multi-factor-assertion-form";
 import { Button } from "@/components/ui/button";
 
-export function MultiFactorAuthAssertionForm() {
+export type MultiFactorAuthAssertionFormProps = {
+  onSuccess?: (credential: UserCredential) => void;
+};
+
+export function MultiFactorAuthAssertionForm(props: MultiFactorAuthAssertionFormProps) {
   const ui = useUI();
   const resolver = ui.multiFactorResolver;
 
@@ -24,11 +33,25 @@ export function MultiFactorAuthAssertionForm() {
 
   if (hint) {
     if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
-      return <SmsMultiFactorAssertionForm hint={hint} />;
+      return (
+        <SmsMultiFactorAssertionForm
+          hint={hint}
+          onSuccess={(credential) => {
+            props.onSuccess?.(credential);
+          }}
+        />
+      );
     }
 
     if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
-      return <TotpMultiFactorAssertionForm hint={hint} />;
+      return (
+        <TotpMultiFactorAssertionForm
+          hint={hint}
+          onSuccess={(credential) => {
+            props.onSuccess?.(credential);
+          }}
+        />
+      );
     }
   }
 

examples/shadcn/src/components/sms-multi-factor-assertion-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { type MultiFactorInfo } from "firebase/auth";
+import { type MultiFactorInfo, type UserCredential } from "firebase/auth";
 
 import { FirebaseUIError, getTranslation } from "@invertase/firebaseui-core";
 import {
@@ -64,7 +64,7 @@ function SmsMultiFactorAssertionPhoneForm(props: SmsMultiFactorAssertionPhoneFor
 
 type SmsMultiFactorAssertionVerifyFormProps = {
   verificationId: string;
-  onSuccess: () => void;
+  onSuccess: (credential: UserCredential) => void;
 };
 
 function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyFormProps) {
@@ -82,8 +82,11 @@ function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyF
 
   const onSubmit = async (values: { verificationId: string; verificationCode: string }) => {
     try {
-      await action({ verificationId: values.verificationId, verificationCode: values.verificationCode });
-      props.onSuccess();
+      const credential = await action({
+        verificationId: values.verificationId,
+        verificationCode: values.verificationCode,
+      });
+      props.onSuccess(credential);
     } catch (error) {
       const message = error instanceof FirebaseUIError ? error.message : String(error);
       form.setError("root", { message });
@@ -126,7 +129,7 @@ function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyF
 
 export type SmsMultiFactorAssertionFormProps = {
   hint: MultiFactorInfo;
-  onSuccess?: () => void;
+  onSuccess?: (credential: UserCredential) => void;
 };
 
 export function SmsMultiFactorAssertionForm(props: SmsMultiFactorAssertionFormProps) {
@@ -146,8 +149,8 @@ export function SmsMultiFactorAssertionForm(props: SmsMultiFactorAssertionFormPr
   return (
     <SmsMultiFactorAssertionVerifyForm
       verificationId={verification.verificationId}
-      onSuccess={() => {
-        props.onSuccess?.();
+      onSuccess={(credential) => {
+        props.onSuccess?.(credential);
       }}
     />
   );

examples/shadcn/src/components/totp-multi-factor-assertion-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type MultiFactorInfo } from "firebase/auth";
+import { type MultiFactorInfo, type UserCredential } from "firebase/auth";
 import { FirebaseUIError, getTranslation } from "@invertase/firebaseui-core";
 import {
   useMultiFactorTotpAuthVerifyFormSchema,
@@ -16,7 +16,7 @@ import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp
 
 type TotpMultiFactorAssertionFormProps = {
   hint: MultiFactorInfo;
-  onSuccess?: () => void;
+  onSuccess?: (credential: UserCredential) => void;
 };
 
 export function TotpMultiFactorAssertionForm(props: TotpMultiFactorAssertionFormProps) {
@@ -33,8 +33,8 @@ export function TotpMultiFactorAssertionForm(props: TotpMultiFactorAssertionForm
 
   const onSubmit = async (values: { verificationCode: string }) => {
     try {
-      await action({ verificationCode: values.verificationCode, hint: props.hint });
-      props.onSuccess?.();
+      const credential = await action({ verificationCode: values.verificationCode, hint: props.hint });
+      props.onSuccess?.(credential);
     } catch (error) {
       const message = error instanceof FirebaseUIError ? error.message : String(error);
       form.setError("root", { message });

packages/angular/src/lib/auth/forms/email-link-auth-form.ts

@@ -96,7 +96,6 @@ export class EmailLinkAuthFormComponent {
       this.form.update({
         validators: {
           onBlur: this.formSchema(),
-          onSubmit: this.formSchema(),
           onSubmitAsync: async ({ value }) => {
             try {
               await sendSignInLinkToEmail(this.ui(), value.email);

packages/angular/src/lib/auth/forms/forgot-password-auth-form.ts

@@ -104,7 +104,6 @@ export class ForgotPasswordAuthFormComponent {
       this.form.update({
         validators: {
           onBlur: this.formSchema(),
-          onSubmit: this.formSchema(),
           onSubmitAsync: async ({ value }) => {
             try {
               await sendPasswordResetEmail(this.ui(), value.email);

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-assertion-form.spec.ts

@@ -32,7 +32,7 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
     const {
       injectTranslation,
       injectUI,
-      injectMultiFactorPhoneAuthNumberFormSchema,
+      injectMultiFactorPhoneAuthAssertionFormSchema,
       injectMultiFactorPhoneAuthVerifyFormSchema,
       injectRecaptchaVerifier,
     } = require("../../../tests/test-helpers");
@@ -58,7 +58,7 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
       });
     });
 
-    injectMultiFactorPhoneAuthNumberFormSchema.mockReturnValue(() => {
+    injectMultiFactorPhoneAuthAssertionFormSchema.mockReturnValue(() => {
       const { z } = require("zod");
       return z.object({
         phoneNumber: z.string().min(1, "Phone number is required"),
@@ -186,7 +186,7 @@ describe("<fui-sms-multi-factor-assertion-phone-form>", () => {
     const {
       injectTranslation,
       injectUI,
-      injectMultiFactorPhoneAuthNumberFormSchema,
+      injectMultiFactorPhoneAuthAssertionFormSchema,
     } = require("../../../tests/test-helpers");
 
     injectTranslation.mockImplementation((category: string, key: string) => {
@@ -208,7 +208,7 @@ describe("<fui-sms-multi-factor-assertion-phone-form>", () => {
       });
     });
 
-    injectMultiFactorPhoneAuthNumberFormSchema.mockReturnValue(() => {
+    injectMultiFactorPhoneAuthAssertionFormSchema.mockReturnValue(() => {
       const { z } = require("zod");
       return z.object({
         phoneNumber: z.string().min(1, "Phone number is required"),

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-assertion-form.ts

@@ -17,7 +17,7 @@ import { Component, ElementRef, effect, input, signal, output, computed, viewChi
 import { CommonModule } from "@angular/common";
 import { injectForm, injectStore, TanStackAppField, TanStackField } from "@tanstack/angular-form";
 import {
-  injectMultiFactorPhoneAuthNumberFormSchema,
+  injectMultiFactorPhoneAuthAssertionFormSchema,
   injectMultiFactorPhoneAuthVerifyFormSchema,
   injectRecaptchaVerifier,
   injectTranslation,
@@ -67,7 +67,7 @@ type PhoneMultiFactorInfo = MultiFactorInfo & {
 })
 export class SmsMultiFactorAssertionPhoneFormComponent {
   private ui = injectUI();
-  private formSchema = injectMultiFactorPhoneAuthNumberFormSchema();
+  private formSchema = injectMultiFactorPhoneAuthAssertionFormSchema();
 
   hint = input.required<MultiFactorInfo>();
   onSubmit = output<string>();