feat(react,shadcn,angular): add user authenticated screen hook/provider

examples/angular/src/app/screens/email-link-auth-screen-w-oauth/email-link-auth-screen-w-oauth.component.ts → examples/angular/src/app/screens/email-link-auth-screen-w-oauth.ts

@@ -17,15 +17,14 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { EmailLinkAuthScreenComponent, GoogleSignInButtonComponent } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
   selector: "app-email-link-auth-screen-w-oauth",
   standalone: true,
   imports: [CommonModule, EmailLinkAuthScreenComponent, GoogleSignInButtonComponent],
   template: `
-    <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn($event)">
+    <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn()">
       <fui-google-sign-in-button></fui-google-sign-in-button>
     </fui-email-link-auth-screen>
   `,
@@ -38,8 +37,7 @@ export class EmailLinkAuthScreenWithOAuthComponent {
     alert("email sent - please check your email");
   }
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/email-link-auth-screen/email-link-auth-screen.component.ts → examples/angular/src/app/screens/email-link-auth-screen.ts

@@ -17,14 +17,13 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { EmailLinkAuthScreenComponent } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
   selector: "app-email-link-auth-screen",
   standalone: true,
   imports: [CommonModule, EmailLinkAuthScreenComponent],
-  template: ` <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn($event)" />`,
+  template: ` <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn()" />`,
   styles: [],
 })
 export class EmailLinkAuthScreenWrapperComponent {
@@ -34,8 +33,7 @@ export class EmailLinkAuthScreenWrapperComponent {
     alert("email sent - please check your email");
   }
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/oauth-screen/oauth-screen.component.ts → examples/angular/src/app/screens/oauth-screen.ts

@@ -25,7 +25,6 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
@@ -42,7 +41,7 @@ import { Router } from "@angular/router";
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-oauth-screen (onSignIn)="onSignIn($event)">
+    <fui-oauth-screen (onSignIn)="onSignIn()">
       <fui-google-sign-in-button [themed]="themed() ? 'neutral' : false" />
       <fui-facebook-sign-in-button [themed]="themed()" />
       <fui-apple-sign-in-button [themed]="themed()" />
@@ -63,8 +62,7 @@ export class OAuthScreenWrapperComponent {
   themed = signal(false);
   private router = inject(Router);
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/phone-auth-screen-w-oauth/phone-auth-screen-w-oauth.component.ts → examples/angular/src/app/screens/phone-auth-screen-w-oauth.ts

@@ -17,17 +17,16 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
   selector: "app-phone-auth-screen-w-oauth",
   standalone: true,
   imports: [CommonModule, PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent],
   template: `
-    <fui-phone-auth-screen (signIn)="onSignIn($event)">
+    <fui-phone-auth-screen (signIn)="onSignIn()">
       <fui-content>
-        <fui-google-sign-in-button></fui-google-sign-in-button>
+        <fui-google-sign-in-button />
       </fui-content>
     </fui-phone-auth-screen>
   `,
@@ -36,8 +35,7 @@ import { Router } from "@angular/router";
 export class PhoneAuthScreenWithOAuthComponent {
   private router = inject(Router);
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/phone-auth-screen/phone-auth-screen.component.ts → examples/angular/src/app/screens/phone-auth-screen.ts

@@ -17,21 +17,19 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { PhoneAuthScreenComponent } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
   selector: "app-phone-auth-screen",
   standalone: true,
   imports: [CommonModule, PhoneAuthScreenComponent],
-  template: ` <fui-phone-auth-screen (signIn)="onSignIn($event)" />`,
+  template: ` <fui-phone-auth-screen (signIn)="onSignIn()" />`,
   styles: [],
 })
 export class PhoneAuthScreenWrapperComponent {
   private router = inject(Router);
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-in-auth-screen-w-handlers/sign-in-auth-screen-w-handlers.component.ts → examples/angular/src/app/screens/sign-in-auth-screen-w-handlers.ts

@@ -24,11 +24,7 @@ import { SignInAuthScreenComponent } from "@invertase/firebaseui-angular";
   standalone: true,
   imports: [CommonModule, SignInAuthScreenComponent],
   template: `
-    <fui-sign-in-auth-screen
-      (forgotPassword)="goToForgotPassword()"
-      (signUp)="goToSignUp()"
-      (signIn)="onSignIn($event)"
-    ></fui-sign-in-auth-screen>
+    <fui-sign-in-auth-screen (forgotPassword)="goToForgotPassword()" (signUp)="goToSignUp()" (signIn)="onSignIn()" />
   `,
   styles: [],
 })
