# 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. :::tip NOTE The _Okta Admin Console_ can also be used for app creation. For Angular apps, refer to the Okta documentation on creating an Angular application. ::: **Okta Application Configuration Example:** - _Issuer:_ `https://dev-12345.okta.com/oauth2/default` - _Client ID:_ `0oab12345CDEF` :::tip NOTE Ensure you note down the _Issuer_ and _Client ID_; these are crucial for your application's configuration. ::: ### Install Required Libraries Add Okta Angular and Okta Auth JS libraries to your project: ```bash 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. ```typescript 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. ```typescript 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. ```typescript 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. ```html <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. ### Updating the Application Code ### Profile Component Configuration ### Integrating Module Federation ### 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.