angular firebase angularfire authentication email password
0 likes

Angular + Firebase Authentication with AngularFire

Angular + Firebase Authentication with AngularFire

Firebase Authentication provides a suite of authentication methods ranging from emails, Google, Facebook, etc. When combined with AngularFire, integrating Firebase Authentication in Angular applications becomes a breeze.

Let's walk through setting up email and password authentication using Angular, Firebase, and AngularFire.

1. Set Up:

Install AngularFire & Firebase:

Copy Code 
ng add @angular/fire

This will prompt you for Firebase configuration settings. These settings are available in the Firebase Console, under "Project Settings > General > Your apps > Firebase SDK snippet > Config."

2. Configuration:

Firstly, in the Firebase Console, go to "Authentication" and enable "Email/Password" as the sign-in method.

Then, integrate Firebase auth services in your Angular module:

Copy Code 
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule
  ],
  declarations: [...],
})
export class AppModule { }

3. Email and Password Authentication:

Sign Up:
Copy Code 
import { AngularFireAuth } from '@angular/fire/auth';

constructor(public auth: AngularFireAuth) {}

signUp(email: string, password: string) {
  this.auth.createUserWithEmailAndPassword(email, password)
    .then(userCredential => {
      // Signed up successfully.
      const user = userCredential.user;
    })
    .catch(error => {
      console.error(error);
    });
}
Sign In:
Copy Code 
signIn(email: string, password: string) {
  this.auth.signInWithEmailAndPassword(email, password)
    .then(userCredential => {
      // Signed in successfully.
      const user = userCredential.user;
    })
    .catch(error => {
      console.error(error);
    });
}
Sign Out:
Copy Code 
signOut() {
  this.auth.signOut()
    .then(() => {
      // Signed out successfully.
    })
    .catch(error => {
      console.error(error);
    });
}

4. Authentication State:

To listen for authentication state changes:

Copy Code 
user$: Observable<any>;

constructor(public auth: AngularFireAuth) {
  this.user$ = this.auth.authState;
}

In the template, to show content based on authentication state:

Copy Code 
<div *ngIf="user$ | async as user; else notLoggedIn">
  Welcome, {{ user.email }}!
  <button (click)="signOut()">Sign out</button>
</div>

<ng-template #notLoggedIn>
  Please sign in.
</ng-template>

Conclusion:

This overview provides a basic understanding of integrating Firebase Authentication in Angular applications using AngularFire for email and password authentication. Firebase offers multiple authentication providers like Google, Facebook, and Twitter, which can be similarly integrated. Ensure that you also set up authentication rules on Firestore or the Realtime Database to secure user data.

0 comments