Series:
AngularFire
Previously we covered Authentication in Angular and why it was hard to wrap our heads around. To pick up from there, in this series of articles we are going to adopt Firebase Auth as a third party, and investigate different options: managing users remotely, and using Firebase for Authentication only.
This series is not a tutorial for AngularFire per se. We are interesting in knowing how to connect the dots in a true Angular application.
I recommend this YouTube tutorial to integrate AngularFire. In addition to the official Firebase documentation.
Setup and standalone
First, we need to setup AngularFire as documented, or run the following:
npm install @angular/fire firebase
Follow the documentation to add it to module-based
app. Here is how we should add it to a standalone
application.
// main.ts
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
const firebaseProviders: EnvironmentProviders = importProvidersFrom([
// firebaseConfig is the json extracted for client-side web app
provideFirebaseApp(() => initializeApp(firebbaseConfigHere)),
provideAuth(() => getAuth()),
]);
bootstrapApplication(AppComponent, {
providers: [
// provide few things like interceptors and routes
...CoreProviders,
...AppRouteProviders,
firebaseProviders
],
});
To customize it (Firebase customize dependencies), we can do the following:
// main.ts custom depdencies
// ...
const fbApp = () => initializeApp(firebaeConfigHere);
const authApp = () => initializeAuth(fbApp(), {
persistence: browserSessionPersistence,
popupRedirectResolver: browserPopupRedirectResolver
});
const firebaseProviders: EnvironmentProviders = importProvidersFrom([
provideFirebaseApp(fbApp),
provideAuth(authApp),
]);
// ...
A side note about SSR
Although SSR via Angular Universal is quite capable, but the reasoning behind implementing one keeps escaping me! For content-based websites, normal HTML pages proved to be superior, and in apps behind authentication walls, SSR does not matter much. In addition to the fact that search bots are getting better. That being said, if you have an SSR with Auth, in standalone mode, here is how to do it:
// server.ts
const fbApp = () => initializeApp(Config.Auth.firebase);
const authApp = () => initializeAuth(fbApp(), {
persistence: browserSessionPersistence,
popupRedirectResolver: browserPopupRedirectResolver
});
const firebaseProviders: EnvironmentProviders = importProvidersFrom([
provideFirebaseApp(fbApp),
provideAuth(authApp),
]);
const _app = () => bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(ServerModule),
...CoreProviders,
...AppRouteProviders,
firebaseProviders
],
});
// export the bare minimum, let nodejs take care of everything else
export const AppEngine = ngExpressEngine({
bootstrap: _app
});
Note: you can find all functions in the modular tree-shakable version documented on Firebase Auth Modular.
The use case
The main use case we want to try to implement involves the following:
Read more on Sekrab Garage