{"id":13806598,"url":"https://github.com/anagstef/ngx-clerk","last_synced_at":"2025-04-14T19:44:30.245Z","repository":{"id":229922544,"uuid":"776599662","full_name":"anagstef/ngx-clerk","owner":"anagstef","description":"An unofficial project that aims to provide a seamless integration of Clerk features into Angular applications.","archived":false,"fork":false,"pushed_at":"2024-08-05T16:11:58.000Z","size":146,"stargazers_count":31,"open_issues_count":4,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-09T07:48:05.780Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anagstef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-24T00:13:48.000Z","updated_at":"2025-03-28T12:53:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"f520bb74-3b32-4733-a8da-a589c5f48f0d","html_url":"https://github.com/anagstef/ngx-clerk","commit_stats":null,"previous_names":["anagstef/ngx-clerk"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anagstef%2Fngx-clerk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anagstef%2Fngx-clerk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anagstef%2Fngx-clerk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anagstef%2Fngx-clerk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anagstef","download_url":"https://codeload.github.com/anagstef/ngx-clerk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248949995,"owners_count":21188184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:13.696Z","updated_at":"2025-04-14T19:44:30.214Z","avatar_url":"https://github.com/anagstef.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Angular"],"readme":"# ngx-clerk\n\nWelcome to **ngx-clerk**, an unofficial Angular package that integrates with [Clerk](https://clerk.com/).\n\n### ⚠️ 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.\n\n## Prerequisites\n\n- Angular version **17 or higher**.\n- Currently, this package supports **client-side operations only**. Server-Side Rendering (SSR) is not supported at the moment.\n\n## Installation\n\nTo install `ngx-clerk`, run the following command in your project directory:\n\n```bash\nnpm i ngx-clerk\n```\n\n## Getting Started\n\nTo begin using `ngx-clerk` in your project, follow these steps:\n1. Create an app in [Clerk Dashboard](https://dashboard.clerk.com/) and get the Publishable Key.\n2. **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`.\n```typescript\n// Example: app.component.ts\nimport { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { ClerkService } from 'ngx-clerk';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [RouterOutlet],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.css'\n})\nexport class AppComponent {\n  constructor(private _clerk: ClerkService) {\n    this._clerk.__init({ \n      publishableKey: 'pk_test_XXXXXXXX'\n     });\n  }\n}\n\n```\n3. **Utilize Observables**: Use the observables provided by the `ClerkService` to access and manage the state throughout your application.\n4. **Route Guarding**: Leverage the guard to protect routes, ensuring that certain parts of your application are accessible only after authentication.\n```typescript\n// Example: app-routes.ts\nimport { Routes } from '@angular/router';\nimport { catchAllRoute, AuthGuardService } from 'ngx-clerk';\nimport { UserProfilePageComponent } from './pages/user-profile-page.component';\nimport { HomePageComponent } from './pages/home-page.component';\n\nexport const routes: Routes = [\n    { \n        matcher: catchAllRoute('user'), \n        component: UserProfilePageComponent, \n        canActivate: [AuthGuardService] \n    },\n    { \n        path: '', \n        component: HomePageComponent\n    }\n];\n\n```\n\n## Features\n\n- **Clerk UI Components**: All Clerk UI components are readily available and prefixed with `clerk-`. Available components:\n    1. `\u003cclerk-sign-in /\u003e`\n    2. `\u003cclerk-sign-up /\u003e`\n    3. `\u003cclerk-user-profile /\u003e`\n    4. `\u003cclerk-user-button /\u003e`\n    5. `\u003cclerk-organization-profile /\u003e`\n    6. `\u003cclerk-organization-switcher /\u003e`\n    7. `\u003cclerk-organization-list /\u003e`\n    8. `\u003cclerk-create-organization /\u003e`\n\n- **ClerkService**: This service is a central part of the package, offering observables for various Clerk resources:\n    - `user$` - Emits every time the `UserResource` is updated\n    - `session$` - Emits every time the `SessionResource` is updated\n    - `organization$` - Emits every time the `OrganizationResource` is updated\n    - `client$` - Emits every time the `ClientResource` is updated\n    - `clerk$` - Emits when Clerk has loaded\n- **AuthGuardService**: This service implements a `canActivate` that can be used to protect routes in your application.\n\n## Remaining Tasks\n\nWhile `ngx-clerk` aims to provide a comprehensive solution for integrating Clerk into Angular applications, there are several areas that are still under development:\n\n- Enhanced API for Custom Pages.\n- Implement support for Organization multidomain and proxy features.\n- Add support for Server-Side Rendering (SSR) and Static Site Generation (SSG).\n\nWe welcome contributions and suggestions from the community to help us address these tasks and improve `ngx-clerk`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanagstef%2Fngx-clerk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanagstef%2Fngx-clerk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanagstef%2Fngx-clerk/lists"}