Integrating Authentication with OpenID Connect in Module Federation#

Introduction#

Module Federation enhances the management of shared code and state across micro frontends. This guide will walk you through adding authentication to your project using OpenID Connect with Okta. By the end of this documentation, your application will be able to handle authenticated states both within the existing application and a newly integrated micro frontend.

Prerequisites#

• A free Okta developer account. If you do not have one, you can sign up using the Okta CLI.
• Okta CLI installed on your machine.

Setting Up Okta Authentication#

Create an Okta Application#

Configure Application in Okta#

The Okta CLI creates an OIDC SPA in your Okta Org, configures redirect URIs, grants access to the Everyone group, and adds http://localhost:4200 as a trusted origin.

Okta Application Configuration Example:

• Issuer: https://dev-12345.okta.com/oauth2/default
• Client ID: 0oab12345CDEF

Install Required Libraries#

Add Okta Angular and Okta Auth JS libraries to your project:

npm install @okta/okta-angular@5.2 @okta/okta-auth-js@6.4

Configure Okta in Angular Module#

Import and configure OktaAuthModule and OktaAuth in your shell project's AppModule. Replace {yourOktaDomain} and {yourClientID} with your specific Okta domain and client ID.

import { NgModule } from '@angular/core';
import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

const oktaAuth = new OktaAuth({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{yourClientID}',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email']
});

@NgModule({
  imports: [
    OktaAuthModule,
    // other imports
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: { oktaAuth } }
  ],
  // other module properties
})

Configure Routing for Authentication#

Update the app-routing.module.ts to include the login callback route.

import { Routes } from '@angular/router';
import { OktaCallbackComponent } from '@okta/okta-angular';

const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'basket', loadChildren: () => import('mfeBasket/Module').then(m => m.BasketModule) },
  { path: 'login/callback', component: OktaCallbackComponent }
];

Implementing Authentication Logic#

Update Application Component#

Modify app.component.ts to include sign-in and sign-out logic, utilizing the Okta libraries. Update the authentication state variables accordingly.

import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map, shareReplay } from 'rxjs/operators';
import { OKTA_AUTH, OktaAuthStateService } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public isAuthenticated$: Observable<boolean>;
  public name$: Observable<string>;

  constructor(private oktaStateService: OktaAuthStateService, @Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {
    this.isAuthenticated$ = this.oktaStateService.authState$
      .pipe(
        filter(authState => !!authState),
        map(authState => authState.isAuthenticated ?? false),
        shareReplay()
      );

    this.name$ = this.oktaStateService.authState$
      .pipe(
        filter(authState => !!authState && !!authState.isAuthenticated),
        map(authState => authState.idToken?.claims.name ?? '')
      );
  }

  public async signIn(): Promise<void> {
    await this.oktaAuth.signInWithRedirect();
  }

  public async signOut(): Promise<void> {
    await this.oktaAuth.signOut();
  }
}

Handle Sign-In and Sign-Out in the UI#

In app.component.html, add the UI logic for sign-in and sign-out buttons.

<li>
  <button *ngIf="(isAuthenticated$ | async) === false; else logout" (click)="signIn()">
    Sign In
  </button>

  <ng-template #logout>
    <button (click)="signOut()">
      Sign Out
    </button>
  </ng-template>
</li>

Testing the Application#

Run the project using npm run start (or the appropriate command for your setup) to test authentication functionality. Successful implementation allows users to sign in and out, with the profile information being accessible upon signing in.

Adding User Profiles with Module Federation#

This section expands on incorporating Module Federation to share authenticated state across the main application and the micro-frontend. We'll explore how to set up a new Angular application, configure routing, and update components to include profile details.

ng generate application mfe-profile --routing --style css --inline-style --skip-tests

ng generate component home --project mfe-profile
ng generate module profile --project mfe-profile --module app --routing --route profile

Updating the Application Code#

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }
];

Profile Component Configuration#

Integrating Module Federation#

ng add @angular-architects/module-federation --project mfe-profile --port 4202

Running the Integrated Application#

After configuring Module Federation and updating both the shell and micro-frontend applications, you can run the project using npm run run:all.

This setup allows you to log in, view your profile, log out, and interact with other parts of the application seamlessly across the main and micro-frontend parts.