Refactor igx-ts side-nav-auth template to standalone components and angular-auth-oidc-client v21

[Copilot]

• Fix build errors: migrate to angular-auth-oidc-client v21 API
• Remove NgModule files and convert side-nav-auth to fully standalone structure
• Remove explicit standalone: true from Profile and Redirect
• Handle storedUser === "undefined" string in UserService constructor; wrap JSON.parse in try/catch to guard against malformed localStorage values
• Extract auth providers into provideAuthentication()
• Migrate spec files from Jasmine to Vitest syntax
• Simplify BaseOidcProvider to accept configId: string only; ExternalAuthConfig stripped of dead OIDC-specific fields — now only holds client_id and redirect_url (used by FacebookProvider)
• Fix route data shape mismatch: Redirect reads data['provider'] directly; ngOnInit has try/catch error handling
• Remove OidcConfigLoader; provideAuthentication() uses config: []; addGoogle()/addMicrosoft() no longer accept unused clientID parameter
• Externalize OIDC provider configurations into authentication/oidc-configs.ts; provideAuthentication() accepts OpenIdConfiguration[] parameter so configs come from an external source rather than being hardcoded; app.config.ts passes oidcConfigs from the new file
• Move social provider registration (addGoogle(), addMicrosoft(), addFacebook()) from App constructor into an ENVIRONMENT_INITIALIZER inside provideAuthentication(); App no longer injects ExternalAuth
• Update affected spec files (providers.spec.ts, services.spec.ts, redirect.spec.ts)
• Upgrade angular-auth-oidc-client from ~15.0.4 to ~21.0.1 (latest stable); replace importProvidersFrom(AuthModule.forRoot(...)) with provideAuth(...) in provide-authentication.ts; subscribe to the Observable<unknown> returned by logoff() in BaseOidcProvider

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor side navigation + authentication igx-ts template</issue_title>
<issue_description>Create Angular template with side navigation + authentication
There are a lot of errors thrown when build:

Refactor the Angular template with side navigation + authentication (only in the igx-ts folder)

• Fix build errors in the side-auth template
• Resolve failing tests after migration to Vite/Vitest
• Update template to be compatible with the new Vite configuration
• Convert template to standalone components

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refactor side navigation + authentication igx-ts template #1513

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

[coveralls]

coverage: 84.816%. remained the same
when pulling 6ba1589 on copilot/refactor-side-navigation-auth-template
into 3effa86 on master.

[Hristo313]

@copilot Remove the -module.ts files and update the template to use standalone structure without breaking the logic

[Copilot]

@copilot Remove the -module.ts files and update the template to use standalone structure without breaking the logic

Done in commit 740b8fe.

Removed all NgModule files:

• Deleted authentication-module.ts, authentication-routing-module.ts, authentication-module.spec.ts, and the obsolete app-module.ts
• Moved auth routes (profile, redirect-google/facebook/microsoft) into app.routes.ts
• Updated app.config.ts to use importProvidersFrom(AuthModule.forRoot({ config: [] })) + provideHttpClient(withInterceptorsFromDi()) + JWT/backend interceptors directly
• Added standalone: true to Profile and Redirect components
• Updated the barrel index.ts and affected specs (app.spec.ts, login-bar.spec.ts)

[Hristo313]

@copilot Remove the -module.ts files and update the template to use standalone structure without breaking the logic

Done in commit 740b8fe.

Removed all NgModule files:

• Deleted authentication-module.ts, authentication-routing-module.ts, authentication-module.spec.ts, and the obsolete app-module.ts
• Moved auth routes (profile, redirect-google/facebook/microsoft) into app.routes.ts
• Updated app.config.ts to use importProvidersFrom(AuthModule.forRoot({ config: [] })) + provideHttpClient(withInterceptorsFromDi()) + JWT/backend interceptors directly
• Added standalone: true to Profile and Redirect components
• Updated the barrel index.ts and affected specs (app.spec.ts, login-bar.spec.ts)

