{"id":15508493,"url":"https://github.com/anthonynahas/ionic-auth-firebaseui","last_synced_at":"2025-06-24T13:40:10.429Z","repository":{"id":36257618,"uuid":"173194304","full_name":"AnthonyNahas/ionic-auth-firebaseui","owner":"AnthonyNahas","description":"Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire","archived":false,"fork":false,"pushed_at":"2023-01-04T22:55:10.000Z","size":1922,"stargazers_count":26,"open_issues_count":32,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-20T00:23:18.012Z","etag":null,"topics":["angular","angularfire2","facebook","firebase","firebase-authentication","github","google","ionic","twitter","ui"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnthonyNahas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-28T22:00:18.000Z","updated_at":"2025-02-24T20:28:32.000Z","dependencies_parsed_at":"2022-09-01T04:20:30.889Z","dependency_job_id":null,"html_url":"https://github.com/AnthonyNahas/ionic-auth-firebaseui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fionic-auth-firebaseui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fionic-auth-firebaseui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fionic-auth-firebaseui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fionic-auth-firebaseui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnthonyNahas","download_url":"https://codeload.github.com/AnthonyNahas/ionic-auth-firebaseui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250355897,"owners_count":21416989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularfire2","facebook","firebase","firebase-authentication","github","google","ionic","twitter","ui"],"created_at":"2024-10-02T09:38:48.932Z","updated_at":"2025-04-23T02:25:06.479Z","avatar_url":"https://github.com/AnthonyNahas.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\"\n   src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ionic-auth-firebaseui@master/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# ionic-auth-firebaseui - Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire\n\n# PLEASE TAKE IN CONSIDERATION THAT THIS PROJECT STILLS UNDER DEVELOPMENT\n\n[![npm version](https://badge.fury.io/js/ionic-auth-firebaseui.svg)](https://badge.fury.io/js/ionic-auth-firebaseui),\n[![demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-auth-firebaseui.firebaseapp.com)\n[![Join the chat at https://gitter.im/ngx-auth-firebaseui/Lobby](https://badges.gitter.im/ngx-auth-firebaseui/Lobby.svg)](https://gitter.im/ngx-auth-firebaseui/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![codecov](https://codecov.io/gh/anthonynahas/ionic-auth-firebaseui/branch/master/graph/badge.svg)](https://codecov.io/gh/anthonynahas/ionic-auth-firebaseui)\n[![Build Status](https://travis-ci.org/AnthonyNahas/ionic-auth-firebaseui.svg?branch=master)](https://travis-ci.org/AnthonyNahas/ionic-auth-firebaseui)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/AnthonyNahas/ionic-auth-firebaseui/master.svg?label=circleci)](https://circleci.com/gh/AnthonyNahas/ionic-auth-firebaseui)\n[![Coverage Status](https://coveralls.io/repos/github/AnthonyNahas/ionic-auth-firebaseui/badge.svg?branch=master)](https://coveralls.io/github/AnthonyNahas/ionic-auth-firebaseui?branch=master)\n[![dependency Status](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui/status.svg)](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui)\n[![devDependency Status](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui/dev-status.svg?branch=master)](https://david-dm.org/AnthonyNahas/ionic-auth-firebaseui#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/AnthonyNahas/ionic-auth-firebaseui.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/anthonynahas/ionic-auth-firebaseui.svg?style=flat-square)](https://github.com/AnthonyNahas/ionic-auth-firebaseui/blob/master/LICENSE)\n\n\n- [Angular Material Design Version]() \n- [Angular Bootstrap Version](https://github.com/firebaseui/ng-bootstrap) \n\n\n## Built by and for developers :heart:\nDo you have any question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate issue [here](https://github.com/anthonynahas/ionic-auth-firebaseui/issues)\n\nIf you like this project, support [ionic-auth-firebaseui](https://github.com/anthonynahas/ionic-auth-firebaseui) \nby starring :star: and sharing it :loudspeaker:\n\n## Table of Contents\n- [Why to use ionic-auth-firebaseui ?](#why-to-use-ionic-auth-firebaseui)\n- [Supported Providers](#supported-procress-and-actions)\n- [Supported Processes and Actions](#supported-procress-and-actions)\n- [Requirements](#requirements)\n- [Demo](#demo)\n- [Documentation](#documentation)\n- [Screenshots](#screenshots)\n- [Peer Dependencies](#peerDependencies)\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Library's components](#components)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [API](#api)\n- [Run Demo App Locally](#run-demo-app-locally)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\u003ca name=\"supported-providers\"/\u003e\n\n## Supported Providers:\n- anonymously\n- email and password (traditional)\n- google\n- facebook\n- twitter\n- github\n- phone number :soon:\n\n\u003ca name=\"supported-procress-and-actions\"/\u003e\n\n## Supported Processes and Actions:\n- sign up\n- sign in\n- sign in Anonymously | with google, facebook, twitter, github\n- sign out\n- 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)\n- forgot/reset password\n- sending email verifications\n- delete user's account\n- edit user's profile like email, name, (profile picture :soon:) and phone number\n- firestore auto sync :fire:  \n- 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)\n\n\u003ca name=\"requirements\"/\u003e\n\n### Requirements:\n- [angular forms - v7.x](https://www.npmjs.com/package/@angular/forms)\n- [@angular/fire - v5.x](https://www.npmjs.com/package/@angular/fire)\n- [firebase - v5.x](https://www.npmjs.com/package/firebase)\n\n## Demo\n\nView all the directives in action at https://AnthonyNahas.github.io/ionic-auth-firebaseui\n\n## Dependencies\n* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 7x)\n* [Ionic](https://ionicframework.com/) (*requires* Ionic 4 or higher, tested with 4x)\n\n\u003ca name=\"components\"/\u003e\n\n## Library's components\n- `\u003cionic-auth-firebaseui\u003e` used for the authentication process\n- `\u003cionic-auth-firebaseui-providers\u003e` used to display only buttons for providers like google, facebook, twitter and github\n- `\u003cionic-auth-firebaseui-user\u003e` used to display/edit the data of the current authenticated user\n\n\n## Installation\nInstall above dependencies via *npm*. \n\nNow install `ionic-auth-firebaseui` via:\n```shell\nnpm install --save ionic-auth-firebaseui\n```\n\n---\n##### SystemJS\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ionic-auth-firebaseui`:\n```js\nmap: {\n  'ionic-auth-firebaseui': 'node_modules/ionic-auth-firebaseui/bundles/ionic-auth-firebaseui.umd.js',\n}\n```\n---\n\nOnce installed you need to import the main module:\n```js\nimport { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';\n```\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` IonicAuthFirebaseuiModule.forRoot()`):\n```js\nimport { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [IonicAuthFirebaseuiModule.forRoot(), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import ` IonicAuthFirebaseuiModule `:\n\n```js\nimport { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [IonicAuthFirebaseuiModule, ...], \n})\nexport class OtherModule {\n}\n```\n\n\n\u003ca name=\"configuration\"/\u003e\n\n## (2) [Configuration](https://ngx-auth-firebaseui.firebaseapp.com/examples)\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { IonicAuthFirebaseUIModule } from 'ionic-auth-firebaseui';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n\n    // Specify the ngx-auth-firebaseui library as an import\n    IonicAuthFirebaseUIModule.forRoot(\n                {\n                  apiKey: 'your-firebase-apiKey',\n                  authDomain: 'your-firebase-authDomain',\n                  databaseURL: 'your-firebase-databaseURL',\n                  projectId: 'your-firebase-projectId',\n                  storageBucket: 'your-firebase-storageBucket',\n                  messagingSenderId: 'your-firebase-messagingSenderId'\n                },\n                 () =\u003e 'your_app_name_factory',\n                {\n                  enableFirestoreSync: true, // enable/disable autosync users with firestore\n                  toastMessageOnAuthSuccess: false, // whether to open/show a snackbar message on auth success - default : true\n                  toastMessageOnAuthError: false // whether to open/show a snackbar message on auth error - default : true\n                }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n----\n\n## Usage\n\nOnce the library is imported, you can use its components, directives and pipes in your Angular application:\n\n### `\u003cngx-auth-firebaseui\u003e\u003c/ngx-auth-firebaseui\u003e`\n\n```html\n\u003c!-- You can now use the library component in app.component.html  --\u003e\n\n\u003cionic-auth-firebaseui (onSuccess)=\"printUser($event)\"\n                     (onError)=\"printError()\"\u003e\n\u003c/ionic-auth-firebaseui\u003e\n```\nor\n```typescript\n\u003c!-- or simply in the app.component.ts --\u003e\n@Component({\n    selector: 'app',\n    template: `\n        \u003cionic-auth-firebaseui (onSuccess)=\"printUser($event)\" (onError)=\"printError()\"\u003e\u003c/ionic-auth-firebaseui\u003e`\n})\nclass AppComponent {\n\n    printUser(event) {\n        console.log(event);\n    }\n\n    printError(event) {\n        console.error(event);\n    }\n}\n```\n\n\u003ca name=\"api\"/\u003e\n\n## API\n\n###  `\u003cngx-auth-firebaseui\u003e\u003c/ngx-auth-firebaseui\u003e`\n\n| option | bind  |  type  |   default    | description  |\n|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|\n| providers            | Input()  | string[] | ['all'] or [AuthProvider.All] | choose your favorite authentication provider: google | facebook | twitter | github\n| appearance           | Input()  | MatFormFieldAppearance | `standard` | the appearance of the mat-form-field #'legacy' | 'standard' | 'fill' | 'outline' \n| tabIndex             | Input()  | number  | null; | `0` | the selected tab - either sign in or register\n| registrationEnabled  | Input()  | boolean | `true` | whether the user is able to register a new account\n| resetPasswordEnabled | Input()  | boolean | `true` | whether the user is able to reset his account password\n| guestEnabled         | Input()  | boolean | `true` | whether the user can sign in and continue as guest\n| tosUrl               | Input()  | string  | - | the url of term of services\n| privacyPolicyUrl     | Input()  | string  | - | the url of the private privacy\n| 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 \n| messageOnAuthSuccess | Input()  | string  | see the code -\u003e | the message of the snackbar when the authentication process was successful\n| messageOnAuthError   | Input()  | string  | see the code -\u003e | the message of the snackbar when the authentication process has failed\n| onSuccess            | Output() | any     | - | this will be fired when an authentication process was success. The authenticated user is emitted!\n| onError              | Output() | any     | - | this event will be fired when an error occurred during the authentication process! An error message is emitted!\n\n\nPS: 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\n\n\n### `\u003cionic-auth-firebaseui-user\u003e\u003c/ionic-auth-firebaseui-user\u003e`\n\n| option | bind  |  type  |   default    | description  |\n|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|\n| editMode           | Input() | boolean     | false | whether the use is in edit mode\n| canLogout          | Input() | boolean     | true | whether to render the logout button\n| canDeleteAccount   | Input() | boolean     | true | whether to render the delete account button\n| appearance         | Input() | MatFormFieldAppearance     | - | the style of the mat-input-form\n| onAccountDeleted   | Output()| void     | - | this will be fired when the user deletes his account\n\n---\n\n\u003ca name=\"other-angular-libraries\"/\u003e\n\n## Other Angular Libraries\n- [ngx-auth-firebaseui](https://github.com/anthonynahas/ngx-auth-firebaseui)\n- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)\n- [ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs)\n- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/jumbotron](https://github.com/angular-material-extensions/jumbotron)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)\n\n---\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n+ or open an appropriate [issue](https://github.com/anthonynahas/ionic-auth-firebaseui/issues)\n+ let us chat on [Gitter](https://gitter.im/ngx-auth-firebaseui/Lobby)\n \n Built by and for developers :heart: we will help you :punch:\n\n---\n\n## License\n\nCopyright (c) 2019 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fionic-auth-firebaseui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonynahas%2Fionic-auth-firebaseui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fionic-auth-firebaseui/lists"}