### Run Standalone Example with Node.js

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-par/node-oidc-provider-docs/readme.md

Execute a standalone example script using Node.js. Ensure Node.js is installed and the script path is correct.

```bash
node ./example/standalone.js
```

--------------------------------

### Start Development Server

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/README.md

Starts a local development server with live reloading.

```console
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/README.md

Run this command to install the project dependencies.

```console
yarn install
```

--------------------------------

### Install angular-auth-oidc-client with npm

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/intro.md

Install the library using npm, yarn, or pnpm in your project's root directory.

```npm2yarn
npm install angular-auth-oidc-client
```

--------------------------------

### Install angular-auth-oidc-client via Yarn

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/README.md

Install the library using Yarn. Navigate to your project's root directory before running this command.

```shell
yarn add angular-auth-oidc-client
```

--------------------------------

### Install angular-auth-oidc-client with ng add

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/intro.md

Use the Angular schematics to add the library to your project. Follow the wizard prompts for configuration.

```bash
ng add angular-auth-oidc-client
```

--------------------------------

### AuthenticatedResult Interface Example (Multiple Configs)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Illustrates the structure of the AuthenticatedResult object when using multiple authentication configurations.

```json
{
  "isAuthenticated": false,
  "allConfigsAuthenticated": [
    { "configId": "configId1", "isAuthenticated": true },
    { "configId": "configId2", "isAuthenticated": false }
  ]
}
```

--------------------------------

### Configure Nginx CSP header

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/deploy-to-different-domains.md

Example configuration for adding the CSP header within an Nginx server block.

```javascript
http {
  server {
    ...
    add_header Content-Security-Policy "script-src 'self' 'unsafe-inline';style-src 'self' 'unsafe-inline';img-src 'self' data:;font-src 'self';frame-ancestors 'self' https://localhost:44318;block-all-mixed-content";
```

--------------------------------

### Get All Configurations

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieve all configured OpenId configurations, including merged library defaults and user-defined values.

```typescript
const allConfigs = this.oidcSecurityService.getConfigurations();
```

--------------------------------

### AuthenticatedResult Interface Example (Single Config)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Illustrates the structure of the AuthenticatedResult object when using a single authentication configuration.

```json
{
  "isAuthenticated": true,
  "allConfigsAuthenticated": [{ "configId": "configId1", "isAuthenticated": true }]
}
```

--------------------------------

### Manage Test IDP Server Lifecycle

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/integration-tests/test-idp-server/README.md

Use these shell scripts to control the server process. The start script automatically detects an available port and tracks the process ID.

```bash
# Start the server (finds available port, tracks PID)
./start.sh

# Stop the server
./stop.sh

# Restart the server
./restart.sh
```

--------------------------------

### Apply Class-based Guard to Routes

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/guards.md

Configuration example for applying the class-based guard to a specific route.

```typescript
const appRoutes: Routes = [
  {
    path: 'protected',
    component: <yourComponent>,
    canActivate: [AuthorizationGuard]
  },
];
```

--------------------------------

### Apply Functional Guard to Routes

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/guards.md

Configuration example for applying the functional guard to a specific route.

```typescript
const appRoutes: Routes = [
  {
    path: 'protected',
    component: <yourComponent>,
    canActivate: [isAuthenticated]
  },
];
```

--------------------------------

### User Data Example - Multiple Configs

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

This JSON object illustrates the UserDataResult structure for applications using multiple authentication configurations. User data is organized per configuration in the allUserData array, with the top-level userData being null.

```json
{
  "userData": null,
  "allUserData": [
    {
      "configId": "configId1",
      "userData": {
        "sub": "...",
        "preferred_username": "john@doe.org",
        "name": "john@doe.org",
        "email": "john@doe.org",
        "email_verified": false,
        "given_name": "john@doe.org",
        "role": "user",
        "amr": "pwd"
      }
    },
    {
      "configId": "configId2",
      "userData": {
        "sub": "...",
        "preferred_username": "john@doe.org",
        "name": "john@doe.org",
        "email": "john@doe.org",
        "email_verified": false,
        "given_name": "john@doe.org",
        "role": "user",
        "amr": "pwd"
      }
    }
  ]
}
```

--------------------------------

### Get End Session URL

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Creates the end session URL for custom server logout. Can accept custom parameters and a configuration ID for multi-config setups.

```typescript
this.oidcSecurityService.getEndSessionUrl().subscribe(/* ... */);
```

```typescript
const customParams = {
  some: 'params',
};

this.oidcSecurityService.getEndSessionUrl(customParams, 'configId').subscribe(/* ... */);
```

--------------------------------

### getConfiguration(configId?: string)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Returns an observable of a single configuration. If running with multiple configurations and a `configId` is provided, it returns the specific configuration or `null`. Without a `configId`, it returns the first configuration. For a single configuration setup, it returns that configuration.

```APIDOC
## getConfiguration(configId?: string)

This method returns an observable of one single configuration.
If you are running with multiple configs and pass a `configId`, the configuration or `null` is returned. If you are running with multiple configs and do not pass the `configId`, the first one is returned. If you are running with a single config, then this config is returned.

```ts
// one config or the first one in case of multiple or null
this.oidcSecurityService.getConfiguration().subscribe((config)=> ... );

// one config or null
this.oidcSecurityService.getConfiguration('configId').subscribe((config)=> ... );
```
```

--------------------------------

### GET /health

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/integration-tests/test-idp-server/README.md

Checks the health status of the IDP server.

```APIDOC
## GET /health

### Description
Returns the health status of the server.

### Method
GET

### Endpoint
/health
```

--------------------------------

### Configure node-oidc-provider Clients

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-par/node-oidc-provider-docs/readme.md

Define client configurations for node-oidc-provider, including client ID, grant types, and redirect URIs. This setup is essential for enabling refresh token and authorization code flows.

```javascript
module.exports = {
clients: [
{
    client_id: 'angularPar',
    token_endpoint_auth_method: 'none',
    application_type: 'web',
    grant_types: ['refresh_token', 'authorization_code'],
    response_types: ['code'],
    redirect_uris: ['https://localhost:4207'],
    scope: 'openid offline_access profile email'
},

```

--------------------------------

### Subscribe to User Data Observable

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

This example shows how to subscribe to the userData$ observable to retrieve user information after a successful login. The observable emits UserDataResult objects.

```typescript
this.userData$ = this.oidcSecurityService.userData$;
```

--------------------------------

### Get Payload from ID Token

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the payload from the ID token as an Observable. Use the `encode` parameter if the payload is base64 encoded. Specify `configId` for multi-config setups.

```typescript
this.oidcSecurityService.getPayloadFromIdToken().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getPayloadFromIdToken(true, 'configId').subscribe(/*...*/);
```

--------------------------------

### Get Payload from Access Token

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the payload from the access token as an Observable. Use the `encode` parameter if the payload is base64 encoded. Specify `configId` for multi-config setups.

```typescript
this.oidcSecurityService.getPayloadFromAccessToken().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getPayloadFromAccessToken(true, 'configId').subscribe(/*...*/);
```

--------------------------------

### getUserData

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the user data. It can be used with a specific configuration ID to get data for that config, or without one to get data for the first or only config.

```APIDOC
## getUserData(configId?: string)

### Description
This method returns an observable of the user data. If you are running with multiple configs and pass a `configId`, the user data for this config or `null` is returned. If you are running with multiple configs and do not pass the `configId`, the user data for the first config is returned. If you are running with a single config, the user data for this config is returned.

### Method Signature
`getUserData(configId?: string): Observable<any | null>`

### Parameters
*   **configId** (string) - Optional - The identifier for a specific configuration. If not provided, the data for the first or only configuration is returned.

### Usage Examples
```typescript
// Get user data for the default or first configuration
this.oidcSecurityService.getUserData().subscribe((data) => { /* ... */ });

// Get user data for a specific configuration
this.oidcSecurityService.getUserData('myConfigId').subscribe((data) => { /* ... */ });
```
```

--------------------------------

### checkAuthMultiple

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

The multi-config equivalent of `checkAuth()`. Use this once on every app load if you've registered more than one `provideAuth` configuration. It bootstraps all configurations in a single call and processes the callback, restores stored sessions, and starts silent renewal for each. Returns an `Observable<LoginResponse[]>`.

```APIDOC
## checkAuthMultiple(url?: string)

### Description
Processes authentication for multiple configurations, handling callbacks, restoring sessions, and starting silent renewal for each registered config. Returns an Observable of an array of LoginResponse objects, one for each config.

### Method Signature
`checkAuthMultiple(url?: string): Observable<LoginResponse[]>`

### Parameters
#### Optional Parameters
- **url** (string) - The URL to check authentication against. Useful for mobile or desktop cases where the browser's address bar might not be directly accessible.

### Return Value
- `Observable<LoginResponse[]>`: An observable that emits an array of `LoginResponse` objects, each representing the authentication status for a specific configuration.

### LoginResponse Structure
```json
{
  "isAuthenticated": boolean,
  "userData": any,
  "accessToken": string,
  "idToken": string,
  "configId": string,
  "errorMessage"?: string
}
```

### Usage Example
```typescript
this.oidcSecurityService.checkAuthMultiple().subscribe((responses: LoginResponse[]) => {
  // ...use data
});

const url = '...';
this.oidcSecurityService.checkAuthMultiple(url).subscribe((responses: LoginResponse[]) => {
  // ...use data
});
```
```

--------------------------------

### Custom Popup Login Page HTML

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

An HTML example for a custom popup login page. It uses `window.opener.postMessage` to send the authentication result URL back to the opener window.

```html
<html>
  <head>
    <script>
      function sendMessage() {
        // post url containing oidc response (redirected from OP)
        const urlWithOidcResp = window.location.href;
        window.opener.postMessage(urlWithOidcResp, window.opener.location.href);
      }
    </script>
  </head>
  <body onload="sendMessage()">
    Transmitting authentication result ... (this popup will be closed
    automatically).
  </body>
</html>
```

--------------------------------

### User Data Example - Single Config

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

This JSON object represents the structure of the UserDataResult when the application is configured with a single authentication configuration. It includes user data directly and within the allUserData array.

```json
{
  "userData": {
    "sub": "...",
    "preferred_username": "john@doe.org",
    "name": "john@doe.org",
    "email": "john@doe.org",
    "email_verified": false,
    "given_name": "john@doe.org",
    "role": "user",
    "amr": "pwd"
  },
  "allUserData": [
    {
      "configId": "configId",
      "userData": {
        "sub": "...",
        "preferred_username": "john@doe.org",
        "name": "john@doe.org",
        "email": "john@doe.org",
        "email_verified": false,
        "given_name": "john@doe.org",
        "role": "user",
        "amr": "pwd"
      }
    }
  ]
}
```

--------------------------------

### getIdToken

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the ID token for the current login scenario. Supports specifying a configuration ID for multi-configuration setups.

```APIDOC
## getIdToken

### Description
Returns the id token for your login scenario as an `Observable<string>`.
If you are running with multiple configs and pass the `configId` the id token for this config is returned. If you are running with multiple configs and do not pass the `configId` the id token for the first config is returned. If you are running with a single config the id token for this config returned.

### Method Signature
`getIdToken(configId?: string): Observable<string>`

### Parameters
* **configId** (string) - Optional - The identifier for a specific configuration when using multiple configurations.

### Usage Examples
```ts
this.oidcSecurityService.getIdToken().subscribe(/*...*/);
this.oidcSecurityService.getIdToken('configId').subscribe(/*...*/);
```
```

--------------------------------

### Get Access Token (Default Config)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the access token for the default login configuration. This method returns an Observable<string>.

```typescript
this.oidcSecurityService.getAccessToken().subscribe(/*...*/);
```

--------------------------------

### Get Authenticated Status Signal

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Access the `authenticated` signal to get the current authentication status, including whether the user is authenticated and if all configurations are authenticated.

```typescript
authenticated = this.oidcSecurityService.authenticated;

console.log(authenticated().isAuthenticated);
console.log(authenticated().allConfigsAuthenticated);
```

--------------------------------

### Logout with Custom Parameters

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Allows customization of the logout request by providing `LogoutAuthOptions`, including custom parameters like `logout_hint`. This example demonstrates setting custom parameters for the OIDC Provider.

```typescript
logout() {
  const logoutAuthOptions: LogoutAuthOptions = {
    customParams: {
      logout_hint: 'some-logout-hint',
      /* other params */
    }
  };

  // Use an empty string for the configId if this is not a multiple client
  // subscribe to the result if you expect the function to return.
  // => .subscribe((result) => console.log(result));
  this.oidcSecurityService.logoff('configId', logoutAuthOptions);
}
```

--------------------------------

### Configure AuthModule with OIDC Settings

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/README.md

Import the AuthModule and configure it with your OIDC provider details. Ensure to set the correct authority, redirect URIs, client ID, and scopes. This setup is crucial for the library's core functionality.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  AuthModule,
  LogLevel
} from 'angular-auth-oidc-client';
// ...

@NgModule({
  // ...
  imports: [
    // ...
    AuthModule.forRoot({
      config: {
        authority: '<your authority address here>',
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: '<your clientId>',
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
      },
    }),
  ],
  // ...
})
export class AppModule {}
```

--------------------------------

### Retrieve Access Token

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/using-access-tokens.md

Use getAccessToken to retrieve the current access token. Supports optional configuration ID for multi-config setups.

```typescript
this.oidcSecurityService.getAccessToken().subscribe(at => ...);
```

```typescript
this.oidcSecurityService.getAccessToken('configId').subscribe(at => ...);
```

--------------------------------

### Get Access Token (Specific Config)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the access token for a specific login configuration identified by configId. This method returns an Observable<string>.

```typescript
this.oidcSecurityService.getAccessToken('configId').subscribe(/*...*/);
```

--------------------------------

### Get Authorize URL

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Generates the authorize URL used internally for authentication. Supports custom parameters and a configuration ID for specific configurations.

```typescript
const authorizeUrl = this.oidcSecurityService.getAuthorizeUrl();
```

```typescript
const customParams = {
  some: 'params',
};

const authorizeUrl = this.oidcSecurityService.getAuthorizeUrl(customParams, 'configId');
```

--------------------------------

### getAuthenticationResult

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the authentication result object if present for the sign-in process. Supports specifying a configuration ID for multi-configuration setups.

```APIDOC
## getAuthenticationResult

### Description
Returns the authentication result as an `Observable`, if present, for the sign-in. The `configId` parameter is used to define which configuration to use. This is only required when using multiple configurations. If not passed, the first config will be taken. An object with the authentication result is returned.

### Method Signature
`getAuthenticationResult(configId?: string): Observable<any>`

### Parameters
* **configId** (string) - Optional - The identifier for a specific configuration when using multiple configurations.

### Usage Examples
```ts
this.oidcSecurityService.getAuthenticationResult().subscribe(/*...*/);
this.oidcSecurityService.getAuthenticationResult('configId').subscribe(/*...*/);
```
```

--------------------------------

### Get Single Configuration

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieve a single OpenId configuration. Returns the first configuration if no configId is provided for multiple configurations, or null if the configId is not found.

```typescript
// one config or the first one in case of multiple or null
this.oidcSecurityService.getConfiguration().subscribe((config)=> ... );
```

```typescript
// one config or null
this.oidcSecurityService.getConfiguration('configId').subscribe((config)=> ... );
```

--------------------------------

### checkAuth

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Checks the authentication status. This method should be called once on application load to process callbacks, restore sessions, and start token renewal.

```APIDOC
## checkAuth(url?: string, configId?: string)

### Description
Call this once on every app load (typically from your root component's `ngOnInit`). Without it, the library never bootstraps and the auth state stays uninitialised. `checkAuth()` processes the callback if the current URL contains an auth response, restores an existing session from storage, and starts silent token renewal and periodic token-validity checks if configured. It returns an `Observable<LoginResponse>` describing the result.

### Method Signature
`checkAuth(url?: string, configId?: string): Observable<LoginResponse>`

### Parameters
*   **url** (string) - Optional - Overrides the URL the library reads the callback from. Useful for non-browser environments.
*   **configId** (string) - Optional - Targets a specific configuration. If not provided, the default or first configuration is used.

### Response Structure (`LoginResponse`)
```typescript
{
  isAuthenticated: boolean;
  userData: any;
  accessToken: string;
  idToken: string;
  configId: string;
  errorMessage?: string;
}
```

### Usage Examples
```typescript
// Basic checkAuth call
this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
  // ...use data
});

// checkAuth with custom URL and configId
const customUrl = '...';
const specificConfigId = '...';
this.oidcSecurityService.checkAuth(customUrl, specificConfigId).subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
  // ...use data
});
```

### Notes
*   `checkAuth()` only bootstraps a single config. For multiple configs, use `checkAuthMultiple()`.
*   To detect a server-side session at the identity provider (SSO case), use `checkAuthIncludingServer()`.
*   `checkAuth()` does not redirect the user. Use `authorize()` to start a new sign-in flow.
```

