Social login is the fastest way to engage users. And luckily firebase has done the hard work for us. In this post we will configure google login in no time!
1.1.1: Head to firebase and open your project
1.1.2: Open Authentication
from left sidebar
1.1.3: Goto Sign In Methods
and select Google
1.1.4: Enable it, select project support email
as your gmail account from dropdown and click on the save button
Note: Skip this if you have already enabled
1.2.1: Head to google cloud console and select your project from the top bar
1.2.2: Open APIs & Services
and then Credentials
from left sidebar
1.2.3: Click on Create Credentials
and select OAuth client id
1.2.4: Select Web Application
and save it
npm i -g firebase-tools
or
yarn global add firebase-tools
npm install firebase @angular/fire --save
or
yarn add firebase @angular/fire
...
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuth } from '@angular/fire/auth';
export const firebaseConfig = {
"apiKey": "xxxxxxxxxxxxxxxxxxxxxxxx",
"authDomain": "xxxxxxxxxxxxxxxxxxxxxxxx",
"databaseURL": "xxxxxxxxxxxxxxxxxxxxxxxx",
"projectId": "xxxxxxxxxxxxxxxxxxxxxxxx",
"storageBucket": "",
"messagingSenderId": "xxxxxxxxxxxxxxxxxxxxxxxx",
"appId": "xxxxxxxxxxxxxxxxxxxxxxxx"
}
@NgModule({
...
imports: [
...
AngularFireModule.initializeApp(firebaseConfig),
],
providers: [
...,
AngularFireAuth
],
bootstrap: [...]
})
export class AppModule { }
For this example, we will use a component
named LoginComponent
login.component.html
<button (click)="_loginWithGoogle()">Google</button>
login.component.ts
...
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';
@Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor(
private afAuth: AngularFireAuth
) { }
ngOnInit() { }
_loginWithGoogle() {
this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
.then(googleResponse => {
// Successfully logged in
console.log(googleResponse);
// Add your logic here
}).catch(err => {
// Login error
console.log(err);
});
}
}
there is no import { auth } from 'firebase/app';