Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anthonynahas/ionic-auth-firebaseui
Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire
https://github.com/anthonynahas/ionic-auth-firebaseui
angular angularfire2 facebook firebase firebase-authentication github google ionic twitter ui
Last synced: 2 months ago
JSON representation
Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire
- Host: GitHub
- URL: https://github.com/anthonynahas/ionic-auth-firebaseui
- Owner: AnthonyNahas
- License: mit
- Created: 2019-02-28T22:00:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:55:10.000Z (almost 2 years ago)
- Last Synced: 2024-05-22T23:24:31.854Z (7 months ago)
- Topics: angular, angularfire2, facebook, firebase, firebase-authentication, github, google, ionic, twitter, ui
- Language: JavaScript
- Size: 1.83 MB
- Stars: 26
- Watchers: 6
- Forks: 4
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-auth-firebaseui - Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire
# PLEASE TAKE IN CONSIDERATION THAT THIS PROJECT STILLS UNDER DEVELOPMENT
[](https://badge.fury.io/js/ionic-auth-firebaseui),
[](https://ngx-auth-firebaseui.firebaseapp.com)
[](https://gitter.im/ngx-auth-firebaseui/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://codecov.io/gh/anthonynahas/ionic-auth-firebaseui)
[](https://travis-ci.org/AnthonyNahas/ionic-auth-firebaseui)
[](https://circleci.com/gh/AnthonyNahas/ionic-auth-firebaseui)
[](https://coveralls.io/github/AnthonyNahas/ionic-auth-firebaseui?branch=master)
[](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui)
[](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui#info=devDependencies)
[](https://greenkeeper.io/)
[](https://github.com/AnthonyNahas/ionic-auth-firebaseui/blob/master/LICENSE)
- [Angular Material Design Version]()
- [Angular Bootstrap Version](https://github.com/firebaseui/ng-bootstrap)
## Built by and for developers :heart:
Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue [here](https://github.com/anthonynahas/ionic-auth-firebaseui/issues)
If you like this project, support [ionic-auth-firebaseui](https://github.com/anthonynahas/ionic-auth-firebaseui)
by starring :star: and sharing it :loudspeaker:
## Table of Contents
- [Why to use ionic-auth-firebaseui ?](#why-to-use-ionic-auth-firebaseui)
- [Supported Providers](#supported-procress-and-actions)
- [Supported Processes and Actions](#supported-procress-and-actions)
- [Requirements](#requirements)
- [Demo](#demo)
- [Documentation](#documentation)
- [Screenshots](#screenshots)
- [Peer Dependencies](#peerDependencies)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Library's components](#components)
- [Configuration](#configuration)
- [Usage](#usage)
- [API](#api)
- [Run Demo App Locally](#run-demo-app-locally)
- [Other Angular Libraries](#other-angular-libraries)
- [Support](#support)
- [License](#license)
## Supported Providers:
- anonymously
- email and password (traditional)
- google
- facebook
- twitter
- github
- phone number :soon:
## Supported Processes and Actions:
- sign up
- sign in
- sign in Anonymously | with google, facebook, twitter, github
- sign out
- validation of password's strength while creating a new account using [@angular-material-extensions/password-strength](https://github.com/AnthonyNahas/@angular-material-extensions/password-strength)
- forgot/reset password
- sending email verifications
- delete user's account
- edit user's profile like email, name, (profile picture :soon:) and phone number
- firestore auto sync :fire:
- do not allow users to create new accounts before checking the terms of services and private policy - for mor info check this [here](https://ngx-auth-firebaseui.firebaseapp.com/examples/tos)
### Requirements:
- [angular forms - v7.x](https://www.npmjs.com/package/@angular/forms)
- [@angular/fire - v5.x](https://www.npmjs.com/package/@angular/fire)
- [firebase - v5.x](https://www.npmjs.com/package/firebase)
## Demo
View all the directives in action at https://AnthonyNahas.github.io/ionic-auth-firebaseui
## Dependencies
* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 7x)
* [Ionic](https://ionicframework.com/) (*requires* Ionic 4 or higher, tested with 4x)
## Library's components
- `` used for the authentication process
- `` used to display only buttons for providers like google, facebook, twitter and github
- `` used to display/edit the data of the current authenticated user
## Installation
Install above dependencies via *npm*.
Now install `ionic-auth-firebaseui` via:
```shell
npm install --save ionic-auth-firebaseui
```
---
##### SystemJS
>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
In your systemjs config file, `map` needs to tell the System loader where to look for `ionic-auth-firebaseui`:
```js
map: {
'ionic-auth-firebaseui': 'node_modules/ionic-auth-firebaseui/bundles/ionic-auth-firebaseui.umd.js',
}
```
---
Once installed you need to import the main module:
```js
import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';
```
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ` IonicAuthFirebaseuiModule.forRoot()`):
```js
import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';
@NgModule({
declarations: [AppComponent, ...],
imports: [IonicAuthFirebaseuiModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
Other modules in your application can simply import ` IonicAuthFirebaseuiModule `:
```js
import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';
@NgModule({
declarations: [OtherComponent, ...],
imports: [IonicAuthFirebaseuiModule, ...],
})
export class OtherModule {
}
```
## (2) [Configuration](https://ngx-auth-firebaseui.firebaseapp.com/examples)
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { IonicAuthFirebaseUIModule } from 'ionic-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
// Specify the ngx-auth-firebaseui library as an import
IonicAuthFirebaseUIModule.forRoot(
{
apiKey: 'your-firebase-apiKey',
authDomain: 'your-firebase-authDomain',
databaseURL: 'your-firebase-databaseURL',
projectId: 'your-firebase-projectId',
storageBucket: 'your-firebase-storageBucket',
messagingSenderId: 'your-firebase-messagingSenderId'
},
() => 'your_app_name_factory',
{
enableFirestoreSync: true, // enable/disable autosync users with firestore
toastMessageOnAuthSuccess: false, // whether to open/show a snackbar message on auth success - default : true
toastMessageOnAuthError: false // whether to open/show a snackbar message on auth error - default : true
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
----
## Usage
Once the library is imported, you can use its components, directives and pipes in your Angular application:
### ``
```html
```
or
```typescript
@Component({
selector: 'app',
template: `
`
})
class AppComponent {
printUser(event) {
console.log(event);
}
printError(event) {
console.error(event);
}
}
```
## API
### ``
| option | bind | type | default | description |
|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| providers | Input() | string[] | ['all'] or [AuthProvider.All] | choose your favorite authentication provider: google | facebook | twitter | github
| appearance | Input() | MatFormFieldAppearance | `standard` | the appearance of the mat-form-field #'legacy' | 'standard' | 'fill' | 'outline'
| tabIndex | Input() | number | null; | `0` | the selected tab - either sign in or register
| 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!
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 |
|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| editMode | Input() | boolean | false | whether the use is in edit mode
| canLogout | Input() | boolean | true | whether to render the logout button
| canDeleteAccount | Input() | boolean | true | whether to render the delete account button
| appearance | Input() | MatFormFieldAppearance | - | the style of the mat-input-form
| onAccountDeleted | Output()| void | - | this will be fired when the user deletes his account
---
## Other Angular Libraries
- [ngx-auth-firebaseui](https://github.com/anthonynahas/ngx-auth-firebaseui)
- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)
- [ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs)
- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)
- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)
- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)
- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)
- [@angular-material-extensions/jumbotron](https://github.com/angular-material-extensions/jumbotron)
- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)
- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)
---
## Support
+ Drop an email to: [Anthony Nahas](mailto:[email protected])
+ or open an appropriate [issue](https://github.com/anthonynahas/ionic-auth-firebaseui/issues)
+ let us chat on [Gitter](https://gitter.im/ngx-auth-firebaseui/Lobby)
Built by and for developers :heart: we will help you :punch:
---
## License
Copyright (c) 2019 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)