An Angular 20+ wrapper for Better Auth. Provides reactive session handling with signals, clean DI provider setup with observables, and modern guards.
| ngx-better-auth | Angular | Better Auth |
|---|---|---|
latest | >=20 | >=1.3.7 |
npm install ngx-better-auth better-authFirst, configure your Better Auth client in your application:
// app.config.tsimport{ApplicationConfig}from'@angular/core'import{provideBetterAuth}from'ngx-better-auth'import{environment}from'./environments/environment'import{adminClient,twoFactorClient,usernameClient}from'better-auth/client/plugins'exportconstappConfig: ApplicationConfig={providers: [provideBetterAuth({baseURL: environment.apiUrl,// it works also with proxy configbasePath: '/auth',// optional, default is '/api/auth'// Example with pluginsplugins: [usernameClient(),twoFactorClient({onTwoFactorRedirect(){window.location.href='/two-factor-auth'},}),adminClient({ac: accessControl,roles: { admin, moderator, user,},}),],})]}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.
- ✅ 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
- ✅ Admin ➡️
AdminService - ❌ API Key
- ❌ MCP
- ✅ Organization ➡️
OrganizationService
- ❌ OIDC Provider
- ❌ SSO
- ❌ Bearer
- ❌ Device Authorization
- ❌ Captcha
- ❌ Last Login Method
- ❌ Multi Session
- ❌ One Time Token
- ❌ JWT
session→ a signal with the current session or nullisLoggedIn→ a computed boolean
import{AuthService}from"ngx-better-auth"import{inject}from"@angular/core" @Component({// ...})exportclassMyComponent{privatereadonlyauthService=inject(AuthService)getisLoggedIn(){returnthis.authService.isLoggedIn()}getuserName(){returnthis.authService.session()?.user.name}}This library ships with guards to quickly set up route protection.
redirectUnauthorizedTo(['/login'])→ redirect if not logged inredirectLoggedInTo(['/'])→ redirect if already logged inhasRole(['admin'], ['/unauthorized'])→ restrict access by role and redirect if not authorized
import{Routes}from'@angular/router'import{canActivate,redirectLoggedInTo,redirectUnauthorizedTo,hasRole}from'ngx-better-auth'exportconstroutes: Routes=[{path: '',component: SomeComponent, ...canActivate(redirectUnauthorizedTo(['/login']))},{path: 'admin',component: AdminComponent, ...canActivate(hasRole(['admin'],['/unauthorized']))},{path: 'login',component: LoginComponent, ...canActivate(redirectLoggedInTo(['/']))}]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'constusernameService=inject(UsernameService)constinitialUsername='thomas-orgeval'constusernameControl=newFormControl('',{asyncValidators: [usernameAvailableValidator(usernameService,initialUsername)],updateOn: 'change'})