@acknow-srl/auth

Handles the authentication process on a GraphQL server.

Usage no npm install needed!

<script type="module">
  import acknowSrlAuth from 'https://cdn.skypack.dev/@acknow-srl/auth';
</script>

README

Auth

Handles the authentication process on a GraphQL server.

AckAuthModule (Module)

The main authentication module.

Methods

  • forRoot(config: AckAuthConfig): void: configure the connection to the GraphQL server ad the authentication cookie name.

AckCredentials (Interface)

Describes the credentials for authentication.

  • email (string): e-mail address.
  • password (string): plain text password.

AckAuthConfig (Interface)

Describes the authentication strategy configuration.

  • server (string): GraphQL server URL.
  • store (string): the storage to use. Can be cookie, localstorage (or webstorage) or indexeddb. If not provided or empty, it defaults to cookie. Note: currently, only cookie is supported.
  • key (string): the name for the authentication entry. If not provided or empty, it defaults to ack_logged_in.

AckAuthFormField (Interface)

Describes an authentication form field.

  • icon (string): icon for the field. Defaults to an empty string.
  • placeholder (string): placeholder for the field. Defaults to an empty string.
  • value (string): initial value for the field. Defaults to an empty string.

AckAuthError (Interface)

Describes an authentication error.

  • code (string): the authentication error code.
  • message (string): the authentication error message.

AckAuth (Service)

It is provided in root, so it is available to the whole app.

Methods

  • login(credentials: AckCredentials): Observable<string|null>: returns an Observable with the authentication token (and save it in the authentication cookie). If login fails, returns an Observable with an empty string.
  • logout(): void: logs out the authenticated user.
  • authenticated(): string: returns the authentication token or an empty string.
  • isCurrentUserActive(): Observable<boolean>: returns an Observable with true if the authenticated user is active. Otherwise, returns an Observable with false.

AckAuthInterceptor (Interceptor)

Adds the Authorization header with the authentication token to all HTTP(S) requests, only if there is an authenticated user.

AckLoginForm (Component)

Displays the standard login form and manage users' login.

Selector

ack-login-form

Input

  • title (string): title for the login form. Defaults to an empty string.
  • email (AckFormField): configuration object for the e-mail field.
  • password (AckFormField): configuration object for the password field.
  • loginButton (string): label for the login button. Defaults to Login.

Events

  • authenticated (string): emitted when the user successfully logs in. It holds the generated token returned by the server.
  • error (AckAuthError): emitted when either a server error or an authentication error occurs.

Example

/**
 * 1. Import the module and all classes you need in your main module (usually app.module.ts).
 */

import { AckAuthModule, AckAuthConfig, AckAuthInterceptor } from '@acknow-srl/auth';

/**
 * 2. Add the module to your app imports and configure it.
 *
 * You can also provide the `AckAuthInterceptor` to automatically add the `Authorization` header
 * with the authentication token to all HTTP(S) requests (see the providers section below).
 */

 import { HTTP_INTERCEPTORS } from '@angular/common/http';

 const conf: AckAuthConfig = {
     server: 'http://my-graphql-server-url',

     // Set a different cookie name if SSL is active to prevent attacks.
     cookie: (location.protocol==='https')? 'secure_auth_cookie' : 'auth_cookie';
 };

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckAuthModule.forRoot(conf),
    ...
  ],
  providers: [
      {provide: HTTP_INTERCEPTORS, useClass: AckAuthInterceptor, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. You can use the AckAuth service in your components, services and/or guards.
 *
 * In this example, we implement an authentication guard to redirect unauthorized users to the login page.
 */

import { Injectable } from '@angular/core';

import { Router, CanActivate } from '@angular/router';

import { AckAuth } from '@acknow-srl/auth';

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private Router: Router, private AckAuth: AckAuth) {
  }

  canActivate() {

    // User is logged in: return true.
    if (this.AckAuth.authenticated()) return true;

    // User is not logged in: redirect to the login page.
    this.Router.navigate(['/login']);
    return false;
    
  }

}