How to put dynamic Facebook and google CLIENT ID on angularx-social-login?

Question

I have used angularx-social-login for login as a facebook and google. But my requirement is:- I have get the client id through API's response. Using this package pass the client id on app.module.ts.Like this:-

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";

let config = new AuthServiceConfig([
 {
  id: GoogleLoginProvider.PROVIDER_ID,
  provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
 },
 {
  id: FacebookLoginProvider.PROVIDER_ID,
  provider: new FacebookLoginProvider('Facebook-App-Client-Id')
 }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
   AppComponent
  ],
  imports: [
    SocialLoginModule
  ],
  providers: [
  {
    provide: AuthServiceConfig,
    useFactory: provideConfig
  }
 ],
  entryComponents: [],
  bootstrap: []
})
export class AppModule { }

So please tell me how to pass client id dynamic. Using Api's

Answer 1

I haven't tried this but it should work

// define your social login details

config = new AuthServiceConfig([
 {
  id: GoogleLoginProvider.PROVIDER_ID,
  provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
 },
 {
  id: FacebookLoginProvider.PROVIDER_ID,
  provider: new FacebookLoginProvider('Facebook-App-Client-Id')
 }
]);


constructor(private authService: AuthService) { 
    this.authService(this.config); // pass your social details directly here
}

Answer 2

Here is example how to load clienId from server.

const socialConfigFactory = (restService: MyRestService) => {
    return restService.getClientConfig().pipe(map(config => {
        let providers = [];

        if (config.clientId.length > 0) {
            providers.push({
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                    config.clientId
                ),
            });
        }

        return {
            autoLogin: false,
            providers: providers,
        } as SocialAuthServiceConfig;
    })).toPromise();
};

@NgModule({
    imports: [
        BrowserAnimationsModule,
        BrowserModule,
        CoreModule,
        SocialLoginModule,
        AppRoutingModule
    ],

    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent],
    providers: [
        {
            provide: 'SocialAuthServiceConfig',
            useFactory: socialConfigFactory,
            deps: [MyRestService]
        }
    ]
})
export class AppModule {
}

Service could look like this:

class ClientConfig {
    clientId: string;
}

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

    constructor(private http: HttpClient) {}
    /*
    * server returns { clientId: "client-id" }
    */
    getClientConfig() {
        return this.http.get<ClientConfig>(`${environment.apiUrl}/config/from-server`);
    }
}