An unofficial project that aims to provide a seamless integration of Clerk features into Angular applications.
MIT License
Welcome to ngx-clerk, an unofficial Angular package that integrates with Clerk.
To install ngx-clerk
, run the following command in your project directory:
npm i ngx-clerk
To begin using ngx-clerk
in your project, follow these steps:
app.component.ts
, inject the ClerkService
and call its __init
method. You need to provide at least the Publishable Key and, optionally, any ClerkOptions
.// Example: app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ClerkService } from 'ngx-clerk';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
constructor(private _clerk: ClerkService) {
this._clerk.__init({
publishableKey: 'pk_test_XXXXXXXX'
});
}
}
ClerkService
to access and manage the state throughout your application.// Example: app-routes.ts
import { Routes } from '@angular/router';
import { catchAllRoute, AuthGuardService } from 'ngx-clerk';
import { UserProfilePageComponent } from './pages/user-profile-page.component';
import { HomePageComponent } from './pages/home-page.component';
export const routes: Routes = [
{
matcher: catchAllRoute('user'),
component: UserProfilePageComponent,
canActivate: [AuthGuardService]
},
{
path: '',
component: HomePageComponent
}
];
Clerk UI Components: All Clerk UI components are readily available and prefixed with clerk-
. Available components:
<clerk-sign-in />
<clerk-sign-up />
<clerk-user-profile />
<clerk-user-button />
<clerk-organization-profile />
<clerk-organization-switcher />
<clerk-organization-list />
<clerk-create-organization />
ClerkService: This service is a central part of the package, offering observables for various Clerk resources:
user$
- Emits every time the UserResource
is updatedsession$
- Emits every time the SessionResource
is updatedorganization$
- Emits every time the OrganizationResource
is updatedclient$
- Emits every time the ClientResource
is updatedclerk$
- Emits when Clerk has loadedAuthGuardService: This service implements a canActivate
that can be used to protect routes in your application.
While ngx-clerk
aims to provide a comprehensive solution for integrating Clerk into Angular applications, there are several areas that are still under development:
We welcome contributions and suggestions from the community to help us address these tasks and improve ngx-clerk
.