--------------------------------

### Logout with POST Request

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Configures the logout request to use the HTTP POST method instead of the default GET. Custom parameters can still be included.

```typescript
logout() {
    // logoffMethod` - Which can be `GET` or `POST
    const logoutAuthOptions: LogoutAuthOptions = {
      customParams: {
        logout_hint: 'some-logout-hint',
      },
      logoffMethod: 'POST',
    };

    this.oidcSecurityService.logoff('', logoutAuthOptions)
      .subscribe((result) => console.log(result));
}
```

--------------------------------

### getRefreshToken

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the refresh token if available for the current login scenario. Supports specifying a configuration ID for multi-configuration setups.

```APIDOC
## getRefreshToken

### Description
Returns the refresh token as an `Observable<string>` for your login scenario if there is one.
If you are running with multiple configs and pass a `configId`, the refresh token for this config is returned. If you are running with multiple configs and do not pass the `configId`, the refresh token for the first config is returned. If you are running with a single config, the refresh token for this config is returned.

### Method Signature
`getRefreshToken(configId?: string): Observable<string>`

### Parameters
* **configId** (string) - Optional - The identifier for a specific configuration when using multiple configurations.

### Usage Examples
```ts
this.oidcSecurityService.getRefreshToken().subscribe(/*...*/);
this.oidcSecurityService.getRefreshToken('configId').subscribe(/*...*/);
```
```

