Auth using firebaseui for angular

Install firebaseui-angular

	# Only firebaseui-angular
	npm install firebaseui-angular
	# Install with all dependent packages
	npm install firebase firebaseui @angular/fire firebaseui-angular

view raw firebaseui-angular.sh hosted with ❤ by GitHub

current firebaseui-angular 3.3.3 install spit out warnings with angular 7!

Add the FirebaseUIModule with the config to your imports.

	...
	import {AngularFireModule} from '@angular/fire';
	import {AngularFireAuthModule} from '@angular/fire/auth';
	import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';
	...
	const firebaseUiAuthConfig: firebaseui.auth.Config = {
	signInFlow: 'popup',
	signInOptions: [
	firebase.auth.GoogleAuthProvider.PROVIDER_ID,
	{
	scopes: [
	'public_profile',
	'email',
	'user_likes',
	'user_friends'
	],
	customParameters: {
	'auth_type': 'reauthenticate'
	},
	provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
	},
	firebase.auth.TwitterAuthProvider.PROVIDER_ID,
	firebase.auth.GithubAuthProvider.PROVIDER_ID,
	{
	requireDisplayName: false,
	provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
	},
	firebase.auth.PhoneAuthProvider.PROVIDER_ID,
	firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
	],
	tosUrl: '<your-tos-link>',
	privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
	credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
	};
	...
	@NgModule({
	...
	imports: [
	...
	AngularFireModule.initializeApp(environment.firebaseConfig),
	AngularFireAuthModule,
	FirebaseUIModule.forRoot(firebaseUiAuthConfig)
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule {
	}

view raw AddFirebaseUIModule.ts hosted with ❤ by GitHub

CSS Import

Import the firebaseui css to your src/styles.css file

@import '~firebaseui/dist/firebaseui.css';

view raw angular-style.css hosted with ❤ by GitHub

Use tag

Use below tag where login select div is needed.

<firebase-ui></firebase-ui>

view raw firebaseui-tag.html hosted with ❤ by GitHub

ref : https://www.npmjs.com/package/firebaseui-angular