@haloduck/ui 2.0.49 → 2.1.0

package/SOCIAL_LOGIN_CONFIGURATION.md

@@ -0,0 +1,131 @@
+# Social Login Configuration Guide
+
+## Overview
+
+AuthenticateComponent can be configured with social login providers through Angular's dependency
+injection system using ApplicationConfig providers.
+
+## Configuration
+
+### 1. Import Required Types and Functions
+
+```typescript
+import { SocialLoginProvider, provideSocialLoginProviders } from '@haloduck/ui';
+```
+
+### 2. Configure in ApplicationConfig
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { SocialLoginProvider, provideSocialLoginProviders } from '@haloduck/ui';
+
+const socialProviders: SocialLoginProvider[] = [
+  {
+    name: 'google',
+    enabled: true,
+    clientId: 'your-google-client-id',
+    redirectUrl: 'https://yourdomain.com/auth/callback',
+  },
+  {
+    name: 'apple',
+    enabled: true,
+    clientId: 'your-apple-client-id',
+    redirectUrl: 'https://yourdomain.com/auth/callback',
+  },
+  {
+    name: 'kakao',
+    enabled: true,
+    clientId: 'your-kakao-client-id',
+    redirectUrl: 'https://yourdomain.com/auth/callback',
+    state: { customParam: 'value' },
+  },
+];
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ... other providers
+    provideSocialLoginProviders(socialProviders),
+    // ... other providers
+  ],
+};
+```
+
+### 3. Use in Routes
+
+```typescript
+import { Routes } from '@angular/router';
+import { AuthenticateComponent } from '@haloduck/ui';
+
+export const routes: Routes = [
+  {
+    path: 'auth',
+    component: AuthenticateComponent,
+  },
+  // ... other routes
+];
+```
+
+## SocialLoginProvider Interface
+
+```typescript
+interface SocialLoginProvider {
+  name: 'google' | 'apple' | 'kakao';
+  enabled: boolean;
+  clientId?: string;
+  redirectUrl?: string;
+  state?: { [key: string]: string };
+}
+```
+
+### Properties
+
+- **name**: The social provider type ('google' | 'apple' | 'kakao')
+- **enabled**: Whether this provider should be available in the UI
+- **clientId**: OAuth client ID for the provider (optional)
+- **redirectUrl**: Callback URL after authentication (optional, defaults to current origin)
+- **state**: Additional state parameters for OAuth flow (optional, Kakao only)
+
+## Environment-Specific Configuration
+
+### Development
+
+```typescript
+const socialProviders: SocialLoginProvider[] = [
+  {
+    name: 'google',
+    enabled: true,
+    clientId: 'dev-google-client-id',
+    redirectUrl: 'http://localhost:4200/auth/callback',
+  },
+  // ... other providers
+];
+```
+
+### Production
+
+```typescript
+const socialProviders: SocialLoginProvider[] = [
+  {
+    name: 'google',
+    enabled: true,
+    clientId: 'prod-google-client-id',
+    redirectUrl: 'https://yourproductionsite.com/auth/callback',
+  },
+  // ... other providers
+];
+```
+
+## Fallback Configuration
+
+If no providers are configured via DI, AuthenticateComponent will use the default configuration with
+all providers enabled but without clientId values.
+
+## Input Override
+
+You can still override the providers configuration by passing it as an Input property:
+
+```html
+<haloduck-authenticate [socialLoginProviders]="customProviders"></haloduck-authenticate>
+```
+
+This will override the DI configuration for that specific component instance.