refactor(angular): Align and update angular api with spec

Author: dackers86

eslint.config.ts

@@ -7,6 +7,7 @@ import tseslint from "typescript-eslint";
 import pluginPrettier from "eslint-plugin-prettier";
 import pluginReact from "eslint-plugin-react";
 import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginAngular from "angular-eslint";
 
 const config: any[] = [
   globalIgnores([
@@ -40,6 +41,11 @@ const config: any[] = [
       ],
     },
   },
+  {
+    // Angular package specific rules
+    files: ["packages/angular/src/**/*.{ts,tsx}"],
+    processor: pluginAngular.processInlineTemplates,
+  },
   {
     // React package specific rules
     files: ["packages/react/src/**/*.{ts,tsx}"],

examples/angular/src/app/app.config.ts

@@ -26,7 +26,12 @@ import { provideFirebaseUI, provideFirebaseUIPolicies } from "@firebase-ui/angul
 import { initializeUI } from "@firebase-ui/core";
 
 const firebaseConfig = {
-  // your Firebase config here
+  apiKey: "AIzaSyCvMftIUCD9lUQ3BzIrimfSfBbCUQYZf-I",
+  authDomain: "fir-ui-rework.firebaseapp.com",
+  projectId: "fir-ui-rework",
+  storageBucket: "fir-ui-rework.firebasestorage.app",
+  messagingSenderId: "200312857118",
+  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f",
 };
 
 export const appConfig: ApplicationConfig = {

examples/angular/src/app/app.routes.server.ts

@@ -22,39 +22,48 @@ export const serverRoutes: ServerRoute[] = [
     path: "",
     renderMode: RenderMode.Prerender,
   },
-  /** Key auth screen demos - good for SSG as they showcase Firebase UI components */
+  /** Static auth demos - good for SSG as they showcase Firebase UI components */
   {
-    path: "screens/sign-in-auth-screen",
+    path: "sign-in",
     renderMode: RenderMode.Prerender,
   },
   {
-    path: "screens/oauth-screen",
+    path: "oauth",
     renderMode: RenderMode.Prerender,
   },
+  /** Interactive auth routes - better as CSR for user interaction */
   {
-    path: "screens/sign-up-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "sign-up",
+    renderMode: RenderMode.Client,
   },
   {
-    path: "screens/email-link-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "forgot-password",
+    renderMode: RenderMode.Client,
   },
+  /** Dynamic auth routes - good for SSR as they may need server-side data */
   {
-    path: "screens/phone-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "email-link",
+    renderMode: RenderMode.Server,
   },
-  /** Interactive auth routes - better as CSR for user interaction */
   {
-    path: "sign-in",
-    renderMode: RenderMode.Client,
+    path: "email-link-oauth",
+    renderMode: RenderMode.Server,
   },
   {
-    path: "register",
-    renderMode: RenderMode.Client,
+    path: "phone",
+    renderMode: RenderMode.Server,
   },
   {
-    path: "forgot-password",
-    renderMode: RenderMode.Client,
+    path: "phone-oauth",
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: "sign-in-oauth",
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: "sign-up-oauth",
+    renderMode: RenderMode.Server,
   },
   /** All other routes will be rendered on the server (SSR) */
   {

examples/angular/src/app/app.routes.ts

@@ -21,72 +21,45 @@ export const routes: Routes = [
     path: "",
     loadComponent: () => import("./home").then((m) => m.HomeComponent),
   },
-  // Direct auth routes (matching NextJS paths)
   {
-    path: "sign-in",
-    loadComponent: () => import("./auth/sign-in").then((m) => m.SignInComponent),
+    path: "email-link",
+    loadComponent: () => import("./auth/email-link").then((m) => m.EmailLinkComponent),
   },
   {
-    path: "register",
-    loadComponent: () => import("./auth/register").then((m) => m.RegisterComponent),
+    path: "email-link-oauth",
+    loadComponent: () => import("./auth/email-link-oauth").then((m) => m.EmailLinkOAuthComponent),
   },
   {
     path: "forgot-password",
     loadComponent: () => import("./auth/forgot-password").then((m) => m.ForgotPasswordComponent),
   },
-  // Sign-in subdirectories
   {
-    path: "sign-in/phone",
-    loadComponent: () => import("./auth/phone").then((m) => m.PhoneComponent),
+    path: "oauth",
+    loadComponent: () => import("./auth/oauth").then((m) => m.OAuthComponent),
   },
   {
-    path: "sign-in/email",
-    loadComponent: () => import("./auth/email-link").then((m) => m.EmailLinkComponent),
+    path: "phone",
+    loadComponent: () => import("./auth/phone").then((m) => m.PhoneComponent),
   },
-  // Screen routes
   {
-    path: "screens/sign-in-auth-screen",
-    loadComponent: () => import("./auth/sign-in-screen").then((m) => m.SignInScreenComponent),
+    path: "phone-oauth",
+    loadComponent: () => import("./auth/phone-oauth").then((m) => m.PhoneOAuthComponent),
   },
   {
-    path: "screens/sign-in-auth-screen-w-handlers",
-    loadComponent: () => import("./auth/sign-in-handlers").then((m) => m.SignInHandlersComponent),
+    path: "sign-in",
+    loadComponent: () => import("./auth/sign-in").then((m) => m.SignInComponent),
   },
   {
-    path: "screens/sign-in-auth-screen-w-oauth",
+    path: "sign-in-oauth",
     loadComponent: () => import("./auth/sign-in-oauth").then((m) => m.SignInOAuthComponent),
   },
   {
-    path: "screens/email-link-auth-screen",
-    loadComponent: () => import("./auth/email-link-screen").then((m) => m.EmailLinkScreenComponent),
-  },
-  {
-    path: "screens/email-link-auth-screen-w-oauth",
-    loadComponent: () => import("./auth/email-link-oauth").then((m) => m.EmailLinkOAuthComponent),
-  },
-  {
-    path: "screens/phone-auth-screen",
-    loadComponent: () => import("./auth/phone-screen").then((m) => m.PhoneScreenComponent),
-  },
-  {
-    path: "screens/phone-auth-screen-w-oauth",
-    loadComponent: () => import("./auth/phone-oauth").then((m) => m.PhoneOAuthComponent),
-  },
-  {
-    path: "screens/sign-up-auth-screen",
+    path: "sign-up",
     loadComponent: () => import("./auth/sign-up").then((m) => m.SignUpComponent),
   },
   {
-    path: "screens/sign-up-auth-screen-w-oauth",
-    loadComponent: () => import("./auth/register-oauth").then((m) => m.RegisterOAuthComponent),
-  },
-  {
-    path: "screens/oauth-screen",
-    loadComponent: () => import("./auth/oauth").then((m) => m.OAuthComponent),
-  },
-  {
-    path: "screens/password-reset-screen",
-    loadComponent: () => import("./auth/password-reset").then((m) => m.PasswordResetComponent),
+    path: "sign-up-oauth",
+    loadComponent: () => import("./auth/sign-up-oauth").then((m) => m.SignUpOAuthComponent),
   },
   {
     path: "**",

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

@@ -24,7 +24,7 @@ import { EmailLinkAuthScreenComponent } from "@firebase-ui/angular";
   selector: "app-email-link",
   standalone: true,
   imports: [CommonModule, RouterModule, EmailLinkAuthScreenComponent],
-  template: ` <fui-email-link-auth-screen></fui-email-link-auth-screen> `,
+  template: `<fui-email-link-auth-screen></fui-email-link-auth-screen> `,
   styles: [],
 })
 export class EmailLinkComponent implements OnInit {

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

@@ -18,13 +18,13 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { PasswordResetScreenComponent } from "@firebase-ui/angular";
+import { ForgotPasswordAuthScreenComponent } from "@firebase-ui/angular";
 
 @Component({
   selector: "app-forgot-password",
   standalone: true,
-  imports: [CommonModule, RouterModule, PasswordResetScreenComponent],
-  template: ` <fui-password-reset-screen signInRoute="/sign-in"></fui-password-reset-screen> `,
+  imports: [CommonModule, RouterModule, ForgotPasswordAuthScreenComponent],
+  template: `<fui-forgot-password-auth-screen (backToSignIn)="backToSignIn()"></fui-forgot-password-auth-screen> `,
   styles: [],
 })
 export class ForgotPasswordComponent implements OnInit {
@@ -39,4 +39,8 @@ export class ForgotPasswordComponent implements OnInit {
       }
     });
   }
+
+  backToSignIn() {
+    this.router.navigate(["/sign-in"]);
+  }
 }

examples/angular/src/app/auth/forgot-password/forgot-password.component.ts

@@ -26,7 +26,7 @@ import { PhoneAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase
   imports: [CommonModule, RouterModule, PhoneAuthScreenComponent, GoogleSignInButtonComponent],
   template: `
     <fui-phone-auth-screen>
-      <fui-google-sign-in-button></fui-google-sign-in-button>
+      <fui-google-sign-in-button />
     </fui-phone-auth-screen>
   `,
   styles: [],

examples/angular/src/app/auth/password-reset/password-reset.component.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * from "./phone.component";
+export * from "./phone-screen.component";