Home

Awesome

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

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'
     });
  }
}

  1. Utilize Observables: Use the observables provided by the ClerkService to access and manage the state throughout your application.
  2. 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

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:

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