--------------------------------

### Accessing IsAuthenticated Observable

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Shows how to subscribe to the isAuthenticated$ observable to get authentication status. This observable returns an AuthenticatedResult object.

```typescript
this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
```

--------------------------------

### Get Authentication Result

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the authentication result as an Observable. Use the optional configId parameter to specify which configuration to use when multiple configurations are present.

```typescript
this.oidcSecurityService.getAuthenticationResult().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getAuthenticationResult('configId').subscribe(/*...*/);
```

--------------------------------

### Get Refresh Token

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the refresh token as an Observable. Use the optional configId parameter to specify which configuration to use when multiple configurations are present.

```typescript
this.oidcSecurityService.getRefreshToken().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getRefreshToken('configId').subscribe(/*...*/);
```

--------------------------------

### Manual OAuth Callback Check in AppComponent

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

If `withAppInitializerAuthCheck` is omitted, manually call `OidcSecurityService.checkAuth()` in your `AppComponent`'s `ngOnInit` to handle OAuth callback state. This example shows how to subscribe to the result and log authentication status and the access token.

```typescript
@Component()
export class AppComponent implements OnInit {
  private readonly oidcSecurityService = inject(OidcSecurityService);

  ngOnInit(): void {
    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, accessToken }) => {
      console.log('app authenticated', isAuthenticated);
      console.log(`Current access token is '${accessToken}'`);
    });
  }
}
```