@copilot The standalone: true is not needed anymore. In user.service you should handle the case when storedUser is "undefined"

[Copilot]

@copilot Remove the -module.ts files and update the template to use standalone structure without breaking the logic

Done in commit 740b8fe.
...

Done in commit 2658cf5.

• Removed standalone: true from Profile and Redirect (redundant in Angular 17+)
• UserService now guards against the "undefined" string: storedUser && storedUser !== 'undefined' ? JSON.parse(storedUser) : null

[damyanpetev]

@copilot Don't move all of the previous config of AuthenticationModule into the main app config - it's job was to keep the authentication self-contained. Since we're not working with modules anymore, the modern approach for that would be to wrap the necessary config in something like provideAuthetication() that can be added to the config

[Copilot]

Done in commit 4582360. Created authentication/provide-authentication.ts with a provideAuthentication() function that encapsulates all auth-related providers (OIDC AuthModule, HTTP client with interceptors, JWT interceptor, fake backend). app.config.ts now simply spreads ...provideAuthentication(), keeping the auth setup self-contained.

[Hristo313]

@copilot Now, when we removed the AppModule we lost the third party providers logic for login that was commented (this.externalAuthService.addGoogle('<CLIENT_ID>' and others) We need...

Done in commit 09f09f8. Injected ExternalAuth into the App component constructor and restored the commented-out provider registration examples there — equivalent to what the old AppModule constructor had:

// this.externalAuthService.addGoogle();
// this.externalAuthService.addMicrosoft();
// this.externalAuthService.addFacebook('YOUR_FACEBOOK_CLIENT_ID');

Also cleaned up the remaining TODOs I introduced: the // TODO: DELETE THIS BEFORE PRODUCTION! in provide-authentication.ts was replaced with a descriptive comment, and the getUserInfo JSDoc was updated.

You should also revert the ExternalAuthConfig full logic and use it for google and microsoft as well

[Hristo313]

@copilot Refactor the authentication setup so that provideAuth can receive its configuration from an external source instead of being hardcoded. The idea is to store different provider settings (Google, Microsoft, etc.) in a separate file and pass them in as options when initializing authentication. This makes the setup flexible, reusable, and easier to maintain across environments.

[Copilot]

@copilot Refactor the authentication setup so that provideAuth can receive its configuration from an external source instead of being hardcoded. The idea is to store different provid...

Done in commit 24a7db3.

• Created authentication/oidc-configs.ts — contains commented-out OpenIdConfiguration templates for Google and Microsoft with real authority URLs, redirect URLs (using ExternalAuthRedirectUrl constants), and all required fields. A user enables a provider by uncommenting its config object and adding it to the exported oidcConfigs array.
• provideAuthentication(configs: OpenIdConfiguration[] = []) — now accepts an optional configs array; the hardcoded inline config was removed entirely.
• app.config.ts — imports oidcConfigs from ./authentication and passes it to provideAuthentication(oidcConfigs).
• authentication/index.ts — exports oidc-configs.ts so it's accessible from the barrel.

To activate Google login, a developer simply edits oidc-configs.ts, uncomments googleOidcConfig, fills in their client ID, and adds it to the oidcConfigs array — no changes needed in provide-authentication.ts or app.config.ts.

[Hristo313]

@copilot Move the injected logic for adding the third-party providers from the app.ts to the new oidc-config and provide-authentication

[Copilot]

@copilot Move the injected logic for adding the third-party providers from the app.ts to the new oidc-config and provide-authentication

Done in commit 6ba1589.

• provide-authentication.ts — added an ENVIRONMENT_INITIALIZER that injects ExternalAuth and contains the commented-out addGoogle(), addMicrosoft(), and addFacebook('YOUR_FACEBOOK_CLIENT_ID') calls with cross-reference instructions to oidc-configs.ts.
• app.ts — removed ExternalAuth import/injection and the social login comments entirely; App constructor now only takes Router.
• oidc-configs.ts — updated the step-3 instruction to reference provide-authentication.ts instead of app.ts.