Un bug non è mai solo un errore. Rappresenta qualcosa di più. Un errore nel modo di pensare. Perché, fuori dallo schermo, la vita è piena di bug e ti rende come sei. Il bug costringe il software ad adattarsi, per causa sua deve evolvere in qualcosa di nuovo. Deve aggirare l’ostacolo o superarlo. Qualsiasi cosa accada si trasforma. Diventa qualcosa di nuovo. La versione successiva. L’inevitabile upgrade. — Mr.Robot¹

Introduzione Link to heading

Firebase è una piattaforma serverless per lo sviluppo di applicazioni mobili e web. Open source ma supportata da Google, Firebase sfrutta l’infrastruttura di Google e il suo cloud per fornire una suite di strumenti per scrivere, analizzare e mantenere applicazioni cross-platform. Firebase infatti offre funzionalità come analisi, database (usando strutture noSQL), messaggistica e segnalazione di arresti anomali per la gestione di applicazioni web, iOS e Android.

Voglio provare firebase come storage e hosting per app angular di test, che viene offerto gratuitamente (su bassi volumi).

Step 1: Crea un app angular Link to heading

• Inizializza la tua app seguendo questa guida
• Su ambienti macOS/Linux consiglio caldamente l’utilizzo di NVM
• Installa angularFire: npm install firebase @angular/fire
  Tip

  3 dicembre 2023 - siccome non hanno ancora rilasciato il pacchetto per angular 17, ho specificato a mano la versione npm i @angular/fire@17.0.0-next.0
• Configure application environment: ng generate environments

Step 2: Genera API Key per connessione a firebase Link to heading

• Apri la Firebase console
• Crea un nuovo progetto e una nuova applicazione
• incolla questo all’interno del tuo environment

const firebaseConfig = {
  apiKey: "************************",
  authDomain: "********************",
  projectId: "*********************",
  storageBucket: "*****************",
  messagingSenderId: "*************",
  appId: "*************************"
};

• OPZIONALE: installa firebase CLI and pubblica su firebase hosting!
• All’interno della console firebase, abilita la sezione autenticazione, come opzioni di accesso seleziono email/psw e google auth

Step 3: Crea i component e aggiungi le routes Link to heading

ng g c components/dashboard
ng g c components/sign-in
ng g c components/sign-up
ng g c components/forgot-password
ng g c components/verify-email

Crea routes in app.routes.ts

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { VerifyEmailComponent } from './components/verify-email/verify-email.component';

export const routes: Routes = [
    { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
    { path: 'sign-in', component: SignInComponent },
    { path: 'register-user', component: SignUpComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'forgot-password', component: ForgotPasswordComponent },
    { path: 'verify-email-address', component: VerifyEmailComponent }
];

Step 4: Crea il service per l’autenticazione Firebase Link to heading

• Genera l’interfaccia utente ng generate interface shared/services/user e aggiungi le proprietà

export interface User {
    uid: string;
    email: string;
    displayName: string;
    photoURL: string;
    emailVerified: boolean;
}

• Crea il service ng g s shared/auth