Angular 9 Firebase Auth – Anonymous Authentication with AngularFire2 v4
Tags: angular9, firebase, authentication
Published: 2021-03-18 16:05:09

https://grokonez.com/angular-9-firebase-auth-anonymous-authentication

Anonymous authentication uses only a userID to login without registration. Once signing out, user will not be able to log back in. In this tutorial, we're gonna look at way to implement Anonymous authentication with AngularFire2 v4.

Related Post:
<a href="https://grokonez.com/frontend/angular/how-to-integrate-firebase-with-angular-4">How to integrate Firebase with Angular 9</a>

More Practice:
<a href="https://grokonez.com/frontend/angular/angular-4-firebase-auth-email-password-authentication-with-angularfire2-email-login">Angular 9 Firebase Auth – Email/Password Authentication with AngularFire2 v4</a>

<!--more-->
<h2>I. Technology</h2>
- Angular 9
- AngularFire2 4.0
<h2>II. Overview</h2>
We will build an Angular 9 App that allows user login anonymously:

<img src="https://grokonez.com/wp-content/uploads/2017/09/angular-4-firebase-auth-anonymous-overview.png" alt="angular-4-firebase-auth-anonymous-overview" width="512" height="192" class="alignnone size-full wp-image-8033" />
<h2>II. How to do</h2>
<h3>1. Set up the Firebase Project & Install AngularFire2</h3>
Please visit <a href="https://grokonez.com/frontend/angular/how-to-integrate-firebase-with-angular-4">this post</a> to know step by step.

<img src="https://grokonez.com/wp-content/uploads/2017/08/angular-4-firebase-integration-copy-firebase-project-config.png" alt="angular-4-firebase-integration-copy-firebase-project-config" width="660" height="380" class="alignnone size-full wp-image-7736" />
<h3>2. Enable Firebase Auth for Anonymous</h3>
Go to your Project on Firebase Console -> <strong>Authentication</strong> tab -> <strong>SIGN-IN METHOD</strong> -> enable Anonymous:

<img src="https://grokonez.com/wp-content/uploads/2017/09/angular-4-firebase-auth-anonymous-enable-console.png" alt="angular-4-firebase-auth-anonymous-enable-console" width="655" height="585" class="alignnone size-full wp-image-8026" />
<h3>3. Auth Service</h3>
<pre><code class="language-javascript">
import {AngularFireAuth} from 'angularfire2/auth';

@Injectable()
export class AuthService {

  authState: any = null;

  constructor(private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe((auth) => {
      this.authState = auth
    });
  }

  get isUserAnonymousLoggedIn(): boolean {
    return (this.authState !== null) ? this.authState.isAnonymous : false
  }

  get currentUserId(): string {
    return (this.authState !== null) ? this.authState.uid : '';
  }

  anonymousLogin() {
    return this.afAuth.auth.signInAnonymously()
      .then((user) => {
        this.authState = user
      })
      .catch(error => console.log(error));
  }

  signOut(): void {
    this.afAuth.auth.signOut();
  }
}
</code></pre>
- We subscribe to the AngularFire <code>auth</code> observable that returns a <code>FirebaseAuthState</code> object. This object is <strong>null</strong> when logging out, and contains useful User Information (UID, Display Name, Photo URL...) when logging in.
- We use:
+ <code>AngularFireAuth.auth.signInAnonymously()</code> to log in.
+ <code>AngularFireAuth.auth.signOut()</code> to log out.

https://grokonez.com/angular-9-firebase-auth-anonymous-authentication