Add Angular providers for Firebase services and refactor components

CHANGELOG.md

@@ -1,3 +1,26 @@
+## [5.0.3](https://github.com/Nativescript/firebase/compare/5.0.2...5.0.3) (2025-06-26)
+
+
+### Features
+
+* **apps/demo-angular:** add standalone components for Firebase Messaging, Performance, and Remote Config ([58e47d5](https://github.com/Nativescript/firebase/commit/58e47d5d844eb03567c1b89a1b9b25d5256c155d))
+
+* **firebase-auth:** create Angular provider for Firebase Auth service
+
+* **firebase-core:** create Angular provider for Firebase Core initialization
+
+* **firebase-database:** create Angular provider for Firebase Database service
+
+* **firebase-firestore:** create Angular provider for Firestore service
+
+* **firebase-storage:** create Angular provider for Firebase Storage service
+
+* **chore:** remove unused Firebase Analytics components and modules
+
+* **chore:** update TypeScript configuration for Angular compatibility
+
+
+
 # [5.0.0](https://github.com/NativeScript/firebase/compare/3.3.2...5.0.0) (2025-05-13)
 
 
@@ -455,6 +478,3 @@
 ### Features
 
 * nx migrate @nativescript/plugin-tools ([d081a2d](https://github.com/NativeScript/firebase/commit/d081a2dd1c645e696bf6ae8d8888319dc751e869))
-
-
-

apps/demo-angular/.eslintrc.json

@@ -1,6 +1,6 @@
 {
 	"extends": ["../../.eslintrc.json"],
-	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*", "platforms/**/*", "hooks/**/*"],
 	"overrides": [
 		{
 			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/demo-angular/package.json

@@ -19,7 +19,8 @@
 		"@nativescript/firebase-functions": "file:../../dist/packages/firebase-functions",
 		"@nativescript/firebase-app-check-debug": "file:../../dist/packages/firebase-app-check-debug",
 		"@nativescript/firebase-messaging-core": "file:../../dist/packages/firebase-messaging-core",
-		"@nativescript/firebase-ui": "file:../../dist/packages/firebase-ui"
+		"@nativescript/firebase-ui": "file:../../dist/packages/firebase-ui",
+		"@nativescript/google-signin": "~2.1.0"
 	},
 	"devDependencies": {
 		"@nativescript/android": "~8.8.0",

apps/demo-angular/src/app.component.ts

@@ -5,7 +5,8 @@ import { AppService } from './app.service';
 	template: `<GridLayout>
 		<page-router-outlet></page-router-outlet>
 	</GridLayout>`,
+	standalone: false,
 })
 export class AppComponent {
-	constructor(appService: AppService){}
+	constructor(appService: AppService) {}
 }

apps/demo-angular/src/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { NativeScriptModule } from '@nativescript/angular';
+import { provideFirebaseCoreInitializer } from '@nativescript/firebase-core/angular';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -8,9 +9,9 @@ import { AppService } from './app.service';
 
 @NgModule({
 	schemas: [NO_ERRORS_SCHEMA],
-	declarations: [AppComponent, HomeComponent],
+	declarations: [AppComponent],
 	bootstrap: [AppComponent],
-	imports: [NativeScriptModule, AppRoutingModule],
-	providers: [AppService]
+	imports: [NativeScriptModule, AppRoutingModule, HomeComponent],
+	providers: [AppService, provideFirebaseCoreInitializer()],
 })
 export class AppModule {}

apps/demo-angular/src/plugin-demos/firebase-analytics.component.ts

@@ -1,19 +1,18 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedFirebaseAnalytics } from '@demo/shared';
-import { } from '@nativescript/firebase-analytics';
+import {} from '@nativescript/firebase-analytics';
 
 @Component({
 	selector: 'demo-firebase-analytics',
 	templateUrl: 'firebase-analytics.component.html',
+	standalone: false,
 })
 export class FirebaseAnalyticsComponent {
-
-  demoShared: DemoSharedFirebaseAnalytics;
-
-	constructor(private _ngZone: NgZone) {}
+	demoShared: DemoSharedFirebaseAnalytics;
 
-  ngOnInit() {
-    this.demoShared = new DemoSharedFirebaseAnalytics();
-  }
+	constructor(private _ngZone: NgZone) {}
 
-}
+	ngOnInit() {
+		this.demoShared = new DemoSharedFirebaseAnalytics();
+	}
+}

apps/demo-angular/src/plugin-demos/firebase-app-check-debug.component.ts

@@ -1,19 +1,18 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedFirebaseAppCheckDebug } from '@demo/shared';
-import { } from '@nativescript/firebase-app-check-debug';
+import {} from '@nativescript/firebase-app-check-debug';
 
 @Component({
 	selector: 'demo-firebase-app-check-debug',
 	templateUrl: 'firebase-app-check-debug.component.html',
+	standalone: false,
 })
 export class FirebaseAppCheckDebugComponent {
-
-  demoShared: DemoSharedFirebaseAppCheckDebug;
-
-	constructor(private _ngZone: NgZone) {}
+	demoShared: DemoSharedFirebaseAppCheckDebug;
 
-  ngOnInit() {
-    this.demoShared = new DemoSharedFirebaseAppCheckDebug();
-  }
+	constructor(private _ngZone: NgZone) {}
 
-}
+	ngOnInit() {
+		this.demoShared = new DemoSharedFirebaseAppCheckDebug();
+	}
+}

apps/demo-angular/src/plugin-demos/firebase-app-check.component.ts

@@ -1,19 +1,18 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedFirebaseAppCheck } from '@demo/shared';
-import { } from '@nativescript/firebase-app-check';
+import {} from '@nativescript/firebase-app-check';
 
 @Component({
 	selector: 'demo-firebase-app-check',
 	templateUrl: 'firebase-app-check.component.html',
+	standalone: false,
 })
 export class FirebaseAppCheckComponent {
-
-  demoShared: DemoSharedFirebaseAppCheck;
-
-	constructor(private _ngZone: NgZone) {}
+	demoShared: DemoSharedFirebaseAppCheck;
 
-  ngOnInit() {
-    this.demoShared = new DemoSharedFirebaseAppCheck();
-  }
+	constructor(private _ngZone: NgZone) {}
 
-}
+	ngOnInit() {
+		this.demoShared = new DemoSharedFirebaseAppCheck();
+	}
+}

