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 used for (authentication) login and registration to any firebase project incl. auth providers like google, facebook, twitter github, microsoft and yahoo
- demo - overview - everything you need
- i18n
- appearance - how should the inputs looks like
- choose your authentication providers
- start with the login or register tab ?
- enable/disable the registration tab
- is you user allowed to reset his/her password? You can disable the appropriate button
- Disable the anonymous registration on demand via the guest input
- if you are providing a terms of services url, the user should check the checkbox to continue the registration process
- customize you auth messages - for the onSuccess and onError events
- specify the url to use after authentication
- password strengh api - customize the pass strength on your own
- guards api of the library can be used to protect any angular routes from unanthenticated users
<!-- You can now use the library component in app.component.html -->
<ngx-auth-firebaseui (onSuccess)="printUser($event)"
(onError)="printError()">
</ngx-auth-firebaseui>or
<!-- or simply in the app.component.ts -->
@Component({
selector: 'app',
template: `
<ngx-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()"></ngx-auth-firebaseui>`
})
class AppComponent {
printUser(event) {
console.log(event);
}
printError(event) {
console.error(event);
}
}| option | bind | type | default | description |
|---|---|---|---|---|
| providers | Input() |
string[] |
['all'] or [AuthProvider.All] | choose your favorite authentication provider: google |
| appearance | Input() |
MatFormFieldAppearance |
standard |
the appearance of the mat-form-field #'legacy' |
| tabIndex | Input() |
number |
null; |
0 |
| registrationEnabled | Input() |
boolean |
true |
whether the user is able to register a new account |
| resetPasswordEnabled | Input() |
boolean |
true |
whether the user is able to reset his account password |
| guestEnabled | Input() |
boolean |
true |
whether the user can sign in and continue as guest |
| tosUrl | Input() |
string |
- | the url of term of services |
| privacyPolicyUrl | Input() |
string |
- | the url of the private privacy |
| goBackURL | Input() |
string |
- | the url to redirect to after creating a new user and clicking the go back button - the button is only available when the input is provided |
| messageOnAuthSuccess | Input() |
string |
see the code -> | the message of the snackbar when the authentication process was successful |
| messageOnAuthError | Input() |
string |
see the code -> | the message of the snackbar when the authentication process has failed |
| 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! |
if you prefer to customize the text of this component, check these inputs here that have been used for translations
PS: if either tosUrl or privacyPolicyUrl are provided, the user will be asked to check and accepts tos and pp before registering a new account or sign in in anonymously
| option | bind | type | default | description |
|---|---|---|---|---|
| selectedTabChange | Output() |
MatTabChangeEvent |
- | output event is emitted when the active tab changes (signin, register and reset password tab) |
| enableLengthRule | Input() |
boolean |
true |
whether to validate the length of the password |
| enableLowerCaseLetterRule | Input() |
boolean |
true |
whether a lowercase letter is optional |
| enableUpperCaseLetterRule | Input() |
boolean |
true |
whether a uppercase letter is optional |
| enableDigitRule | Input() |
boolean |
true |
whether a digit char is optional |
| enableSpecialCharRule | Input() |
boolean |
true | whether a special char is optional |
| min | Input() |
number |
8 | the minimum length of the password |
| max | Input() |
number |
60 | the maximum length of the password |
| onStrengthChanged | Output() |
number |
- | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100% learn more |
| option | bind | type | default | description |
|---|---|---|---|---|
| verifyEmailTemplate | Input() |
TemplateRef<any> |
- |
custom template for the email confirmation component |
| verifyEmailTitleText | Input() |
string |
Confirm your e-mail address! |
- |
| verifyEmailConfirmationText | Input() |
string |
A confirmation e-mail has been sent. Check your inbox and click on the link "Confirm my e-mail" to confirm your e-mail address. |
- |
| verifyEmailGoBackText | Input() |
string |
Go back |
- |
| sendNewVerificationEmailText | Input() |
string |
Send new confirmation e-mail |
- |
| signOutText | Input() |
string |
Sign out |
- |
| option | bind | type | default | description |
|---|---|---|---|---|
| resetPasswordTabText | Input() |
string |
Reset e-mail address to password |
see context |
| resetPasswordInputText | Input() |
string |
Reset e-mail address to password |
see context |
| resetPasswordErrorRequiredText | Input() |
string |
E-mail is required to reset the password! |
see context |
| resetPasswordErrorPatternText | Input() |
string |
Please enter a valid e-mail address |
see context |
| resetPasswordActionButtonText | Input() |
string |
Reset |
see context |
| resetPasswordInstructionsText | Input() |
string |
Reset requested. Check your e-mail instructions. |
see context |
| signInTabText | Input() |
string |
Sign in |
see context |
| signInCardTitleText | Input() |
string |
Signing in |
see context |
| loginButtonText | Input() |
string |
Log In |
see context |
| forgotPasswordButtonText | Input() |
string |
Forgot Password ? |
see context |
| nameText | Input() |
string |
Name |
see context |
| nameErrorRequiredText | Input() |
string |
Name is required |
see context |
| nameErrorMinLengthText | Input() |
string |
The name is too short! |
see context |
| nameErrorMaxLengthText | Input() |
string |
The name is too long! |
see context |
| emailText | Input() |
string |
E-mail |
see context |
| emailErrorRequiredText | Input() |
string |
E-mail is required |
see context |
| emailErrorPatternText | Input() |
string |
Please enter a valid e-mail address |
see context |
| passwordText | Input() |
string |
Password |
see context |
| passwordErrorRequiredText | Input() |
string |
Password is required |
see context |
| passwordErrorMinLengthText | Input() |
string |
The password is too short! |
see context |
| passwordErrorMaxLengthText | Input() |
string |
The password is too long! |
see context |
| registerTabText | Input() |
string |
Register |
see context |
| registerCardTitleText | Input() |
string |
Registration |
see context |
| registerButtonText | Input() |
string |
Register |
see context |
| guestButtonText | Input() |
string |
continue as guest |
see context |
| emailConfirmationTitle | Input() |
string |
Confirm your e-mail address! |
see context |
| emailConfirmationText | Input() |
string |
A confirmation e-mail has been sent to you. Check your inbox and click on the link "Confirm my e-mail" to confirm your e-mail address. |
see context |
<ngx-auth-firebaseui [guestEnabled]="false"
(onSuccess)="printUser($event)"
(onError)="printError($event)">
</ngx-auth-firebaseui>Result:
How to configure your input providers ? see the examples
e.g: in your component, import the AuthProvider enum to pick up your favorite provider:
import {OnInit} from '@angular/core';
import {AuthProvider} from 'ngx-auth-firebaseui';
export class ExampleComponent implements OnInit {
providers = AuthProvider;
ngOnInit() {
}
}in your template -->
<ngx-auth-firebaseui
[providers]="[providers.Google, providers.Facebook, providers.Twitter]"
(onSuccess)="printUser($event)"
(onError)="printError($event)"></ngx-auth-firebaseui>or
<ngx-auth-firebaseui
[providers]="['google', 'facebook', 'twitter']"
(onSuccess)="printUser($event)"
(onError)="printError($event)">
</ngx-auth-firebaseui>take a look at the full documentation here
- @firebaseui/ng-bootstrap
- ngx-linkifyjs
- @angular-material-extensions/components
- @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)