--------------------------------

### Set State for Authorize Request

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Sets a custom state value for the authorize request, useful when `autoCleanStateAfterAuthentication` is false. Specify `configId` for multi-config setups.

```typescript
this.oidcSecurityService.setState('some-state').subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.setState('some-state', 'configId').subscribe(/*...*/);
```

--------------------------------

### Provide Static Configuration

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

Configure the library statically by passing a configuration object to the `provideAuth` function. This is the most common way to set up the client.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: {
        /* Your config here */
      },
    }),
  ],
};
```

--------------------------------

### Get User Data with Angular Auth OIDC Client

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves user data. Use with a configId for specific configurations or without for the first/single configuration.

```typescript
this.oidcSecurityService.getUserData().subscribe((data)=> ... );
```

```typescript
this.oidcSecurityService.getUserData('configId').subscribe((data)=> ... );
```

--------------------------------

### Get ID Token

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieves the ID token as an Observable. Use the optional configId parameter to specify which configuration to use when multiple configurations are present.

```typescript
this.oidcSecurityService.getIdToken().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getIdToken('configId').subscribe(/*...*/);
```

--------------------------------

### Subscribe to Public Events

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-events.md

Inject the PublicEventsService and subscribe to specific events using RxJS operators. This example shows how to log a message when the CheckSessionReceived event occurs. Ensure RxJS 'filter' is imported.

```typescript
import { PublicEventsService } from 'angular-auth-oidc-client';

