All Projects → AnthonyNahas → ionic-auth-firebaseui

AnthonyNahas / ionic-auth-firebaseui

Licence: MIT license
Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to ionic-auth-firebaseui

ionic3-firebase-ngrx
Sample Ionic 3 application using ngrx with firebase (auth, crud and camera plugin)
Stars: ✭ 48 (+92%)
Mutual labels:  ionic, angularfire2
Ionic Firebase Chat
Create a Real Time Chat App with Ionic && Firebase
Stars: ✭ 33 (+32%)
Mutual labels:  facebook, ionic
todo-list
TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.
Stars: ✭ 18 (-28%)
Mutual labels:  ionic, angularfire2
ionic2-firebase-hackathon-starter
A hackathon starter for ionic2 using firebase, already has user authentication, reset password, google login etc
Stars: ✭ 34 (+36%)
Mutual labels:  facebook, ionic
bitpocket-mobile-app
Mobile app for accepting bitcoin payments at the point of sale (Bitcoin POS).
Stars: ✭ 26 (+4%)
Mutual labels:  ionic
avz
🔑 AVZ: Social Authorization
Stars: ✭ 43 (+72%)
Mutual labels:  facebook
v-cupertino
A Vue 3 Wrapper for Cupertino Pane Library
Stars: ✭ 17 (-32%)
Mutual labels:  ionic
spring-boot-oauth2-login
No description or website provided.
Stars: ✭ 24 (-4%)
Mutual labels:  facebook
ionic-truncated-slider-cards
Customized slider component to achieve a fancy horizontal truncated slider, basically for short list of cards
Stars: ✭ 19 (-24%)
Mutual labels:  ionic
okta-ionic-auth-example
Example showing Ionic Authentication with Okta
Stars: ✭ 23 (-8%)
Mutual labels:  ionic
ionic4-ngrx-firebase
A basic application for Ionic 4 with firebase & ngrx actions, reducers and effects
Stars: ✭ 17 (-32%)
Mutual labels:  ionic
ionic2-jest-example
Example of how to test an Ionic2 app with Jest
Stars: ✭ 43 (+72%)
Mutual labels:  ionic
adium-facebook
Facebook plugin for Adium
Stars: ✭ 13 (-48%)
Mutual labels:  facebook
ionic-uuchat
基于ionic3,angular4的实时聊天app,兼容web端。该项目只是前端部分,所有数据需要请求后端服务器,需要配套express-uuchat-api使用。
Stars: ✭ 14 (-44%)
Mutual labels:  ionic
live-broadcast-bundle
Live broadcasting planner and scheduler
Stars: ✭ 38 (+52%)
Mutual labels:  facebook
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (+132%)
Mutual labels:  ionic
hubot-messenger-bot
🔌 A Hubot adapter for Facebook Messenger Platform (Bots) with zero external dependencies.
Stars: ✭ 44 (+76%)
Mutual labels:  facebook
ionic-image-upload
Ionic Plugin for Uploading Images to Amazon S3
Stars: ✭ 26 (+4%)
Mutual labels:  ionic
oembed
PHP OEmbed wrapper for well-known video platforms and services
Stars: ✭ 26 (+4%)
Mutual labels:  facebook
artefactory-connectors-kit
ACK is an E(T)L tool specialized in API data ingestion. It is accessible through a Command-Line Interface. The application allows you to easily extract, stream and load data (with minimum transformations), from the API source to the destination of your choice.
Stars: ✭ 34 (+36%)
Mutual labels:  facebook

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

npm version, demo Join the chat at https://gitter.im/ngx-auth-firebaseui/Lobby codecov Build Status CircleCI branch Coverage Status dependency Status devDependency Status Greenkeeper Badge license

Built by and for developers ❤️

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 ionic-auth-firebaseui by starring and sharing it 📢

Table of Contents

Supported Providers:

  • anonymously
  • email and password (traditional)
  • google
  • facebook
  • twitter
  • github
  • phone number 🔜

Supported Processes and Actions:

Requirements:

Demo

View all the directives in action at https://AnthonyNahas.github.io/ionic-auth-firebaseui

Dependencies

  • Angular (requires Angular 2 or higher, tested with 7x)
  • Ionic (requires Ionic 4 or higher, tested with 4x)

Library's components

  • <ionic-auth-firebaseui> used for the authentication process
  • <ionic-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter and github
  • <ionic-auth-firebaseui-user> used to display/edit the data of the current authenticated user

Installation

Install above dependencies via npm.

Now install ionic-auth-firebaseui via:

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:

map: {
  'ionic-auth-firebaseui': 'node_modules/ionic-auth-firebaseui/bundles/ionic-auth-firebaseui.umd.js',
}

Once installed you need to import the main module:

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()):

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:

import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [IonicAuthFirebaseuiModule, ...], 
})
export class OtherModule {
}

(2) Configuration

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:

<ngx-auth-firebaseui></ngx-auth-firebaseui>

<!-- You can now use the library component in app.component.html  -->

<ionic-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError()">
</ionic-auth-firebaseui>

or

<!-- or simply in the app.component.ts -->
@Component({
    selector: 'app',
    template: `
        <ionic-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()"></ionic-auth-firebaseui>`
})
class AppComponent {

    printUser(event) {
        console.log(event);
    }

    printError(event) {
        console.error(event);
    }
}

API

<ngx-auth-firebaseui></ngx-auth-firebaseui>

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!

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

<ionic-auth-firebaseui-user></ionic-auth-firebaseui-user>

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


Support

Built by and for developers ❤️ we will help you 👊


License

Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].