javascript - Get Dynamic Values in app.module.ts for Angular Application

Question

I'm using the angularx-social-login package for social login purposes in my application. As per the documentation, I've to pass the google and Facebook client id within app.module.ts. But that's where my problem starts because I need to keep that dynamic and fetch the id's from cookies instead of passing the client id as a static string. To make it dynamic I tried to make a service and also export a function in app.module but nothing seems to work. When making an export function I can't pass cookies within it since there is no constructor to initialize the cookies and when passing the function through a service I cannot exclusively call it in app.module since I need to first create an instance of the service to call the service methods. Have been stuck with it for days now. Any sort of idea will be appreciated.

app.module.ts

 let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")  //need to make this dynamic
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("xxxxxxxxxx") //need to make this dynamic
  }
]);
  
export function provideConfig() {
  return config;
}

service to fetch dynamic data

import { Injectable,Inject} from '@angular/core';
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";
import { CookieService } from 'ngx-cookie';

@Injectable({ providedIn: 'root' })
export class AppSocialLoginService { 

    public google;
    public facebook;
    public tempCookie;

    constructor(private _cookiesService:CookieService) { 
        this.tempCookie = this._cookiesService.getObject('globalData');
     }

     getGoogle() {
        if (this.tempCookie && this.tempCookie.hasOwnProperty('google_login_client_id')) {
            this.google = this.tempCookie['google_login_client_id'];
            return this.google;
          }
     }

     getFacebook() {
        if (this.tempCookie && this.tempCookie.hasOwnProperty('fb_login_id')) {
            this.facebook = this.tempCookie['fb_login_id'];
            return this.facebook;
          }
    }

     provideConfig() {
        let config = new AuthServiceConfig([
            {
              id: GoogleLoginProvider.PROVIDER_ID,
              provider: new GoogleLoginProvider(this.getGoogle())
            },
            {
              id: FacebookLoginProvider.PROVIDER_ID,
              provider: new FacebookLoginProvider(this.getFacebook())
            }
          ]);
    
          return config;
     } // cannot export this function in app.module since it's already in a class

 }

Tried to make a function and export it to app.module but then the problem is I cannot initialize a constructor and get the cookies to pass inside the function

    export function provideConfig() {
    let config = new AuthServiceConfig([
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider("xxxxxxxxxxxxxxxxxxxxxxxxxx") //can't receive cookies in this
        },
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider("xxxxxxxxxxxxxxxxxxx") //can't receive cookies in this
        }
      ]);

      return config;
 }

question from:https://stackoverflow.com/questions/65858364/get-dynamic-values-in-app-module-ts-for-angular-application

Answer 1

Waitting for answers