Ngafr-authentication NPM

NgafrAuthentication

This library is used to add the firebase authentication (Email / Password or Social logins) using the directive ngafrAuth in the html template of Angular project.

Dependencies

* [angular-fire-ui](https://www.npmjs.com/package/angular-fire-ui)

Install

ngafr-authentication package installation

    npm i ngafr-authentication  --save

Installation with dependencies (recommended)

    npm i ngafr-authentication firebase firebaseui @angular/fire firebaseui-angular tsickle --save

Usage

Update AppModule

const firebaseConfig = {
    apiKey: '*******',
    authDomain: '*******',
    databaseURL: '*******',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: ''
};
// Only choose the required Auth providers & omit the rest from this list
const authProviders: FirebaseAuthProviders ={
    googleAuthProvider: true,
    emailAuthProvider: false,
    githubAuthProvider: false,
    facebookAuthProvider: false,
    AnonymousAuthProvider: false,
    phoneAuthProvider: false,
    twitterAuthProvider: false,
};
imports: [
    ...,
    NgafrAuthenticationModule
        .forRoot(firebaseConfig, authProviders),
    ...
]

Use in a template Basic usage

<div ngafrAuth></div>

<ng-container 
    ngafrAuth
    (userLoggedInEvent)="loggedInEvent($event)"
    (userEvent)="userEvent($event)"
    hideDefaultLogOutButton = "true"
    #ngafrAuth="ngafrAuth">
</ng-container>

Adding custom Logout button

<button [disabled]="!loggedIn" (click)="ngafrAuth.logout()">Logout</button>

Use in a component TS

export class AuthDemoComponent {
    public loggedIn = false;
    public userName = 'Guest';
    constructor() { }
    loggedInEvent($event) {
        this.loggedIn = $event.isLoggedIn;
    }
    userEvent($event) {
        this.userName = 'Guest';
        if ($event && $event.user && $event.user.displayName)
            this.userName = $event.user.displayName;
    }
}

Error TS2344: Type ‘TK’ does not satisfy the constraint When trying to run ng serve command, you may got the error: `ERROR in node_modules/@angular/fire/angularfire2.d.ts:37:49 - error TS2344: Type 'TK' does not satisfy the constraint '(...args: any) => any'. Type 'T[{ K in keyof T: TK extends Function ? K : never; }keyof T]' is not assignable to type '(...args: any) => any'. Type 'T[Tkeyof T extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'. Type 'Tkeyof T' is not assignable to type '(...args: any) => any'. Type 'Tstring | Tnumber | Tsymbol' is not assignable to type '(...args: any) => any'. Type 'Tstring' is not assignable to type '(...args: any) => any'.
... ...It is because of the TypeScript type checking in the definitions file of the AngularFire library. To avoid this error, just add an option in tsconfig.json file: { //... compilerOptions: { "skipLibCheck": true, //... } } `