apps/demo-angular/src/plugin-demos/firebase-auth.component.html

@@ -2,7 +2,27 @@
 <StackLayout class="p-20">
 	<ScrollView class="h-full">
 		<StackLayout>
-			<Button text="Test firebase-auth" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+			<TextField hint="Enter email" [text]="email" keyboardType="email" autocapitalizationType="none" />
+			<TextField hint="Enter password" [text]="password" secure="true" />
+			<TextField hint="Enter Phone Number" [text]="phoneNumber" />
+			<TextField hint="Enter Verification Code" [text]="code" />
+			<Button text="Get Phone Verification Code" [tap]="getVerificationCode" class="btn btn-primary"></Button>
+			<Button text="Create User" [tap]="createUser" class="btn btn-primary"></Button>
+			<Button text="Login User" [tap]="loginUser" class="btn btn-primary"></Button>
+			<Button text="Login User With Phone" [tap]="loginWithPhone" class="btn btn-primary"></Button>
+			<Button text="Link User Phone" [tap]="linkPhone" class="btn btn-primary"></Button>
+			<Button text="Link Google" [tap]="linkGoogle" class="btn btn-primary"></Button>
+			<Button text="Link user with Github" [tap]="linkGithub" class="btn btn-primary"></Button>
+			<Button text="Login user with Yahoo" [tap]="linkYahoo" class="btn btn-primary"></Button>
+			<Button text="Get Current User" [tap]="getCurrentUser" class="btn btn-primary"></Button>
+			<Button text="Logout User" [tap]="logOutUser" class="btn btn-primary"></Button>
+			<StackLayout>
+				<Label text="Current User"></Label>
+				<Label [text]="uid"></Label>
+				<Label [text]="displayName"></Label>
+				<Label [text]="displayEmail"></Label>
+				<Image [src]="photoURL"></Image>
+			</StackLayout>
 		</StackLayout>
 	</ScrollView>
 </StackLayout>

apps/demo-angular/src/plugin-demos/firebase-auth.component.ts

@@ -1,19 +1,186 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedFirebaseAuth } from '@demo/shared';
-import { } from '@nativescript/firebase-auth';
+import { Auth, GoogleAuthProvider, OAuthProvider, PhoneAuthProvider, User } from '@nativescript/firebase-auth';
+import { GoogleSignin } from '@nativescript/google-signin';
 
