ngx-clerk

Welcome to ngx-clerk, an unofficial Angular package that integrates with Clerk.

⚠️ Disclaimer: This unofficial package is not affiliated with Clerk.com. It is an unofficial project that aims to provide a seamless integration of Clerk features into Angular applications.

Prerequisites

• Angular version 17 or higher.
• Currently, this package supports client-side operations only. Server-Side Rendering (SSR) is not supported at the moment.

Installation

To install ngx-clerk, run the following command in your project directory:

npm i ngx-clerk

Getting Started

To begin using ngx-clerk in your project, follow these steps:

1. Create an app in Clerk Dashboard and get the Publishable Key.
2. Inject the ClerkService: In your 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'
     });
  }
}

3. Utilize Observables: Use the observables provided by the ClerkService to access and manage the state throughout your application.
4. Route Guarding: Leverage the guard to protect routes, ensuring that certain parts of your application are accessible only after authentication.

// 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
    }
];

Features

• Clerk UI Components: All Clerk UI components are readily available and prefixed with clerk-. Available components:

  1. <clerk-sign-in />
  2. <clerk-sign-up />
  3. <clerk-user-profile />
  4. <clerk-user-button />
  5. <clerk-organization-profile />
  6. <clerk-organization-switcher />
  7. <clerk-organization-list />
  8. <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 updated
  • session$ - Emits every time the SessionResource is updated
  • organization$ - Emits every time the OrganizationResource is updated
  • client$ - Emits every time the ClientResource is updated
  • clerk$ - Emits when Clerk has loaded

• AuthGuardService: This service implements a canActivate that can be used to protect routes in your application.

Remaining Tasks

While ngx-clerk aims to provide a comprehensive solution for integrating Clerk into Angular applications, there are several areas that are still under development:

• Enhanced API for Custom Pages.
• Implement support for Organization multidomain and proxy features.
• Add support for Server-Side Rendering (SSR) and Static Site Generation (SSG).

We welcome contributions and suggestions from the community to help us address these tasks and improve ngx-clerk.