auth-service/HOW_TO_USE.md

How to Use Auth Service in Your Projects

Step-by-step guide for integrating the authentication service into Dexar, Novo Markets, FastCheck, and BackOffice.

---

🚀 Quick Start

1. Add Environment Configuration

In each project, add auth service URL to your environment files:

src/environments/environment.ts (Development):

export const environment = {
  production: false,
  authServiceUrl: 'http://localhost:4300',
  apiUrl: 'http://localhost:3000/api',
  projectId: 'dexar' // Change per project: dexar/novo/fastcheck/backoffice
};

src/environments/environment.production.ts:

export const environment = {
  production: true,
  authServiceUrl: 'https://auth.dx-projects.com',
  apiUrl: 'https://api.dx-projects.com/api',
  projectId: 'dexar'
};

---

📁 Files to Create

Step 1: Create Auth Interceptor

File: src/app/interceptors/auth.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { catchError, throwError } from 'rxjs';
import { environment } from '../../environments/environment';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('authToken');
  
  // Add token to API requests
  if (token && req.url.includes(environment.apiUrl)) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
  }
  
  return next(req).pipe(
    catchError((error) => {
      // Redirect to auth service on 401
      if (error.status === 401) {
        localStorage.removeItem('authToken');
        const currentUrl = window.location.href;
        window.location.href = `${environment.authServiceUrl}/login?project=${environment.projectId}&redirect=${encodeURIComponent(currentUrl)}`;
      }
      return throwError(() => error);
    })
  );
};

Step 2: Create Auth Guard

File: src/app/guards/auth.guard.ts

import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { environment } from '../../environments/environment';

export const authGuard: CanActivateFn = () => {
  const token = localStorage.getItem('authToken');
  
  if (token) {
    return true;
  }
  
  // Redirect to auth service
  const currentUrl = window.location.href;
  window.location.href = `${environment.authServiceUrl}/login?project=${environment.projectId}&redirect=${encodeURIComponent(currentUrl)}`;
  
  return false;
};

Step 3: Update App Config

File: src/app/app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';
import { authInterceptor } from './interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
};

Step 4: Handle Auth Callback in App Component

Update: src/app/app.ts or src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: '<router-outlet />',
  styleUrls: ['./app.scss']
})
export class App implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // Handle token from auth service redirect
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');
    
    if (token) {
      localStorage.setItem('authToken', token);
      // Clean URL
      window.history.replaceState({}, document.title, window.location.pathname);
      // Navigate to dashboard
      this.router.navigate(['/dashboard']);
    }
  }
}

Step 5: Protect Routes

Update: src/app/app.routes.ts

import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./pages/dashboard/dashboard.component'),
    canActivate: [authGuard] // ✅ Protected route
  },
  {
    path: 'products',
    loadComponent: () => import('./pages/products/products.component'),
    canActivate: [authGuard] // ✅ Protected route
  },
  // ... more protected routes
];

---

🎯 Project-Specific Integration

For Dexar (marketplaces):

// src/environments/environment.ts
export const environment = {
  production: false,
  authServiceUrl: 'http://localhost:4300',
  apiUrl: 'http://localhost:3000/api',
  projectId: 'dexar'
};

For Novo Markets:

// src/environments/environment.novo.ts
export const environment = {
  production: false,
  authServiceUrl: 'http://localhost:4300',
  apiUrl: 'http://localhost:3000/api',
  projectId: 'novo',
  brandName: 'Novo'
};

For FastCheck:

// FastCheck/src/environments/environment.ts
export const environment = {
  production: false,
  authServiceUrl: 'http://localhost:4300',
  apiUrl: 'http://localhost:3000/api',
  projectId: 'fastcheck'
};

For BackOffice:

// market-backOffice/src/environments/environment.ts
export const environment = {
  production: false,
  authServiceUrl: 'http://localhost:4300',
  apiUrl: 'http://localhost:3000/api',
  projectId: 'backoffice'
};

---

🧪 Testing Integration

Test Flow:

1. Clear localStorage:

   localStorage.removeItem('authToken');
   

2. Navigate to protected route:

   http://localhost:4200/dashboard
   

3. Should redirect to:

   http://localhost:4300/login?project=dexar&redirect=http://localhost:4200/dashboard
   

4. After authentication, returns to:

   http://localhost:4200/dashboard?token=eyJ...
   

5. Token stored, URL cleaned automatically

---

🔧 Optional: Logout Functionality

Create Auth Service

File: src/app/services/auth.service.ts

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);

  logout(): void {
    const token = localStorage.getItem('authToken');
    
    if (token) {
      this.http.post(`${environment.apiUrl}/auth/logout`, {
        deviceInfo: this.getDeviceInfo()
      }).subscribe({
        complete: () => this.clearAuth(),
        error: () => this.clearAuth()
      });
    } else {
      this.clearAuth();
    }
  }

  private clearAuth(): void {
    localStorage.removeItem('authToken');
    window.location.href = `${environment.authServiceUrl}/login?project=${environment.projectId}`;
  }

  private getDeviceInfo() {
    return {
      deviceType: window.innerWidth < 768 ? 'mobile' : 'desktop',
      deviceOS: null,
      context: 'browser',
      project: environment.projectId
    };
  }
}

Use in Component:

import { Component, inject } from '@angular/core';
import { AuthService } from './services/auth.service';

@Component({
  selector: 'app-header',
  template: `<button (click)="logout()">Logout</button>`
})
export class HeaderComponent {
  private authService = inject(AuthService);

  logout(): void {
    this.authService.logout();
  }
}

---

📦 Summary

3 Files to Create:

1. ✅ interceptors/auth.interceptor.ts
2. ✅ guards/auth.guard.ts
3. ✅ Update app.config.ts

1 File to Modify: 4. ✅ Update app.ts (handle token callback)

1 Environment Update: 5. ✅ Add authServiceUrl and projectId

That's it! Your project now uses centralized authentication! 🎉

---

🚀 Deployment

1. Deploy Auth Service:

   cd auth-service
   npm run build:prod
   # Deploy to auth.dx-projects.com
   

2. Update Production Environments:

   authServiceUrl: 'https://auth.dx-projects.com'
   

3. Configure CORS on Backend:

   • Allow http://localhost:4300 (dev)
   • Allow https://auth.dx-projects.com (prod)
   • Allow all project domains

---

❓ Troubleshooting

Infinite redirect loop?

• Ensure auth guard doesn't protect callback routes
• Check that token is being stored correctly

Token not saved?

• Check browser console for errors
• Verify localStorage is available
• Check URL parameters parsing

CORS errors?

• Backend must allow auth service domain
• Check CORS configuration

---

📚 More Documentation

• Backend API: See BACKEND_API.md
• Project Setup: See README.md
• Support: backend@dx-projects.com