ngx-auth-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.
Angular UI component for firebase authentication. This library is an angular module (including angular components and services) that allows to authenticate your users with your firebase project. NgxAuthFirebseUI is compatible with angular material and angular flexLayout.
If you prefer to develop with bootstrap rather than with material design, please check this project @firebaseui/ng-bootstrap
Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue here
If you like this project, support ngx-auth-firebaseui by starring ⭐ and sharing it 📢
Overview <ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoo see more
<!-- You can now use the library component in app.component.html -->
<ngx-auth-firebaseui-providers layout="column" theme="outline"></ngx-auth-firebaseui-providers>| option | bind | type | default | description |
|---|---|---|---|---|
| layout | Input() |
string |
row |
set the layout of the providers buttons options: 'column' or 'row' |
| theme | Input() |
string |
default |
set the theme of the providers buttons options: '', 'classic', 'stroked', 'fab', 'mini-fab', 'raised', |
| onSuccess | Output() |
any |
- | this will be fired when an authentication process was success. The authenticated user is emitted! |
| onError | Output() |
any |
- | this event will be fired when an error occurred during the authentication process! An error message is emitted! |
e.g: in template:
<ngx-auth-firebaseui-providers [theme]="themes.CLASSIC"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.STROKED"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.RAISED"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.FAB"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.MINI_FAB"></ngx-auth-firebaseui-providers>in your component:
import {Component} from '@angular/core';
import {AuthProvider, Theme} from 'ngx-auth-firebaseui';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
themes = Theme;
}
Please note: when the view port is getting too small, the layout will be
automatically change to column
<!-- You can now use the library component in app.component.html -->
<ngx-auth-firebaseui-providers layout="row"></ngx-auth-firebaseui-providers>
<!-- You can now use the library component in app.component.html -->
<ngx-auth-firebaseui-providers layout="column"></ngx-auth-firebaseui-providers>- @firebaseui/ng-bootstrap
- ngx-linkifyjs
- @angular-material-extensions/select-country
- @angular-material-extensions/fab-menu
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/pages
- @angular-material-extensions/link-preview
- @angular-material-extensions/contacts
- @angular-material-extensions/faq
- @angular-material-extensions/jumbotron
- angular-material-extensions/freelancer-theme
- @angular-material-extensions/combination-generator
- Drop an email to: Anthony Nahas
- or open an appropriate issue
- let us chat on Gitter
Built by and for developers ❤️ we will help you 👊
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)