# @intrada-dashboard/ng-id

> A set of Angular components to integrate with IntradaId

Latest version **0.2.4** (published 2020-12-21) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @intrada-dashboard/ng-id
pnpm add @intrada-dashboard/ng-id
yarn add @intrada-dashboard/ng-id
bun add @intrada-dashboard/ng-id
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2020-12-21 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 582.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jord Nijhuis |
| Maintainers | jord.nijhuis |

## Links

- npm: https://www.npmjs.com/package/@intrada-dashboard/ng-id
- npm.io page: https://npm.io/package/@intrada-dashboard/ng-id

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.2.4 (latest) — 2020-12-21
- 0.2.3 — 2020-12-21
- 0.2.2 — 2020-12-11
- 0.2.1 — 2020-11-24
- 0.2.0 — 2020-11-17
- 0.1.0 — 2020-08-10
- 0.0.2 — 2020-08-05
- 0.0.1 — 2020-03-31

## README

# NG-Id - Angular IntradaID Integration

This package provides Angular components to integrate with IntradaID. This package is for internal use only and should
not be used by non-Q-FREE employees.

## Installation
Run `npm i @intrada-dashboard/ng-id` to install the latest version.

## How to Use

### Registering the module

To register the NgId module, add the following code to your own module:

```typescript
import {NgModule} from '@angular/core';
import {NgIdModule} from '@intrada-dashboard/ng-id';

@NgModule({
    imports: [
        NgIdModule.forRoot({
            clientId: 'The IntradaId ClientID',
            scopes: ['DEMO_UPLOAD', 'CLIENT_VIEW'],
            // If an HTTP request starts with any of these URLs, the current token will be added (if present)
            tokenURLs: [
                'https://id.q-free.nl/api', // IntradaID - Do not remove this
                `${window.location.protocol}//${window.location.host}/api` // The current API
            ],
            routes: {
                default: '/',
                login: 'login',
                loginCheck: 'login/check',
                errors: {
                    403: '403'
                }
            }
        })
    ],
})
export class AppModule {
}

```

### Creating the login routes
#### The login route
The login route is the route that the user is redirected to if authentication is required. To implement this route, 
create your own component and make sure that `<id-login></id-login>` is present in the template. This element will show 
a button that the user can use to start the authentication process.

Make sure to route this component to the path configured (by default this is `login`).

#### The login check route
When the authentication process is started, a new window will  to IntradaID. The result of the authentication process 
will be retrieved in this window on the login check route. The component that handles this route should have 
`<id-login-check></id-login-check>` in its template.

By default the path for this route is `login/check`.

### Retrieving a token
After authentication, the token is stored in the `AuthenticationService`. To interact with the service, pass
it along through dependency injection: 

```typescript
import {Component} from '@angular/core';
import {AuthenticationService, Token} from '@intrada-dashboard/ng-id';

@Component()
export class AppComponent {
    constructor(
        readonly authenticationService: AuthenticationService,
    ) {
        // Retrieve the token - this will start the authentication process if no usable token is present 
        authenticationService.token.subscribe(token => console.log("Got a token!", token));

        // Retrieve an update when the token has changed.
        authenticationService.tokenChangeEvent.subscribe((token: Token|null) => console.log('Token changed!', token));

        // Redirect the user to the login page. This stores the current route and will return the user to the current
        // page if the authentication was successful.
        authenticationService.redirectToLogin();
   
        // This logs the user out and redirects him to the login page
        authenticationService.logout();
    }
}
```

### Using the Guard Service
If you want to make sure users can only access a certain route if they are authenticated you can use the authentication
guard. If a user is unauthenticated, the guard will redirect them to the login page. If the user is authenticated, but
he does not have the right scopes, the user will be redirected to the 403 error page. As such, make sure to create
the 403 route.

To make sure that the user is authenticated, add the `canActivate` segment to your route:
```typescript
import { Routes } from '@angular/router';
import {AuthenticationGuardService} from '@intrada-dashboard/ng-id';

const appRoutes: Routes = [
    {
        path: 'user',
        component: UserComponent,
        canActivate: [AuthenticationGuardService]
    }
]
```

If you want to make sure that a user has the right scopes, you can set the `scopes` inside the `data` property:
```typescript
import { Routes } from '@angular/router';
import {AuthenticationGuardService} from '@intrada-dashboard/ng-id';

const appRoutes: Routes = [
    {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthenticationGuardService],
        data: {
            scopes: ['ADMIN']
        }
    }
]
```

---
_Source: https://npm.io/package/@intrada-dashboard/ng-id · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._