Welcome back, {{ user()?.displayName }}!
\nEmail: {{ user()?.email }}
\n\n @if (user()?.roles?.includes('admin')) {\n Admin Panel\n }\n\n @if (!emailVerified()) {\n\n Please verify your email\n \n
\n }\n Email: {{ authState.user()?.email }}
\n\n @if (authState.isLoading()) {\nLoading...
\n }\n\n \n `,\n})\nexport class Dashboard {\n protected readonly authState = inject(AuthState);\n\n logout() {\n this.authState.logout().subscribe();\n }\n}\n```\n\n## Core API\n\n### AuthState Service\n\nThe main service for all authentication operations. Uses Angular signals for reactive state.\n\n```typescript\nimport { inject } from '@angular/core';\nimport { AuthState } from '@acontplus/ng-auth';\n\nconst authState = inject(AuthState);\n\n// Reactive state (signals)\nauthState.isAuthenticated(); // SignalWelcome back, {{ user()?.displayName }}!
\nEmail: {{ user()?.email }}
\n\n @if (user()?.roles?.includes('admin')) {\n Admin Panel\n }\n\n @if (!emailVerified()) {\nCompleting authentication...
',\n})\nexport class MyOAuthCallback implements OnInit {\n private authState = inject(AuthState);\n private route = inject(ActivatedRoute);\n\n ngOnInit() {\n const provider = this.route.snapshot.paramMap.get('provider');\n const code = this.route.snapshot.queryParamMap.get('code');\n const state = this.route.snapshot.queryParamMap.get('state');\n\n if (provider && code && state) {\n this.authState.handleOAuthCallback(provider as SocialProvider, code, state).subscribe({\n next: () => {\n // Success - AuthState redirects automatically\n },\n error: (err) => {\n console.error('OAuth failed:', err);\n },\n });\n }\n }\n}\n```\n\n### Backend Implementation Example (Google Workspace)\n\nHere's a Node.js/Express example for Google Workspace multi-tenant:\n\n```typescript\n// Domain discovery endpoint\napp.post('/api/auth/domain-discovery', async (req, res) => {\n const { email } = req.body;\n const domain = email.split('@')[1];\n\n // Check if domain is configured for OAuth\n const tenant = await db.tenants.findOne({ domain });\n\n if (tenant?.oauthProvider === 'google') {\n return res.json({\n provider: 'google',\n tenantId: tenant.id,\n domain: tenant.domain,\n requiresOAuth: true,\n allowPasswordLogin: tenant.allowPasswordFallback,\n });\n }\n\n // Default to password login\n res.json({\n requiresOAuth: false,\n allowPasswordLogin: true,\n });\n});\n\n// Get OAuth URL\napp.get('/api/auth/social/google/url', async (req, res) => {\n const { tenantId, domain } = req.query;\n\n const tenant = await db.tenants.findOne({ id: tenantId });\n const state = crypto.randomBytes(32).toString('hex');\n\n // Store state for verification\n await redis.set(`oauth:state:${state}`, tenantId, 'EX', 600);\n\n const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');\n authUrl.searchParams.set('client_id', tenant.googleClientId);\n authUrl.searchParams.set('redirect_uri', 'https://your-app.com/auth/callback/google');\n authUrl.searchParams.set('response_type', 'code');\n authUrl.searchParams.set('scope', 'openid email profile');\n authUrl.searchParams.set('state', state);\n\n // Tenant hint for Google Workspace\n if (domain) {\n authUrl.searchParams.set('hd', domain);\n }\n\n res.json({\n url: authUrl.toString(),\n state,\n });\n});\n\n// OAuth callback\napp.post('/api/auth/social/google/callback', async (req, res) => {\n const { code, state, tenantId } = req.body;\n\n // Verify state\n const storedTenantId = await redis.get(`oauth:state:${state}`);\n if (!storedTenantId) {\n return res.status(400).json({ error: 'Invalid state' });\n }\n\n const tenant = await db.tenants.findOne({ id: tenantId });\n\n // Exchange code for tokens\n const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n client_id: tenant.googleClientId,\n client_secret: tenant.googleClientSecret,\n code,\n grant_type: 'authorization_code',\n redirect_uri: 'https://your-app.com/auth/callback/google',\n }),\n });\n\n const tokens = await tokenResponse.json();\n\n // Get user info\n const userInfo = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {\n headers: { Authorization: `Bearer ${tokens.access_token}` },\n }).then((r) => r.json());\n\n // Verify domain matches tenant\n const userDomain = userInfo.email.split('@')[1];\n if (tenant.domain !== userDomain) {\n return res.status(403).json({ error: 'Domain mismatch' });\n }\n\n // Create or update user\n const user = await db.users.upsert({\n email: userInfo.email,\n displayName: userInfo.name,\n tenantId: tenant.id,\n emailVerified: userInfo.verified_email,\n });\n\n // Generate JWT\n const jwt = generateJWT(user);\n\n res.json({\n token: jwt,\n refreshToken: generateRefreshToken(user),\n });\n});\n```\n\n### Configuration Example: Tenant Management\n\n```typescript\n// Tenant configuration for admin panel\ninterface TenantConfig {\n tenantId: string;\n domain: string; // e.g., \"acme.com\"\n displayName: string; // e.g., \"Acme Corporation\"\n provider: 'google' | 'microsoft';\n\n // OAuth credentials\n clientId: string;\n clientSecret: string; // Stored securely on backend\n issuer?: string; // For OIDC providers\n\n // Settings\n allowedDomains?: string[]; // Additional domains\n allowPasswordLogin: boolean;\n autoProvision: boolean; // Auto-create users on first login\n\n customParameters?: {\n hd?: string; // Google Workspace domain hint\n tenant?: string; // Azure AD tenant ID\n };\n}\n```\n\n### Testing OAuth Locally\n\nFor local development, use these redirect URIs:\n\n- `http://localhost:4200/auth/callback/google`\n- `http://localhost:4200/auth/callback/microsoft`\n\nConfigure your OAuth apps with these URLs in development mode.\n\n### OAuth Security Best Practices\n\n1. **CSRF Protection**: Always verify the `state` parameter matches\n2. **Domain Validation**: Verify user's email domain matches tenant configuration\n3. **HTTPS Only**: Enforce HTTPS in production (OAuth providers require it)\n4. **Secret Storage**: Encrypt OAuth client secrets at rest in your database\n5. **Token Expiry**: Set reasonable expiry for OAuth state tokens (5-10 minutes)\n6. **Scope Limitation**: Request only the minimum required OAuth scopes\n\n### Database Schema for Multi-Tenant\n\n```typescript\n// Tenants table\ninterface Tenant {\n id: string;\n domain: string; // \"acme.com\"\n displayName: string; // \"Acme Corporation\"\n oauthProvider: 'google' | 'microsoft' | 'apple' | null;\n\n // OAuth credentials (encrypted at rest!)\n googleClientId?: string;\n googleClientSecret?: string;\n microsoftClientId?: string;\n microsoftClientSecret?: string;\n azureTenantId?: string; // For Azure AD\n\n // Settings\n allowPasswordLogin: boolean;\n autoProvisionUsers: boolean; // Auto-create users on first OAuth login\n requireEmailVerification: boolean;\n\n createdAt: Date;\n updatedAt: Date;\n}\n\n// Users table\ninterface User {\n id: string;\n email: string;\n displayName: string;\n tenantId?: string; // Reference to tenant\n emailVerified: boolean;\n\n // Track which auth method they used\n authProvider: 'password' | 'google' | 'microsoft' | 'github' | 'apple';\n\n // OAuth user ID from provider\n oauthProviderId?: string;\n\n createdAt: Date;\n lastLoginAt: Date;\n}\n```\n\n### OAuth Provider Setup Guides\n\n