KindeAngular

Kinde integration for Angular

For issues and feature requests please use GitHub Issues

Quick setup

npm i kinde-angular

NgModule Application

import module to your app module

import { KindeAngularModule } from 'kinde-angular';

Add KindeModule to your imports

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    KindeAngularModule.forRoot({
      clientId: 'client_id_here',
      authDomain: 'https://domain.kinde.com',
      redirectURL: 'http://localhost:4200/',
      logoutRedirectURL: 'http://localhost:4200/',
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Standalone Application

update main.ts with:

import { provideKinde } from 'kinde-angular';

bootstrapApplication(AppComponent, {
  providers: [
    provideKinde({
      clientId: 'client_id_here',
      authDomain: 'https://domain.kinde.com',
      redirectURL: 'http://localhost:4200/',
      logoutRedirectURL: 'http://localhost:4200/',
    })
  ],
}).catch((err) => console.error(err));

Use

Service injections

Add KindeService to your component via contructor or Inject method

constructor(private authService: KindeAngularService) {}

Or

const authService = inject(KindeAngularService);

Protect routes

Use feature guard

[{
  path: 'feature',
  component: FeatureComponent,
  canActivate: [featureFlagGuard('has_feature')]
}]

Use canActivate auth guard

[{
  path: 'route',
  component: AComponent,
  canActivate: [canActivateAuthGuard]
}]

You can also read some more information here

Roadmap

• More unit tests
• More documentation
• Interceptor
  • basic interceptor
  • with pattern matching
• Support analogjs
• feature flag guard
• feature flag directive
• ng schematic