private readonly eventService = inject(PublicEventsService);

ngOnInit() {
  this.eventService
    .registerForEvents()
    .pipe(filter((notification) => notification.type === EventTypes.CheckSessionReceived))
    .subscribe((value) => console.log('CheckSessionChanged with value', value));
}
```

--------------------------------

### stsCallback$

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

The `stsCallback$` observable emits after the library has handled the Security Token Service (STS) callback. This allows for initial setup and custom workflows when the STS redirects back to the application.

```APIDOC
## stsCallback$

The `stsCallback$` observable emits _after_ the library has handled the possible Security Token Service callback. You can perform initial setups and custom workflows inside your application when the Security Token Service redirects you back to your app.

```ts
this.stsCallback$ = this.oidcSecurityService.stsCallback$;
```
```

--------------------------------

### Conditional Rendering Based on Authentication State

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-auto-login-all-routes/src/app/navigation/navigation.component.html

These examples demonstrate how to conditionally render UI elements or routes based on the user's authentication status. Use these within your Angular templates to control access and display.

```html
@if (isAuthenticated) { home }
```

```html
@if (isAuthenticated) { protected }
```

```html
@if (isAuthenticated) { forbidden }
```

```html
@if (isAuthenticated) { lazy customers }
```

```html
@if (!isAuthenticated) { Route to 'protected' Route & Auto Login }
```

```html
@if (isAuthenticated) { Logout }
```

--------------------------------

### Get State Observable

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Retrieve the state value used for the authorize request as an Observable. If multiple configurations are used, a `configId` can be provided to target a specific configuration.

```typescript
this.oidcSecurityService.getState().subscribe(/*...*/);
```

```typescript
this.oidcSecurityService.getState('configId').subscribe(/*...*/);
```

--------------------------------

### Display User Data and Configurations

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-multi-AAD/src/app/home/home.component.html

Uses the async pipe to display user data and iterates through OIDC configurations to show their details.

```html
UserData

{{ userData$ | async | json }}

@for (config of configurations; track config) {

### {{ config.configId }}

Login with {{ config.configId }} Logout Refresh session

{{ config | json }}

}
```

--------------------------------

### Conditional Rendering for Authenticated Users in Angular

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-refresh-tokens/src/app/home/home.component.html

Use the @if directive to conditionally render content when the user is authenticated. This example shows logout buttons and user data display.

```html
@if (isAuthenticated) {

Logout Logout and revoke tokens Revoke access token Revoke refresh token Refresh session

* * *

  
Is Authenticated: {{ isAuthenticated }}  
userData

{{ userData$ | async | json }}

  

} @else {
 Login

* * *

}

Configuration loaded:

{{ configuration$ | async | json }}
```

--------------------------------

### Deploy to GitHub Pages

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/README.md

Builds the site and pushes the static content to the gh-pages branch.

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Iterate Through Configurations

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-multi-iframe/src/app/home/home.component.html

Loop through an array of configurations to display details and provide login/logout actions for each. The `track` function is used for efficient list updates.

```html
@for (config of configurations; track config) {

### {{ config.configId }}

Login with {{ config.configId }} Logout

{{ config | json }}

}
```

--------------------------------

### Get Loading State Observable

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Use the `isLoading$` observable to track the authentication loading state. This is useful for preventing race conditions when checking authentication status, especially in auth guards.

```typescript
this.isLoading$ = this.oidcSecurityService.isLoading$;
```

--------------------------------

### Display Configuration Details

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/projects/sample-code-flow-multi-Auth0-ID4-popup/src/app/home/home.component.html

Display configuration details using the json pipe. This is useful for debugging or understanding the current configuration.

```html
{{ configurations[0].configId }}
```

```html
{{ configurations[0] | json }}
```

```html
{{ configurations[1].configId }}
```

```html
{{ configurations[1] | json }}
```

--------------------------------

### getPayloadFromAccessToken

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Returns the payload from the access token as an Observable. This can be used to get claims from the token. The `encode` parameter has to be set to `true` if the payload is base64 encoded. If running with multiple configs, a `configId` can be provided to specify which config's payload to retrieve.

```APIDOC
## getPayloadFromAccessToken(encode = false, configId?: string)

