Knora ui module: authentication


9.5.02 years ago3 years agoMinified + gzip package size for @knora/authentication in KB


Knora-ui authentication module

npm (scoped)

This module is part of Knora-ui modules, developed by the team at the Data and Service Center for Humanities DaSCH.

The authentication module contains the login form (for standalone usage) or a complete login- / logout-button environment incl. the login form.


For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using Knora-ui authentication.


You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.


$ yarn add @knora/authentication


$ npm install @knora/authentication


This module has the following package dependencies, which you also have to install.

  • @angular/common@8.0.3
  • @angular/core@8.0.3
  • @angular/animations@8.0.3
  • @angular/cdk@8.1.4
  • @angular/material@8.1.4
  • @knora/action@9.5.0
  • @knora/core@9.5.0
  • moment@2.22.2

Required version of Knora: 10.0.0


In your AppModule you have to define the following providers:

import { ErrorInterceptor, JwtInterceptor, KuiAuthenticationModule } from '@knora/authentication';

    declarations: [
    imports: [
            name: 'Knora-ui Demo App',
            api: environment.api,
            media: environment.media,
            app: environment.app,
    providers: [
        {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}
export class AppModule { }

Usage of KuiAuthGuard

The @knora/authentication module contains a guard class which can be used in a restricted app component and will redirect a guest user to the login page. It can be used in the app routing as follow:

import { AuthGuard } from '@knora/authentication';

const appRoutes: Routes = [
        path: '',
        component: AppComponent,
        canActivate: [AuthGuard]
        path: 'login',
        component: LoginFormComponent

Usage of kui-login-form

The LoginFormComponent in the app needs in principle only the <kui-login-form></kui-login-form> tag. Additional it's also possible to define e navigation route, where the user will be redirected after successful login: <kui-login-form [navigate]="'/dashboard'"></kui-login-form>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.