ngx-clerk

Community Clerk integration for Angular.

Prerequisites

• Angular 18 or later
• An existing Clerk application. Create your account for free.

Installation

npm install @jsrob/ngx-clerk

Getting Started

Provide Clerk to your App

import { ApplicationConfig } from '@angular/core';
import { provideClerk } from '@jsrob/ngx-clerk'

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    /// .. other providers
    provideClerk({
      publishableKey: 'pk_test_'
    }),
  ]
};

Features

Components

To see all available props for each component, visit the Clerk UI Components docs.

• <clerk-sign-in></clerk-sign-in>
• <clerk-sign-up></clerk-sign-up>
• <clerk-user-button></clerk-user-button>
• <clerk-user-profile></clerk-user-profile>
• <clerk-organization-list></clerk-organization-list>
• <clerk-organization-profile></clerk-organization-profile>
• <clerk-organization-switcher></clerk-organization-switcher>
• <clerk-create-organization></clerk-create-organization>
• <clerk-waitlist></clerk-waitlist>

ClerkService

Add ClerkService to your component via Inject method to interfact with Clerk's resources.

const clerkService = inject(ClerkService);

and access the available signals:

• auth - Auth object.
• user - Authenticated user.
• organization - Active Organization of the authenticated user.
• session - Session of the authenticated user.
• clerk - Clerk object.
• loaded - Indicates if Clerk has finished loading.

Acknowledgment

This project is inspired by anagstef's ngx-clerk package.

License

MIT