{"library":"ngx-better-auth","title":"Angular Better Auth Wrapper","description":"ngx-better-auth is an Angular 20+ wrapper library designed to integrate with the Better Auth authentication system. It provides a reactive approach to session management, leveraging Angular's signal primitives for real-time session status (`session`, `isLoggedIn`). The library offers a clean dependency injection setup using observables and includes modern Angular guards (`canActivate`, `hasRole`) for route protection, ensuring a streamlined development experience for authentication flows. Currently at version `0.10.3`, it maintains a regular release cadence with frequent bug fixes and feature enhancements, closely tracking Angular and better-auth major versions. Its key differentiator is the direct integration with Better Auth's plugin ecosystem and a focus on leveraging modern Angular features like signals for session state.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install ngx-better-auth"],"cli":null},"imports":["import { AuthService } from 'ngx-better-auth'","import { provideBetterAuth } from 'ngx-better-auth'","import { canActivate, redirectUnauthorizedTo } from 'ngx-better-auth'","import { UsernameService } from 'ngx-better-auth'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { ApplicationConfig, importProvidersFrom } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { provideBetterAuth } from 'ngx-better-auth';\nimport { environment } from './environments/environment';\nimport { usernameClient, twoFactorClient, adminClient } from 'better-auth/client/plugins';\nimport { routes } from './app.routes';\nimport { AuthService } from 'ngx-better-auth';\nimport { Component, inject } from '@angular/core';\n\nconst accessControl = { /* ... your access control setup ... */ };\nconst admin = ['admin'];\nconst moderator = ['moderator'];\nconst user = ['user'];\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideBetterAuth({\n      baseURL: environment.apiUrl,\n      basePath: '/auth',\n      plugins: [\n        usernameClient(),\n        twoFactorClient({\n          onTwoFactorRedirect: () => {\n            window.location.href = '/two-factor-auth';\n          },\n        }),\n        adminClient({\n          ac: accessControl,\n          roles: {\n            admin,\n            moderator,\n            user\n          }\n        })\n      ]\n    })\n  ]\n};\n\n// Example component usage\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    template: `\n        <h1>Welcome, {{ userName() ?? 'Guest' }}</h1>\n        <p>Logged In: {{ isLoggedIn() }}</p>\n        <button *ngIf=\"!isLoggedIn()\" (click)=\"signIn()\">Sign In</button>\n        <button *ngIf=\"isLoggedIn()\" (click)=\"signOut()\">Sign Out</button>\n    `\n})\nexport class AppComponent {\n    private readonly authService = inject(AuthService);\n\n    isLoggedIn = this.authService.isLoggedIn;\n    userName = () => this.authService.session()?.user?.name ?? 'Loading...';\n\n    signIn() { /* ... implementation for sign-in ... */ }\n    signOut() {\n      this.authService.signOut();\n    }\n}","lang":"typescript","description":"This quickstart demonstrates how to configure `ngx-better-auth` using `provideBetterAuth` in an Angular 20+ application's `app.config.ts`, including Better Auth client plugins. It also shows basic usage of `AuthService` within a component to access session status and user information reactively via signals.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}