### Description
Returns the payload from the access token as an `Observable`. This can be used to get claims from the token.
If you are running with multiple configs and pass a `configId`, the payload for this config is returned. If you are running with multiple configs and do not pass a `configId`, the payload for the first config is returned. If you are running with a single config, the payload for this config returned.

The `encode` param has to be set to `true` if the payload is base64 encoded.

### Parameters
#### Optional Parameters
- **encode** (boolean) - Optional - Defaults to `false`. Set to `true` if the payload is base64 encoded.
- **configId** (string) - Optional - The identifier for the configuration to use.

### Request Example
```ts
this.oidcSecurityService.getPayloadFromAccessToken().subscribe(/*...*/);
```

```ts
this.oidcSecurityService.getPayloadFromAccessToken(true, 'configId').subscribe(/*...*/);
```
```

--------------------------------

### Get Check Session Changed Observable

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Subscribe to `checkSessionChanged$` to be notified when the check session event from the server indicates a change. For more detailed event information, refer to the public events documentation.

```typescript
this.checkSessionChanged$ = this.oidcSecurityService.checkSessionChanged$;
```

--------------------------------

### Basic Login

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Initiates the login process by redirecting the user to the Security Token Service. Ensure both server and client configurations are valid for successful login.

```typescript
private readonly oidcSecurityService = inject(OidcSecurityService);

// ...
this.oidcSecurityService.authorize();
```

--------------------------------

### Check Authentication Status with Angular Auth OIDC Client

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Call this once on app load to process callbacks, restore sessions, and start silent token renewal. It returns an observable describing the authentication result.

```typescript
this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
  // ...use data
});
```

--------------------------------

### getPayloadFromIdToken

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Returns the payload from the id_token as an Observable. This can be used to get claims from the token. The `encode` parameter has to be set to `true` if the payload is base64 encoded. If running with multiple configs, a `configId` can be provided to specify which config's payload to retrieve.

```APIDOC
## getPayloadFromIdToken(encode = false, configId?: string)

### Description
Returns the payload from the id_token as an `Observable`. This can be used to get claims from the token.
If you are running with multiple configs and pass a `configId`, the payload for this config is returned. If you are running with multiple configs and do not pass a `configId`, the payload for the first config is returned. If you are running with a single config, the payload for this config returned.

The `encode` param has to be set to `true` if the payload is base64 encoded.

### Parameters
#### Optional Parameters
- **encode** (boolean) - Optional - Defaults to `false`. Set to `true` if the payload is base64 encoded.
- **configId** (string) - Optional - The identifier for the configuration to use.

### Request Example
```ts
this.oidcSecurityService.getPayloadFromIdToken().subscribe(/*...*/);
```

```ts
this.oidcSecurityService.getPayloadFromIdToken(true, 'configId').subscribe(/*...*/);
```
```

--------------------------------

### Implement Custom Storage Service

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/custom-storage.md

Create a service implementing AbstractSecurityStorage to define custom read, write, remove, and clear logic.

```ts
import { AbstractSecurityStorage } from 'angular-auth-oidc-client';

@Injectable()
export class MyStorageService implements AbstractSecurityStorage {
  read(key: string): string | null {
    return localStorage.getItem(key);
  }

  write(key: string, value: string): void {
    localStorage.setItem(key, value);
  }

  remove(key: string): void {
    localStorage.removeItem(key);
  }

  clear(): void {
    localStorage.clear();
  }
}
```

--------------------------------

### Build Static Site

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/README.md

Generates static content in the build directory for production hosting.

```console
yarn build
```

--------------------------------

### checkSessionChanged$

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

The `checkSessionChanged$` observable emits values every time the server comes back with a check session and the value `changed`. If you want to get information about when the `CheckSession` Event has been received, please take a look at the [public events](public-events.md).

```APIDOC
## checkSessionChanged$

The `checkSessionChanged$` observable emits values every time the server comes back with a check session and the value `changed`. If you want to get information about when the `CheckSession` Event has been received, please take a look at the [public events](public-events.md).

```ts
this.checkSessionChanged$ = this.oidcSecurityService.checkSessionChanged$;
```
```

--------------------------------

### Check Authentication for Multiple Configurations

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Use this method on app load if you have registered more than one `provideAuth` configuration. It bootstraps all of them in a single call and returns an Observable of LoginResponse for each config.

```typescript
this.oidcSecurityService.checkAuthMultiple().subscribe((responses: LoginResponse[]) => {
  // ...use data
});
```

--------------------------------

### Provide Multiple Static Configurations

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

When using multiple authentication configurations, pass an array of configuration objects to `provideAuth`. Each configuration will receive a `configId` automatically if not explicitly set.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: [
        {
          // config1...
        },
        {
          // config2...
        },
        {
          // config3...
        },
        //...
      ],
    }),
  ],
};
```

