open-index/open-npm huggingface dataset:
npm package: @openiap/core-web
Description: ```bash npm run dev
Latest version: 3.0.8

# core-web v3 using svelte

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @openiap/ng-openflow-auth
Description: 1) Install NgOpenflowAuth angular-oauth2-oidc and @openiap/openflow-api
Latest version: 0.0.13

# NgOpenflowAuth

1) Install NgOpenflowAuth angular-oauth2-oidc and @openiap/openflow-api

``` npm i @openiap/ng-openflow-auth angular-oauth2-oidc @openiap/openflow-api``` 

2) Add Configuration file for oauth2-oidc and NgOpenflowAuth 
Under src/app add a new file called authCodeFlowConfig.ts 

```javascript
import { AuthConfig } from 'angular-oauth2-oidc';
const domain:string = "app.openiap.io";
export const api_wsurl: string = "wss://" + domain;
export const authCodeFlowConfig: AuthConfig = {
    issuer: "https://" + domain + "/oidc",
    redirectUri: window.location.origin,
    responseType: 'code',
    clientId: 'myngapp',
    scope: 'openid profile email'
};
```

3) Tell angular to ignore the npm modules used by @openiap/openflow-api
Open package.json and add a browser section

```json
  "browser": {
    "fs": false,
    "path": false,
    "crypto": false
  },
```

4) Register angular-oauth2-oidc and HttpClientModule
open app.module.ts and add

```javascript
// Add imports
import { OAuthModule } from 'angular-oauth2-oidc';
import { api_wsurl, authCodeFlowConfig } from './authCodeFlowConfig';
import { HttpClientModule } from '@angular/common/http';
// Add to @NgModule
@NgModule({
	declarations: [],
	imports: [
        HttpClientModule,
		OAuthModule.forRoot()
	],
	providers: [
        {provide: 'apiwsurl', useValue: api_wsurl},
        {provide: 'authCodeFlowConfig', useValue: authCodeFlowConfig}
	],
	bootstrap: []
})


```

5) In any component you want to check if the user has been signed in, get data.
Add this to the component.ts file

```javascript
// Add imports
import { NgOpenflowAuthService } from '@openiap/ng-openflow-auth';

export class UsersComponent implements OnInit {
    // Add NgOpenflowAuthService as an injected service in the constructor
    constructor(
        public openflowAuthService: NgOpenflowAuthService
      ) { }

    // Create place holder for users
    public users: any[] = [];
    // Then in add a callback doing the sigin event, 
    ngOnInit(): void {
        this.openflowAuthService.onSignedin(async user=> {
            console.log("Signed in as " + user.name);
            try {
                // Get list of all users in openflow
                this.users = await NoderedUtil.Query("users", {"_type": "user"}, null, null, 100, 0, null as any);
            } catch (error) {
                console.error(error);
            }
        });
    }
}
```

6) And to allow the user to sign in/sing out and see the list add  this to the html page

```html
<button *ngIf="!openflowAuthService.isSignedIn" (click)="openflowAuthService.Login()">Login</button>
<button *ngIf="openflowAuthService.isSignedIn" (click)="openflowAuthService.Logout()">Logout</button>
<div *ngIf="openflowAuthService.isSignedIn">
    <h2>Users</h2>
    <li *ngFor="let item of users">
        <span class="badge">{{item._type}}</span>: {{item.name}}
    </li>
</div>
```