+let didInit = false;
 @Component({
 	selector: 'demo-firebase-auth',
 	templateUrl: 'firebase-auth.component.html',
+	standalone: false,
 })
 export class FirebaseAuthComponent {
-
-  demoShared: DemoSharedFirebaseAuth;
-
-	constructor(private _ngZone: NgZone) {}
+	demoShared: DemoSharedFirebaseAuth;
+	uid: string;
+	displayName: string;
+	displayEmail: string;
+	photoURL: string;
 
-  ngOnInit() {
-    this.demoShared = new DemoSharedFirebaseAuth();
-  }
+	email: string;
+	password: string;
+	user: User;
+	phoneNumber: string;
+	code: string;
+	verificationId: string;
 
-}
+	constructor(private auth: Auth) {}
+
+	ngOnInit() {
+		this.demoShared = new DemoSharedFirebaseAuth();
+
+		this.auth.addAuthStateChangeListener((user) => {
+			this._setCurrentUser(user);
+		});
+	}
+
+	async linkGithub() {
+		if (!this.user) {
+			return;
+		}
+		const provider = new OAuthProvider('github.com');
+		provider.addCustomParameter('allow_signup', 'false');
+		provider.setScopes(['user:email']);
+
+		this.auth
+			.getProviderCredential(provider)
+			.then((cred) => {
+				this.auth.currentUser.linkWithCredential(cred);
+				console.log('cred', cred);
+			})
+			.catch((e) => {
+				console.log('Failed to link Github', e);
+			});
+	}
+
+	async linkYahoo() {
+		if (!this.user) {
+			return;
+		}
+		const provider = new OAuthProvider('yahoo.com');
+		provider.addCustomParameter('prompt', 'login');
+		provider.addCustomParameter('language', 'en');
+
+		this.auth
+			.getProviderCredential(provider)
+			.then((cred) => {
+				this.auth.currentUser.linkWithCredential(cred);
+			})
+			.catch((e) => {
+				console.log('Failed to link Yahoo', e);
+			});
+	}
+
+	async linkGoogle() {
+		try {
+			if (!this.user) {
+				return;
+			}
+			if (!didInit) {
+				await GoogleSignin.configure();
+				didInit = true;
+			}
+			const isAvailable = await GoogleSignin.playServicesAvailable();
+			if (!isAvailable) {
+				return;
+			}
+			const user = await GoogleSignin.signIn();
+			const cred = GoogleAuthProvider.credential(user.idToken, user.accessToken);
+			const linked = await this.user.linkWithCredential(cred);
+			console.log(linked);
+		} catch (e) {
+			console.log('linkGoogle', e.native);
+		}
+	}
+
+	async linkPhone() {
+		if (!this.auth.currentUser) {
+			console.info('Login to link phone');
+			return;
+		}
+		try {
+			const cred = PhoneAuthProvider.provider().credential(this.verificationId, this.code);
+			const linkedCred = await this.auth.currentUser.linkWithCredential(cred);
+			console.log('verificationId', linkedCred);
+		} catch (e) {
+			console.log('linkPhone error:', e);
+		}
+	}
+
+	async getVerificationCode() {
+		try {
+			this.verificationId = await PhoneAuthProvider.provider().verifyPhoneNumber(this.phoneNumber);
+		} catch (e) {
+			console.log('getVerificationCode error:', e);
+		}
+	}
+
+	async loginWithPhone() {
+		try {
+			const cred = PhoneAuthProvider.provider().credential(this.verificationId, this.code);
+			const value = await this.auth.signInWithCredential(cred);
+			console.log('verificationId', this.verificationId);
+			console.log('loginUser', value);
+			this._setCurrentUser(value.user);
+		} catch (e) {
+			console.log('linkPhone error:', e);
+		}
+	}
+
+	createUser() {
+		this.auth
+			.createUserWithEmailAndPassword(this.email, this.password)
+			.then((user) => {
+				this.user = user.user;
+				user.user.sendEmailVerification();
+			})
+			.catch((e) => {
+				console.error('createUser', e);
+			});
+	}
+
+	loginUser() {
+		this.auth
+			.signInWithEmailAndPassword(this.email, this.password)
+			.then((value) => {
+				console.log('loginUser', value);
+				this._setCurrentUser(value.user);
+			})
+			.catch((e) => {
+				console.error('loginUser', e);
+			});
+	}
+
+	_setCurrentUser(user: User) {
+		this.user = user;
+		this.uid = user?.uid;
+		this.displayName = user?.displayName;
+		this.displayEmail = user?.email;
+		this.photoURL = user?.photoURL;
+	}
+
+	getCurrentUser() {
+		const auth = this.auth;
+		this._setCurrentUser(auth?.currentUser);
+	}
+
+	logOutUser() {
+		this.auth.signOut();
+		this._setCurrentUser(undefined);
+	}
+
+	loginMs() {
+		// https://firebase.google.com/docs/auth/android/microsoft-oauth#handle_the_sign-in_flow_with_the_firebase_sdk
+
+		const provider = new OAuthProvider('microsoft.com');
+		provider.addCustomParameter('prompt', 'consent');
+		provider.addCustomParameter('login_hint', '[email protected]');
+		provider.addCustomParameter('tenant', 'TENANT_ID');
+
+		provider.setScopes(['mail.read', 'calendars.read']);
+
+		this.auth
+			.signInWithProvider(provider)
+			.then((credentials) => {})
+			.catch((err) => {});
+	}
+}