--------------------------------

### App Initialization Auth Check with provideAuth

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

Use `withAppInitializerAuthCheck` to automatically handle OAuth callbacks during app initialization. This replaces manual calls to `OidcSecurityService.checkAuth()` or `checkAuthMultiple()`. Ensure your configuration object is provided.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth, withAppInitializerAuthCheck } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth(
      {
        config: {
          /* Your config here */
        },
      },
      withAppInitializerAuthCheck()
    ),
  ],
};
```

--------------------------------

### authorizeWithPopUp

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Initiates user login by redirecting to the Security Token Service in a popup window. Allows for specific configuration, custom parameters, and URL handling. Returns an Observable of LoginResponse.

```APIDOC
## authorizeWithPopUp(authOptions?: AuthOptions, popupOptions?: PopupOptions, configId?: string)

### Description
This method must be called when you want to redirect to the Security Token Service in a popup and login your user. This method takes a `configId` as parameter if you want to use a specific config and it also takes `authOptions` adding `customParams` or `redirectUrl` which can change every time you want to login. It also accepts an `urlHandler` which is getting called instead of the redirect. You can pass additional `PopupOptions` to define where and how the popup should open.

### Method
authorizeWithPopUp

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Auth Options (`authOptions`)
- **customParams** (object) - Optional - Allows passing custom parameters to the authentication request.
- **urlHandler** (function) - Optional - A function called instead of the redirect, receiving the URL to open.
- **redirectUrl** (string) - Optional - Specifies a custom URL for redirection after login.

#### Popup Options (`popupOptions`)
- **width** (number) - Optional - Width of the popup window.
- **height** (number) - Optional - Height of the popup window.
- **left** (number) - Optional - Left position of the popup window.
- **top** (number) - Optional - Top position of the popup window.

#### Configuration ID (`configId`)
- **configId** (string) - Optional - Identifier for a specific configuration to use.

### Response
#### Success Response
Returns an Observable of `LoginResponse`:
- **isAuthenticated** (boolean) - Indicates if the user is authenticated.
- **userData** (any) - User-specific data.
- **accessToken** (string) - The access token.
- **idToken** (string) - The ID token.
- **configId** (string) - The configuration ID used.
- **errorMessage** (string) - Optional - An error message if authentication failed.

### Request Example
```ts
this.oidcSecurityService.authorizeWithPopUp().subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
  // ...use data
});
```

```ts
const authOptions = {
  customParams: {
    some: 'params',
  },
  urlHandler: () => {
    /* ... */
  },
  redirectUrl: '/path-to/custom-popup-login-page.html',
};

this.oidcSecurityService
  .authorizeWithPopUp(authOptions, null, 'configId')
  .subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
    // ...use data
  });
```
```

--------------------------------

### Configure OIDC with provideAuth (Standalone)

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/intro.md

Configure the OIDC client using the `provideAuth` function in your application's `appConfig`. Adjust placeholders for your specific environment.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth, LogLevel } from 'angular-auth-oidc-client';
// ...

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: {
        authority: '<your authority address here>',
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: '<your clientId>',
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
      },
    }),
    // ...
  ],
};

```

--------------------------------

### Configure Interceptor in NgModule

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/interceptors.md

Register the `AuthInterceptor` within an `NgModule` using `HTTP_INTERCEPTORS`. This example also shows how to configure `secureRoutes` via `AuthModule.forRoot`.

```ts
import { AuthInterceptor, AuthModule } from 'angular-auth-oidc-client';

@NgModule({
  // ...
  imports: [
    // ...
    AuthModule.forRoot({
      // ...
      secureRoutes: ['https://my-secure-url.com/', 'https://my-second-secure-url.com/'],
    }),
    HttpClientModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    // ...
  ],
})
export class AppModule {}
```

--------------------------------

### Login with ConfigId

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Selects a specific configuration for login by providing a `configId` as the first argument. Useful when managing multiple authentication configurations.

```typescript
login() {
  this.oidcSecurityService.authorize('configId');
}
```

--------------------------------

### getConfigurations()

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Returns all configured OpenId configurations as an `OpenIdConfiguration[]`. The returned configuration includes all user-defined values merged with those created by the library.

```APIDOC
## getConfigurations()

This method returns all configurations you have configured as an `OpenIdConfiguration[]`. The config includes all your values merged with the ones the library created.

```ts
const allConfigs = this.oidcSecurityService.getConfigurations();
```
```

--------------------------------

### Login with AuthOptions

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Provides advanced login options, including custom parameters, a custom URL handler, or overriding the redirect URL. The `configId` can be passed as the first argument if needed.

```typescript
login() {
  const authOptions = {
    customParams: {
      some: 'params',
    },
    urlHandler: () => {
      // ...
    },
    redirectUrl: "/assets/login-popup-page.html"
  };

  const configIdOrNull = // ...

  this.oidcSecurityService.authorize(configIdOrNull, authOptions);
}
```

--------------------------------

