How to use angular-oauth2-oidc - 10 common examples

// console.log("===== setting kubernetes token: " + (token ? "token" : "no token") + " for " + url);
        headers['Authorization'] = `Bearer ${onLogin.token}`;
        return {
          params,
          headers,
          element,
        };
      },
    );
  });
  return config;
}

@NgModule({
  imports: [OAuthModule.forRoot()],
  providers: [
    {
      provide: KUBERNETES_RESTANGULAR,
      useFactory: KubernetesRestangularFactory,
      deps: [Restangular, OAuthService, OnLogin],
    },
  ],
})
export class KubernetesRestangularModule {}

private configureWithNewConfigApi() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
    this.oauthService.setupAutomaticSilentRefresh();

    this.oauthService.events.subscribe(e => {
      console.debug('oauth/oidc event', e);
    });

    this.oauthService.events.filter(e => e.type === 'session_terminated').subscribe(e => {
      console.debug('Your session has been terminated!');
    });

    this.oauthService.events.filter(e => e.type === 'token_received').subscribe(e => {
      // this.oauthService.loadUserProfile();
    });

  }

private configureWithNewConfigApi() {

      this.oauthService.configure(authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
      this.oauthService.loadDiscoveryDocumentAndTryLogin();

      // Optional
      this.oauthService.setupAutomaticSilentRefresh();

      this.oauthService.events.subscribe(e => {
        console.debug('oauth/oidc event', e);
      });

      this.oauthService.events.filter(e => e.type === 'session_terminated').subscribe(e => {
        console.debug('Your session has been terminated!');
      });
      
      this.oauthService.events.filter(e => e.type === 'token_received').subscribe(e => {
        // this.oauthService.loadUserProfile();
      });

private configureImplicitFlow() {
    this.oauthService.configure(authConfig);
    // this.oauthService.setStorage(localStorage);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();


    // Optional
    this.oauthService.setupAutomaticSilentRefresh();

    // Display all events
    this.oauthService.events.subscribe(e => {
      // tslint:disable-next-line:no-console
      console.debug('oauth/oidc event', e);
    });

    this.oauthService.events
      .pipe(filter(e => e.type === 'session_terminated'))
      .subscribe(e => {
        // tslint:disable-next-line:no-console

this.oauthService.redirectUri = window.location.origin + "/index.html";

    // URL of the SPA to redirect the user after silent refresh
    this.oauthService.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";

    // The SPA's id. The SPA is registerd with this id at the auth-server
    this.oauthService.clientId = "spa-demo";

    // set the scope for the permissions the client should request
    // The first three are defined by OIDC. The 4th is a usecase-specific one
    this.oauthService.scope = "openid profile email voucher";

    // Url of the Identity Provider
    this.oauthService.issuer = 'https://steyer-identity-server.azurewebsites.net/identity';

    this.oauthService.tokenValidationHandler = new JwksValidationHandler();

    this.oauthService.events.subscribe(e => {
      console.debug('oauth/oidc event', e);
    });

    // Load Discovery Document and then try to login the user
    this.oauthService.loadDiscoveryDocument().then((doc) => {
      this.oauthService.tryLogin();
    });

    this
      .oauthService
      .events
      .filter(e => e.type == 'token_expires')
      .subscribe(e => {
        console.debug('received token_expires event', e);

// URL of the SPA to redirect the user after silent refresh
    this.oauthService.silentRefreshRedirectUri =
      window.location.origin + '/silent-refresh.html';

    // The SPA's id. The SPA is registerd with this id at the auth-server
    this.oauthService.clientId = 'spa-demo';

    // set the scope for the permissions the client should request
    // The first three are defined by OIDC. The 4th is a usecase-specific one
    this.oauthService.scope = 'openid profile email voucher';

    // Url of the Identity Provider
    this.oauthService.issuer =
      'https://steyer-identity-server.azurewebsites.net/identity';

    this.oauthService.tokenValidationHandler = new NullValidationHandler();

    this.oauthService.events.subscribe(e => {
      // tslint:disable-next-line:no-console
      console.debug('oauth/oidc event', e);
    });

    // Load Discovery Document and then try to login the user
    this.oauthService.loadDiscoveryDocument().then(doc => {
      this.oauthService.tryLogin();
    });

    this.oauthService.events
      .pipe(filter(e => e.type === 'token_expires'))
      .subscribe(e => {
        // tslint:disable-next-line:no-console
        console.debug('received token_expires event', e);

MatInputModule,
  MatFormFieldModule,
  MatTooltipModule,
  MatToolbarModule,
];

@NgModule({
  imports: [
    CommonModule,
    NgxsModule.forFeature([AuthState]),
    RouterModule,
    [...matModules],
    FlexLayoutModule,
    ReactiveFormsModule,
    FontAwesomeModule,
    OAuthModule.forRoot({
      resourceServer: {
        allowedUrls: [environment.API_BASE_URL, environment.DOCS_BASE_URL],
        sendAccessToken: true,
      },
    }),
  ],
  declarations: [LoginComponent],
  entryComponents: [LoginComponent],
  providers: [
    ROPCService,
    AuthService,
    AuthGuard,
    { provide: ValidationHandler, useClass: JwksValidationHandler },
    // NOTE: for CodeFlow use NullValidationHandler
    // { provide: ValidationHandler, useClass: NullValidationHandler },
  ],

scope: 'openid profile email', // offline_access
  responseType: 'code',
  oidc: true,
};

@NgModule({
  declarations: [
    AppComponent,
    SignedoutComponent,
  ],
  imports: [
    AppRoutingModule,
    CommonModule,
    BrowserModule,
    OverlayModule,
    OAuthModule.forRoot({
      resourceServer: {
        allowedUrls: ['https://test.api.zitadel.caos.ch/caos.zitadel.auth.api.v1.AuthService', 'https://test.api.zitadel.caos.ch/oauth/v2/userinfo', 'https://test.api.zitadel.caos.ch/caos.zitadel.management.api.v1.ManagementService/', 'https://preview.api.zitadel.caos.ch'],
        sendAccessToken: true,
      },
    }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader,
      },
    }),
    MatNativeDateModule,
    QuicklinkModule,
    AccountsCardModule,
    HasRoleModule,
    BrowserAnimationsModule,

MatButtonModule,
    MatCheckboxModule,
    MatSelectModule,
    MatCardModule,
    MatExpansionModule,
    MatInputModule,
    MatPaginatorModule,
    MatTableModule,
    MatGridListModule,
    MatMenuModule,
    MatIconModule,
    BrowserModule,
    // note to self: import HttpClientModule after BrowserModule, otherwise
    // there is trouble.
    HttpClientModule,
    OAuthModule.forRoot(),
  ],
  providers: [
    {provide: ErrorHandler, useClass: SentryErrorHandler},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import {AppRouterModule} from './app.routes';
import {BASE_URL} from './app.tokens';
import {FlightHistoryComponent} from './flight-history/flight-history.component';
import {HomeComponent} from './home/home.component';
import {PasswordFlowLoginComponent} from './password-flow-login/password-flow-login.component';
import {SharedModule} from './shared/shared.module';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        SharedModule.forRoot(),
        AppRouterModule,
        HttpClientModule,
        OAuthModule.forRoot(
            {
            resourceServer: {
                allowedUrls: ['http://www.angular.at/api'],
                sendAccessToken: true
            }
        }
    )
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        FlightHistoryComponent,
        PasswordFlowLoginComponent
    ],
    providers: [
        // {provide: AuthConfig, useValue: authConfig },