Upgrade Okta Angular SDK to 3.0.1

notes/package.json

@@ -19,8 +19,8 @@
     "@angular/platform-browser": "~11.0.0",
     "@angular/platform-browser-dynamic": "~11.0.0",
     "@angular/router": "~11.0.0",
-    "@okta/okta-angular": "1.4.0",
-    "@oktadev/schematics": "^1.2.1",
+    "@okta/okta-angular": "3.0.1",
+    "@oktadev/schematics": "^3.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

notes/src/app/app.component.spec.ts

@@ -1,22 +1,25 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { OktaAuthModule } from '@okta/okta-angular';
+import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
 
 describe('AppComponent', () => {
+  const oktaConfig = {
+    issuer: 'https://not-real.okta.com',
+    clientId: 'fake-client-id',
+    redirectUri: 'http://localhost:4200'
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        OktaAuthModule.initAuth({
-          issuer: 'https://not-real.okta.com',
-          clientId: 'fake-client-id',
-          redirectUri: 'http://localhost:4200'
-        })
+        OktaAuthModule
       ],
       declarations: [
         AppComponent
       ],
+      providers: [{provide: OKTA_CONFIG, useValue: oktaConfig}]
     }).compileComponents();
   }));
 
@@ -36,6 +39,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('notes app is running!');
+    expect(compiled.querySelector('.content span').textContent).toContain('notes app is running!');
   });
 });

notes/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { OktaAuthService } from '@okta/okta-angular';
 })
 export class AppComponent implements OnInit {
   title = 'notes';
-  isAuthenticated: boolean;
+  isAuthenticated: boolean = false;
 
   constructor(public oktaAuth: OktaAuthService) {
   }

notes/src/app/auth-routing.module.ts

@@ -9,9 +9,9 @@ import { AuthInterceptor } from './shared/okta/auth.interceptor';
 
 const oktaConfig = {
   issuer: 'https://dev-133320.okta.com/oauth2/default',
-  redirectUri: window.location.origin + '/callback',
+  redirectUri: '/callback',
   clientId: '0oa6a3af75tcbuvxS357',
-  pkce: true
+  scopes: ['openid', 'profile']
 };
 
 const routes: Routes = [

notes/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div>
-  <button *ngIf="!isAuthenticated" (click)="oktaAuth.loginRedirect()">Login</button>
+  <button *ngIf="!isAuthenticated" (click)="oktaAuth.signInWithRedirect()">Login</button>
   <p><a routerLink="/notes" *ngIf="isAuthenticated">View Notes</a></p>
-  <button *ngIf="isAuthenticated" (click)="oktaAuth.logout()">Logout</button>
+  <button *ngIf="isAuthenticated" (click)="oktaAuth.signOut()">Logout</button>
 </div>

notes/src/app/home/home.component.spec.ts

@@ -1,24 +1,25 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { HomeComponent } from './home.component';
-import { OktaAuthModule } from '@okta/okta-angular';
+import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
 import { RouterTestingModule } from '@angular/router/testing';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
+  const oktaConfig = {
+    issuer: 'https://not-real.okta.com',
+    clientId: 'fake-client-id',
+    redirectUri: 'http://localhost:4200'
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
+      declarations: [HomeComponent],
       imports: [
         RouterTestingModule,
-        OktaAuthModule.initAuth({
-          issuer: 'https://not-real.okta.com',
-          clientId: 'fake-client-id',
-          redirectUri: 'http://localhost:4200'
-        })
-      ]
+        OktaAuthModule
+      ],
+      providers: [{provide: OKTA_CONFIG, useValue: oktaConfig}]
     })
       .compileComponents();
   }));

notes/src/app/home/home.component.ts

@@ -7,7 +7,7 @@ import { OktaAuthService } from '@okta/okta-angular';
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-  isAuthenticated: boolean;
+  isAuthenticated: boolean = false;
 
   constructor(public oktaAuth: OktaAuthService) {
   }

notes/src/app/shared/okta/auth.interceptor.ts

@@ -13,11 +13,11 @@ export class AuthInterceptor implements HttpInterceptor {
     return from(this.handleAccess(request, next));
   }
 
-  private async handleAccess(request: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {
+  private handleAccess(request: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {
     // Only add an access token to whitelisted origins
     const allowedOrigins = ['http://localhost'];
     if (allowedOrigins.some(url => request.urlWithParams.includes(url))) {
-      const accessToken = await this.oktaAuth.getAccessToken();
+      const accessToken = this.oktaAuth.getAccessToken();
       request = request.clone({
         setHeaders: {
           Authorization: 'Bearer ' + accessToken