Angular 16 Firebase Login with Twitter Example
I am going to show you how you can build login with Twitter using Firebase database with Angular feature with Real-time database.
Firebase offers various auth provider Apis for the user authentication system. In order to create Firebase Twitter login service, you must set up a basic Angular project and create Firebase account set up a project in Firebase account.
Once you are done with the above process then you must enter in your project directory and setup AngularFire2 real-time database library from the node package manager community.
After that you can easily build Angular Firebase Twitter login service It will let your users authenticate with Twitter auth provider with Angular.
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 @angular/fire firebase@9.16.0 --legacy-peer-deps
You’ve successfully installed AngularFire2 library from NPM community, let’s make the communication between your Firebase account and your Angular app.
First, create src/environments/ folder and environment.ts file, then add firebase configurations in environments/environment.ts file.
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
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 app.component.ts
template.
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(public authService: AuthService) {}
}
Step: 6 – Implement Twitter Login Auth Provider Service
Integrate Twitter login service in app.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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireDatabaseModule,
],
providers: [AuthService],
bootstrap: [AppComponent],
})
export class AppModule {}
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.