angular-oauth2-oidc

What is angular-oauth2-oidc?

The angular-oauth2-oidc package is an Angular library that provides support for OAuth 2 and OpenID Connect (OIDC) authentication. It allows developers to easily integrate secure authentication and authorization into their Angular applications.

What are angular-oauth2-oidc's main functionalities?

OAuth2 and OIDC Authentication

This feature allows you to configure and initiate OAuth2 and OIDC authentication in your Angular application. The code sample demonstrates how to set up the OAuthService with the necessary configuration and initiate the login process.

import { OAuthService, AuthConfig } from 'angular-oauth2-oidc';

const authConfig: AuthConfig = {
  issuer: 'https://your-identity-server',
  redirectUri: window.location.origin + '/index.html',
  clientId: 'your-client-id',
  scope: 'openid profile email',
  responseType: 'code'
};

oauthService.configure(authConfig);
oauthService.loadDiscoveryDocumentAndTryLogin();

Token Management

This feature provides methods to manage tokens, including retrieving access and ID tokens, and refreshing tokens. The code sample shows how to get the access token, ID token, and refresh the token using the OAuthService.

import { OAuthService } from 'angular-oauth2-oidc';

// Get access token
const accessToken = oauthService.getAccessToken();

// Get ID token
const idToken = oauthService.getIdToken();

// Refresh token
oauthService.refreshToken();

User Profile Information

This feature allows you to retrieve user profile information from the ID token. The code sample demonstrates how to get the identity claims and log them to the console.

import { OAuthService } from 'angular-oauth2-oidc';

// Get user profile information
const claims = oauthService.getIdentityClaims();
if (claims) {
  console.log(claims);
}

Other packages similar to angular-oauth2-oidc

oidc-client

The oidc-client package is a JavaScript library for managing OpenID Connect (OIDC) and OAuth2 authentication. It is framework-agnostic and can be used with any JavaScript framework, including Angular. Compared to angular-oauth2-oidc, oidc-client provides more flexibility but requires more manual setup and integration.

angular-auth-oidc-client

The angular-auth-oidc-client package is another Angular library for implementing OAuth2 and OIDC authentication. It offers similar functionalities to angular-oauth2-oidc, such as token management and user profile retrieval. However, it has a different API and configuration approach, which some developers might find more intuitive or easier to use.

auth0-angular

The auth0-angular package is an Angular SDK for integrating Auth0 authentication and authorization services. It provides a seamless way to implement OAuth2 and OIDC authentication with Auth0 as the identity provider. Compared to angular-oauth2-oidc, auth0-angular is specifically designed for use with Auth0 and offers additional features like user management and analytics.

README

angular-oauth2-oidc

Installation

To install this library, run:

$ npm install angular-oauth2-oidc --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular-oauth2-oidc

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { SampleModule } from 'angular-oauth2-oidc';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © ManfredSteyer