### Authorize with PopUp - Basic Usage

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Initiates the authorization process using a pop-up window with default settings. Subscribe to the observable to handle the login response.

```typescript
this.oidcSecurityService.authorizeWithPopUp().subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
  // ...use data
});
```

--------------------------------

### Login with Popup, ConfigId, and Options

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Combines popup authentication with specific configuration selection using `configId` as the last argument, alongside `AuthOptions` and `PopupOptions`.

```typescript
loginWithPopup() {
  const somePopupOptionsOrNull = /* ... */; 

  const authOptionsOrNull = /* ... */

  this.oidcSecurityService.authorizeWithPopUp(authOptions, somePopupOptions, 'configId')
    .subscribe(({ isAuthenticated, userData, accessToken, errorMessage }) => {
    /* ... */
    });
}
```

--------------------------------

### Configure Content-Security-Policy header

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/deploy-to-different-domains.md

Set the CSP header to allow the authority domain for silent renew.

```bash
Content-Security-Policy: script-src 'self' 'unsafe-inline';style-src 'self' 'unsafe-inline';img-src 'self' data:;font-src 'self';frame-ancestors 'self' https://localhost:44318;block-all-mixed-content
```

--------------------------------

### Load Static Configuration from a Service

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

Dynamically load static configuration by providing a factory function to `provideAuth`. This factory uses `StsConfigStaticLoader` to return configuration from a custom service.

```typescript
@Injectable({ providedIn: 'root' })
export class ConfigService {
  getConfig(): OpenIdConfiguration {
    return {
      /* Your config here */
    };
  }
}

const authFactory = (configService: ConfigService) => {
  const config = configService.getConfig();
  return new StsConfigStaticLoader(config);
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      loader: {
        provide: StsConfigLoader,
        useFactory: authFactory,
        deps: [ConfigService],
      },
    }),
  ],
};
```

--------------------------------

### Implement Login, Logout, and Auth Check

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/intro.md

Implement authentication logic in your root component using `OidcSecurityService`. Call `checkAuth()` on initialization and `authorize()`/`logoff()` for user-initiated actions.

```typescript
import { OidcSecurityService } from 'angular-auth-oidc-client';

@Component({ /* ... */ })
export class AppComponent implements OnInit {
  private readonly oidcSecurityService = inject(OidcSecurityService);

  ngOnInit() {
    // Bootstrap on every page load. Handles the IdP callback,
    // restores stored sessions, and starts silent renewal.
    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData}) => /* ... */);
  }

  login() {
    // User clicked sign-in: redirect to the identity provider.
    this.oidcSecurityService.authorize();
  }

  logout() {
    this.oidcSecurityService.logoff().subscribe((result) => console.log(result));
  }
}

```

--------------------------------

### authorize

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/public-api.md

Initiates the sign-in process by redirecting the browser to the identity provider's login page. Supports custom parameters and URL handling for advanced scenarios.

```APIDOC
## authorize(configId?: string, authOptions?: AuthOptions)

### Description
Call this when the user initiates a sign-in — typically from a "Login" button click handler, or when an auth guard determines the user needs to authenticate. It redirects the browser to the identity provider's login page. `authorize()` does not check or restore session state. That's the job of `checkAuth()`, which you call once on app load. This method takes a `configId` if you want to target a specific config and an `authOptions` object with `customParams` or `redirectUrl` for per-call customization. It also accepts a `urlHandler` that is called instead of the redirect (useful if you need to construct the navigation yourself).

### Method Signature
`authorize(configId?: string, authOptions?: AuthOptions): void`

### Parameters
#### configId (string, Optional)
An identifier for a specific configuration if multiple configurations are in use.

#### authOptions (AuthOptions, Optional)
An object containing options for the authorization request.

##### AuthOptions Interface
```ts
export interface AuthOptions {
  customParams?: { [key: string]: string | number | boolean };
  urlHandler?(url: string): any;
  redirectUrl?: string;
}
```

### Usage Example
```ts
this.oidcSecurityService.authorize();

const authOptions = {
  customParams: {
    some: 'params',
  },
  urlHandler: () => {
    /* ... */
  },
};
this.oidcSecurityService.authorize('configId', authOptions);
```
```

--------------------------------

### Login using Popup

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/login-logout.md

Initiates authentication via a popup window, preventing the main application from unloading. The result is returned via a subscription.

```typescript
loginWithPopup() {
  this.oidcSecurityService.authorizeWithPopUp()
          .subscribe(({ isAuthenticated, userData, accessToken, errorMessage }) => {
    /* use data */
  });
}
```

--------------------------------

### Use Local Storage Instead of Session Storage

Source: https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/site/angular-auth-oidc-client/docs/documentation/configuration.md

To use local storage instead of the default session storage, provide a custom implementation of `AbstractSecurityStorage` using `DefaultLocalStorageService`.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth, DefaultLocalStorageService, AbstractSecurityStorage } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: {
        /* Your config here */
      },
    }),
    {
      provide: AbstractSecurityStorage,
      useClass: DefaultLocalStorageService,
    },
  ],
};

```