@@ -43,8 +39,7 @@ export class SignInAuthScreenWithHandlersComponent {
     this.router.navigate(["/screens/sign-up-auth-screen"]);
   }
 
-  onSignIn(credential: unknown) {
-    console.log(credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-in-auth-screen-w-oauth/sign-in-auth-screen-w-oauth.component.ts → examples/angular/src/app/screens/sign-in-auth-screen-w-oauth.ts

@@ -26,7 +26,6 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
@@ -44,7 +43,7 @@ import { Router } from "@angular/router";
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-sign-in-auth-screen (signIn)="onSignIn($event)">
+    <fui-sign-in-auth-screen (signIn)="onSignIn()">
       <fui-content>
         <fui-google-sign-in-button />
         <fui-facebook-sign-in-button />
@@ -60,8 +59,7 @@ import { Router } from "@angular/router";
 export class SignInAuthScreenWithOAuthComponent {
   private router = inject(Router);
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-in-auth-screen/sign-in-auth-screen.component.ts → examples/angular/src/app/screens/sign-in-auth-screen.ts

@@ -17,21 +17,19 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { SignInAuthScreenComponent } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
   selector: "app-sign-in-auth-screen",
   standalone: true,
   imports: [CommonModule, SignInAuthScreenComponent],
-  template: ` <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />`,
+  template: ` <fui-sign-in-auth-screen (signIn)="onSignIn()" />`,
   styles: [],
 })
 export class SignInAuthScreenWrapperComponent {
   private router = inject(Router);
 
-  onSignIn(credential: UserCredential) {
-    console.log("sign in", credential);
+  onSignIn() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-up-auth-screen-w-handlers/sign-up-auth-screen-w-handlers.component.ts → examples/angular/src/app/screens/sign-up-auth-screen-w-handlers.ts

@@ -23,7 +23,7 @@ import { SignUpAuthScreenComponent } from "@invertase/firebaseui-angular";
   selector: "app-sign-up-auth-screen-w-handlers",
   standalone: true,
   imports: [CommonModule, SignUpAuthScreenComponent],
-  template: ` <fui-sign-up-auth-screen (signIn)="goToSignIn()" (signUp)="onSignUp($event)"></fui-sign-up-auth-screen> `,
+  template: `<fui-sign-up-auth-screen (signIn)="goToSignIn()" (signUp)="onSignUp()" />`,
   styles: [],
 })
 export class SignUpAuthScreenWithHandlersComponent {
@@ -33,8 +33,7 @@ export class SignUpAuthScreenWithHandlersComponent {
     this.router.navigate(["/screens/sign-in-auth-screen"]);
   }
 
-  onSignUp(credential: unknown) {
-    console.log(credential);
+  onSignUp() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-up-auth-screen-w-oauth/sign-up-auth-screen-w-oauth.component.ts → examples/angular/src/app/screens/sign-up-auth-screen-w-oauth.ts

@@ -26,7 +26,6 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
-import type { UserCredential } from "firebase/auth";
 import { Router } from "@angular/router";
 
 @Component({
@@ -44,7 +43,7 @@ import { Router } from "@angular/router";
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-sign-up-auth-screen (signUp)="onSignUp($event)">
+    <fui-sign-up-auth-screen (signUp)="onSignUp()">
       <fui-content>
         <fui-google-sign-in-button />
         <fui-facebook-sign-in-button />
@@ -60,8 +59,7 @@ import { Router } from "@angular/router";
 export class SignUpAuthScreenWithOAuthComponent {
   private router = inject(Router);
 
-  onSignUp(credential: UserCredential) {
-    console.log("sign up", credential);
+  onSignUp() {
     this.router.navigate(["/"]);
   }
 }

examples/angular/src/app/screens/sign-up-auth-screen/sign-up-auth-screen.component.ts → examples/angular/src/app/screens/sign-up-auth-screen.ts

@@ -18,20 +18,18 @@ import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { SignUpAuthScreenComponent } from "@invertase/firebaseui-angular";
 import { Router } from "@angular/router";
-import type { UserCredential } from "firebase/auth";
 
 @Component({
   selector: "app-sign-up-auth-screen",
   standalone: true,
   imports: [CommonModule, SignUpAuthScreenComponent],
-  template: ` <fui-sign-up-auth-screen (signUp)="onSignUp($event)" />`,
+  template: ` <fui-sign-up-auth-screen (signUp)="onSignUp()" />`,
   styles: [],
 })
 export class SignUpAuthScreenWrapperComponent {
   private router = inject(Router);
 
-  onSignUp(credential: UserCredential) {
-    console.log("sign up", credential);
+  onSignUp() {
     this.router.navigate(["/"]);
   }
 }

examples/react/src/routes.ts

@@ -67,12 +67,6 @@ export const routes = [
     path: "/screens/forgot-password-auth-screen",
     component: ForgotPasswordAuthScreenPage,
   },
-  {
-    name: "Forgot Password Screen (with handlers)",
-    description: "A screen allowing a user to reset their password, with forgot password and register handlers.",
-    path: "/screens/forgot-password-auth-screen-w-handlers",
-    component: ForgotPasswordAuthScreenPage,
-  },
   {
     name: "OAuth Screen",
     description: "A screen which allows a user to sign in with OAuth only.",

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

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

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

@@ -27,8 +27,7 @@ export default function EmailLinkAuthScreenPage() {
       onEmailSent={() => {
         alert("Email has been sent");
       }}
-      onSignIn={(credential) => {
-        console.log(credential);
+      onSignIn={() => {
         navigate("/");
       }}
     />

examples/react/src/screens/oauth-screen.tsx

@@ -26,13 +26,19 @@ import {
   OAuthScreen,
   TwitterSignInButton,
 } from "@invertase/firebaseui-react";
+import { useNavigate } from "react-router";
 
 export default function OAuthScreenPage() {
   const [themed, setThemed] = useState(false);
+  const navigate = useNavigate();
 
   return (
     <>
-      <OAuthScreen>
+      <OAuthScreen
+        onSignIn={() => {
+          navigate("/");
+        }}
+      >
         <GoogleSignInButton themed={themed ? "neutral" : undefined} />
         <FacebookSignInButton themed={themed} />
         <AppleSignInButton themed={themed} />

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

@@ -32,8 +32,7 @@ export default function PhoneAuthScreenWithOAuthPage() {
 
   return (
     <PhoneAuthScreen
-      onSignIn={(credential) => {
-        console.log(credential);
+      onSignIn={() => {
         navigate("/");
       }}
     >

examples/react/src/screens/phone-auth-screen.tsx

@@ -24,8 +24,7 @@ export default function PhoneAuthScreenPage() {
 
   return (
     <PhoneAuthScreen
-      onSignIn={(credential) => {
-        console.log(credential);
+      onSignIn={() => {
         navigate("/");
       }}
     />

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

@@ -21,6 +21,7 @@ import { useNavigate } from "react-router";
 
 export default function SignInAuthScreenWithHandlersPage() {
   const navigate = useNavigate();
+
   return (
     <SignInAuthScreen
       onForgotPasswordClick={() => {
@@ -29,6 +30,9 @@ export default function SignInAuthScreenWithHandlersPage() {
       onSignUpClick={() => {
         navigate("/screens/sign-up-auth-screen");
       }}
+      onSignIn={() => {
+        navigate("/");
+      }}
     />
   );
 }