pkce_code_verifier

state

/signup

localStorage

sessionStorage

debug=true

code

pkce_code_verifier

state

import { Component, ChangeDetectorRef, AfterViewInit, NgZone, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { environment } from '../../environments/environment';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'app-signup-flow',
  standalone: true,
  imports: [CommonModule, FormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './signup-flow.html',
  styleUrls: ['./signup-flow.css']
})
export class SignupFlow implements OnInit, AfterViewInit {
  public environment = environment;
  private initInterval: any;
  
  // Store URL params separately - don't use them to control initialization
  private urlParams = { code: '', state: '' };
  
  currentScreen = '';
  showCustomScreen = false;
  isDescopeInitialized = false; // Renamed for clarity
  nextFn: ((interactionId: string, data?: any) => Promise<void>) | null = null;
  errorText = '';
  isLoading = false;
  
  customerId: string | null = null;
  form = { fullName: '', email: '', newPassword: '', confirmPassword: '' };

  constructor(
    private cdr: ChangeDetectorRef,
    private ngZone: NgZone,
    public router: Router,
    private route: ActivatedRoute,
    private http: HttpClient
  ) {}

  ngOnInit() {
    // Capture the code and state from URL, but don't let it affect Descope initialization
    const code = this.route.snapshot.queryParamMap.get('code');
    const state = this.route.snapshot.queryParamMap.get('state');
    
    console.log("Code from URL:", code);
    console.log("State from URL:", state);
    
    if (code) {
      this.urlParams = { code, state: state || '' };
    }
    
    // Always load session data for the form
    this.customerId = sessionStorage.getItem('signup_customer_id');
    this.form.fullName = sessionStorage.getItem('signup_name') || '';
    this.form.email = sessionStorage.getItem('signup_email') || '';
  }

  ngAfterViewInit() {
    // ALWAYS initialize Descope, regardless of whether code is present
    this.initInterval = setInterval(() => {
      const descopeElement = document.querySelector('descope-wc') as any;
      if (descopeElement && !this.isDescopeInitialized) {
        this.initializeDescope(descopeElement);
        clearInterval(this.initInterval);
      }
    }, 50);
    
    setTimeout(() => clearInterval(this.initInterval), 5000);
  }

  private initAttempts = 0;
  
  initializeDescope(descopeElement: any) {
    if (!descopeElement) return;
    
    descopeElement.setAttribute('project-id', environment.descopeProjectId);
    descopeElement.setAttribute('flow-id', environment.descopeFlowId);
    
    descopeElement.onScreenUpdate = (screenName: string, state: any, next: any) => {
      this.ngZone.run(() => {
        // Handle empty screen name (Descope not ready)
        if (!screenName || screenName === "") {
          if (this.initAttempts < 5) {
            this.initAttempts++;
            console.warn(`Attempt ${this.initAttempts}: Screen name empty. Retrying...`);
            setTimeout(() => {
              // Just trigger a re-check without navigation
              const elem = document.querySelector('descope-wc') as any;
              if (elem && elem.refresh) {
                elem.refresh();
              }
            }, 500);
            return;
          }
        }
        
        // Successfully got a screen name
        this.currentScreen = screenName;
        this.nextFn = next;
        this.showCustomScreen = true; 
        this.isDescopeInitialized = true;
        this.initAttempts = 0;
        this.cdr.detectChanges();
      });
      return true; 
    };
  }

  async onSignupFormSubmit(event: Event) {
    if (event) event.preventDefault();
    if (!this.nextFn) {
      this.errorText = 'Signup flow not ready. Please refresh the page.';
      return;
    }

    this.isLoading = true;
    this.errorText = '';

    try {
      const data = {
        fullName: this.form.fullName,
        email: this.form.email,
        password: this.form.newPassword,
        customAttributes: { customerId: this.customerId }
      };

      // Step 1: Complete the Descope signup
      console.log('Submitting to Descope...');
      const result: any = await this.nextFn(environment.signupFlowInteractionID, data);
      console.log('Descope signup step successful:', result);

      // Step 2: Exchange the code for tokens
      if (this.urlParams.code && result && !result.error) {
        console.log('Proceeding to backend exchange with code:', this.urlParams.code);
        const token:any = await this.handleFinalExchange(this.urlParams.code, this.urlParams.state);
        console.log("---------->token", token);
        if (token) {
          console.log('Signup and exchange successful, navigating to dashboard');
          this.router.navigate(['/dashboard']);
        }
        
      } else {
        throw new Error("No authorization code found. Please start the signup process again.");
      }
    } catch (error: any) {
      console.error('Signup/Exchange Error:', error);
      this.errorText = error.message || 'Signup failed';
      this.isLoading = false;
      this.cdr.detectChanges();
    }
  }

  async handleFinalExchange(code: string, state: string | null): Promise<any> {
  const savedState = sessionStorage.getItem('pkce_state');
  const codeVerifier = sessionStorage.getItem('pkce_code_verifier');

  if (state && savedState && state !== savedState) {
    throw new Error("Security state mismatch.");
  }
  if (!codeVerifier) {
    throw new Error("Code verifier not found. Please start the signup process again.");
  }

  // Let the error bubble up to onSignupFormSubmit's catch block
  return await this.exchangeCodeForToken(code, codeVerifier);
}

  private async exchangeCodeForToken(code: string, codeVerifier: string): Promise<any> {
  const response = await firstValueFrom(
    <http://this.http.post|this.http.post><any>(`${environment.backendBaseUrlCPEGateway}/api/v1/auth/direct/exchange-code`, {
      code,
      codeVerifier
    })
  );

  if (response.data.accessToken) {
    localStorage.setItem('access_token', response.data.accessToken);
    sessionStorage.removeItem('pkce_code_verifier');
    sessionStorage.removeItem('pkce_state');
    sessionStorage.removeItem('signup_customer_id');
    sessionStorage.removeItem('signup_name');
    sessionStorage.removeItem('signup_email');
  }

  return response;
}

  ngOnDestroy() {
    if (this.initInterval) {
      clearInterval(this.initInterval);
    }
  }
}