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; addGoogle()/addMicrosoft() no longer accept unused clientID parameter
• Auth redirect routes extracted into AUTH_ROUTES and exported from the authentication barrel; registered in app.routes.ts as children of { path: 'auth', children: AUTH_ROUTES }
• provideAuthentication() now accepts a typed AuthProviders object ({ google?, microsoft?, facebook? }); builds OIDC configs and registers social providers automatically — app.config.ts is the single modification point for enabling providers, no other file needs to change
• Removed oidc-configs.ts; OIDC configuration is now built inside provideAuthentication() based on the credentials passed in, eliminating the need to uncomment in multiple places
• 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, login-bar.spec.ts, login.spec.ts, register.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

<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)

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 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.

[damyanpetev]

Would be neater if those are exported by the main auth barrel as something like AUTH_ROUTES for example and maybe registered in the app as children of

path: 'auth',
    children: AUTH_ROUTES

[Copilot]

Done in commit 842d26e. Created authentication/auth.routes.ts that exports AUTH_ROUTES (profile + all redirect routes). In app.routes.ts they are now registered as { path: AUTH_BASE_PATH, children: AUTH_ROUTES }, so all auth callback and profile URLs live under /auth/....

[damyanpetev]

If that's just imported to be passed down, it really doesn't do much. Would much rather have those tucked away behind the provide call if nothing is meant to be changed here by the user.

[Copilot]

Done in commit 842d26e. oidcConfigs is no longer imported or passed from app.config.ts — OIDC configuration is now fully encapsulated inside provideAuthentication().

[damyanpetev]

Oh, that doesn't work quite like it used to. The old idea was to have this be the only modification point the user needs to apply without really touching anything under the auth folder, but I suppose that's not critical. Just saying, I'd move those into the provide call and have them trigger the respective full configs when passed in

[Copilot]

Done in commit 842d26e. provideAuthentication() now accepts a typed AuthProviders object with optional google, microsoft, and facebook credential entries. When a provider is supplied, both the OIDC config and the addGoogle/addMicrosoft/addFacebook call are triggered automatically — the user only needs to uncomment one line in app.config.ts.

[damyanpetev]

Okay, that's odd too, so you need to uncomment in two places?
See previous comment on provide I guess

[Copilot]

oidc-configs.ts has been deleted. The configuration now lives entirely in provideAuthentication() — uncommenting one entry in app.config.ts is the only step needed to enable a provider.

[Hristo313]

@copilot Fix the latest comments

[Copilot]

@copilot Fix the latest comments

Done in commit 842d26e. All four comments addressed: AUTH_ROUTES exported from the auth barrel and registered as children of { path: 'auth' }; oidcConfigs removed from app.config.ts; oidc-configs.ts deleted; single modification point in app.config.ts (uncomment one entry in provideAuthentication({ ... })).