https://github.com/luukhaijes/kinde-angular
Angular wrapper for the Kinde Typescript SDK
https://github.com/luukhaijes/kinde-angular
Last synced: 22 days ago
JSON representation
Angular wrapper for the Kinde Typescript SDK
- Host: GitHub
- URL: https://github.com/luukhaijes/kinde-angular
- Owner: luukhaijes
- License: mit
- Created: 2023-12-18T13:56:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T14:00:55.000Z (7 months ago)
- Last Synced: 2025-09-01T10:15:06.275Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 665 KB
- Stars: 18
- Watchers: 4
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - kinde-angular - Angular wrapper around the 🌎 [Kinde](kinde.com/) TypeScript 🌎 [SDK](docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/). (Security and Authentication / Authentication)
- awesome-angular - kinde-angular - Angular wrapper around the [Kinde](https://kinde.com/) TypeScript [SDK](https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/). (Security and Authentication / Authentication)
- trackawesomelist - kinde-angular (⭐15) - Angular wrapper around the [Kinde](https://kinde.com/) Typescript [SDK](https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/). (Recently Updated / [Jan 30, 2025](/content/2025/01/30/README.md))
README
# KindeAngular
Kinde integration for Angular
For issues and feature requests please use [GitHub Issues](https://github.com/luukhaijes/kinde-angular/issues)
## Quick setup
```bash
npm i kinde-angular
```
## NgModule Application
import module to your app module
```typescript
import { KindeAngularModule } from 'kinde-angular';
```
Add KindeModule to your imports
```typescript
@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:
```typescript
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
```typescript
constructor(private authService: KindeAngularService) {}
```
Or
```typescript
const authService = inject(KindeAngularService);
```
### Protect routes
Use feature guard
```typescript
[{
path: 'feature',
component: FeatureComponent,
canActivate: [featureFlagGuard('has_feature')]
}]
```
Use canActivate auth guard
```typescript
[{
path: 'route',
component: AComponent,
canActivate: [canActivateAuthGuard]
}]
```
You can also read some more information [here](docs.md)
## Roadmap
- [ ] More unit tests
- [ ] More documentation
- [ ] Interceptor
- [ ] basic interceptor
- [ ] with pattern matching
- [ ] Support analogjs
- [x] feature flag guard
- [ ] feature flag directive
- [ ] ng schematic