GitHub - luukhaijes/kinde-angular: Angular wrapper for the Kinde Typescript SDK

KindeAngular

Kinde integration for Angular

For issues and feature requests please use GitHub Issues

Quick setup

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) {}

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