ngx-better-auth

An Angular 20+ wrapper for Better Auth. Provides reactive session handling with signals, clean DI provider setup with observables, and modern guards.

🚀 Compatibility

| ngx-better-auth | Angular | Better Auth | |-----------------|---------|-------------| | latest | >=20 | >=1.3.7 |

📦 Installation

npm install ngx-better-auth better-auth

⚙️ Setup Provider

First, configure your Better Auth client in your application:

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideBetterAuth } from 'ngx-better-auth'
import { environment } from './environments/environment'
import { adminClient, twoFactorClient, usernameClient } from 'better-auth/client/plugins'

export const appConfig: ApplicationConfig = {
  providers: [
    provideBetterAuth({
      baseURL: environment.apiUrl, // it works also with proxy config
      basePath: '/auth',   // optional, default is '/api/auth'
        
      // Example with plugins
      plugins: [
        usernameClient(),
        twoFactorClient({
          onTwoFactorRedirect() {
              window.location.href = '/two-factor-auth'
          },
        }),
        adminClient({
          ac: accessControl,
          roles: {
            admin,
            moderator,
            user,
          },
        }),
      ],
    })
  ]
}

🧩 Different services

You can inject different services depending on your needs.
AuthService provides the core Better Auth client methods (signIn, signOut, signUp, e.g.).
The full list of methods is available at the end of this README.

🔌 Plugin compatibility

Authentication

• ✅ Two Factor ➡️ TwoFactorService
• ✅ Username ➡️ UsernameService
• ❌ Anonymous
• ❌ Phone Number
• ✅ Magic Link ➡️ MagicLinkService
• ✅ Email OTP ➡️ EmailOtpService
• ✅ Passkey ➡️ PasskeyService
• ✅ Generic OAuth ➡️ GenericOauthService
• ✅ One Tap ➡️ OneTapService
• ❌ Sign In With Ethereum

Authorization

• ✅ Admin ➡️ AdminService
• ❌ API Key
• ❌ MCP
• ✅ Organization ➡️ OrganizationService

Enterprise

• ❌ OIDC Provider
• ❌ SSO

Utility

• ❌ Bearer
• ❌ Device Authorization
• ❌ Captcha
• ❌ Last Login Method
• ❌ Multi Session
• ❌ One Time Token
• ❌ JWT

🔄 Real-time Session

AuthService keeps the session in sync automatically

• session → a signal with the current session or null
• isLoggedIn → a computed boolean

Demonstration of usage in a component

import { AuthService } from "ngx-better-auth"
import { inject } from "@angular/core"

@Component({
    // ...
})
export class MyComponent {
    private readonly authService = inject(AuthService)

    get isLoggedIn() {
        return this.authService.isLoggedIn()
    }

    get userName() {
        return this.authService.session()?.user.name
    }
}

🛡️ Guards

This library ships with guards to quickly set up route protection.

Helpers

• redirectUnauthorizedTo(['/login']) → redirect if not logged in
• redirectLoggedInTo(['/']) → redirect if already logged in
• hasRole(['admin'], ['/unauthorized']) → restrict access by role and redirect if not authorized

Usage in routes

import { Routes } from '@angular/router'
import { canActivate, redirectLoggedInTo, redirectUnauthorizedTo, hasRole } from 'ngx-better-auth'

export const routes: Routes = [
  {
    path: '',
    component: SomeComponent,
    ...canActivate(redirectUnauthorizedTo(['/login']))
  },
  {
    path: 'admin',
    component: AdminComponent,
    ...canActivate(hasRole(['admin'], ['/unauthorized']))
  },
  {
    path: 'login',
    component: LoginComponent,
    ...canActivate(redirectLoggedInTo(['/']))
  }
]

✅ Validators

The username plugin provides validators that work seamlessly with both reactive and template-driven forms.

import { FormControl } from '@angular/forms'
import { inject } from '@angular/core'
import { UsernameAvailableValidator } from 'ngx-better-auth'

const usernameService = inject(UsernameService)
const initialUsername = 'thomas-orgeval'

const usernameControl = new FormControl('', {
    asyncValidators: [usernameAvailableValidator(usernameService, initialUsername)],
    updateOn: 'change'
})