Angular 15 Firebase Login with Twitter Example

Step: 1 – Set up Angular App

ng new angularfirebaseproject

Your basic project is set to be used the second step is to enter into the project folder by using the following command.

cd angularfirebaseproject

Next, to remove strict type warnings or error make sure to set “strict”: false under compilerOptions property in tsconfig.json file.

Step: 2 – Setup AngularFire2 Library

Now setup Firebase (AngularFire2 library) in your Angular project.

npm install firebase @angular/fire --save

You’ve successfully installed AngularFire2 library from NPM community, let’s make the communication between your Firebase account and your Angular app.

Go to src/environments/environment.ts file in your project’s environments folder. Then add firebase configuration in environment file as given below.

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Step: 3 – Enable Twitter Auth Provider Service in Firebase Account

Go to your Firebase account and click on Authenticate button on the sidebar navigation menu then click in front of the Twitter link.

Enter your Twitter API key and API secret token then click on the save button. This method will activate your Twitter auth provider service from Firebase backend.

Step: 4 – Create Auth Service and Sign in component

Create auth.service.ts core file which will hold our main logic.

ng generate service auth

Create Sign in the template

ng generate component signin

Step: 5 – Generate Main Auth Service

Go to your auth.service.ts template.

import { Injectable } from '@angular/core';
import { TwitterAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}
  // Sign in with Twitter
  TwitterAuth() {
    return this.AuthLogin(new TwitterAuthProvider());
  }
  // Auth logic to run auth providers
  AuthLogin(provider) {
    return this.afAuth
      .signInWithPopup(provider)
      .then((result) => {
        console.log('You have been successfully logged in!');
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

Go to your signin.component.ts template.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css'],
})
export class SignInComponent implements OnInit {
  constructor(public authService: AuthService) {}
  ngOnInit() {}
}

Step: 6 – Implement Twitter Login Auth Provider Service

Integrate Twitter login service in signin.component.html template.

<div class="formGroup">
  <button type="button" (click)="authService.TwitterAuth()">
    Log in with Twitter
  </button>
</div>

Here is the final reference of app module class, you may add the given code in the the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { SignInComponent } from './signin/signin.component';
@NgModule({
  declarations: [AppComponent, SignInComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Make sure to evoke the auth components by adding the given tags in app.component.ts file.

<app-signin></app-signin>

We are ready to view the application on the browser.

ng serve --open

Read more: Complete Angular Firebase Authentication Tutorial.

Also, download the full code of this tutorial from GitHub.