redirect and auth0 works but the API is rejecting the bearer token

.gitignore

@@ -33,8 +33,10 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+
+# secrets
 .env
-apps/thunder/src/environments/environment.ts
+apps/thunder/src/environments/auth0.secrets.ts
 
 # System Files
 .DS_Store

angular.json

@@ -243,7 +243,7 @@
       "projectType": "application",
       "root": "apps/thunder",
       "sourceRoot": "apps/thunder/src",
-      "prefix": "sample-playground",
+      "prefix": "snurbco",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -259,6 +259,7 @@
               "apps/thunder/src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "apps/thunder/src/styles.scss"
             ],
             "scripts": []

apps/thunder/src/app/app-routing.module.ts

@@ -1,23 +1,30 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './core';
+import { AuthGuard } from '@auth0/auth0-angular';
 
 const routes: Routes = [
   {
     path: '',
     loadChildren: () =>
-      import('./landing/landing.module').then((m) => m.LandingModule),
+      import('./pages/landing/landing.module').then((m) => m.LandingModule),
   },
   {
-    path: 'login',
+    path: 'app',
     loadChildren: () =>
-      import('./login/login.module').then((m) => m.LoginModule),
+      import('./thunder-app/features.module').then((m) => m.FeaturesModule),
+    canActivate: [AuthGuard],
   },
   {
-    path: 'app',
+    path: 'getting-started',
     loadChildren: () =>
-      import('./features/features.module').then((m) => m.FeaturesModule),
-    canActivate: [AuthGuard],
+      import('./pages/getting-started/getting-started.module').then(
+        (m) => m.GettingStartedModule
+      ),
+  },
+  {
+    path: 'features',
+    loadChildren: () =>
+      import('./pages/features/features.module').then((m) => m.FeaturesModule),
   },
 ];
 

apps/thunder/src/app/app.module.ts

@@ -1,7 +1,8 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AuthHttpInterceptor, AuthModule } from '@auth0/auth0-angular';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
@@ -33,9 +34,30 @@ import { mammothReducers } from './ngrx-store/reducers/mammoth.reducers';
     StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
     AgentsModule,
+    AuthModule.forRoot({
+      domain: environment.auth0_domain,
+      clientId: environment.auth0_client_id,
+      redirectUri: `${window.location.origin}/app`,
+      httpInterceptor: {
+        allowedList: [
+          {
+            uriMatcher: (uri) => {
+              console.log(uri);
+              return true;
+            },
+            uri: `api/*`,
+            // tokenOptions: {
+            //   audience: environment.auth0_audience,
+            // },
+          },
+        ],
+      },
+    }),
     CoreModule,
   ],
-  providers: [],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/thunder/src/app/components/buried-treasure-icon/buried-treasure-icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BuriedTreasureIconComponent } from './buried-treasure-icon.component';
+
+describe('BuriedTreasureIconComponent', () => {
+  let component: BuriedTreasureIconComponent;
+  let fixture: ComponentFixture<BuriedTreasureIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BuriedTreasureIconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuriedTreasureIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/thunder/src/app/components/buried-treasure-icon/buried-treasure-icon.component.ts

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'snurbco-buried-treasure-icon',
+  templateUrl: './undraw_treasure.svg',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BuriedTreasureIconComponent {}

apps/thunder/src/app/components/components.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { RouterModule } from '@angular/router';
+import { BuriedTreasureIconComponent } from './buried-treasure-icon/buried-treasure-icon.component';
+import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
+import { SecureLoginIconComponent } from './secure-login-icon/secure-login-icon.component';
+
+@NgModule({
+  declarations: [NavigationBarComponent, BuriedTreasureIconComponent, SecureLoginIconComponent],
+  imports: [CommonModule, MatButtonModule, MatToolbarModule, RouterModule],
+  exports: [NavigationBarComponent, BuriedTreasureIconComponent, SecureLoginIconComponent],
+})
+export class ComponentsModule {}

apps/thunder/src/app/components/navigation-bar/navigation-bar.component.html

@@ -0,0 +1,12 @@
+<div>
+  <mat-toolbar>
+    <span>Thunder</span>
+    <span class="spacer"></span>
+    <a routerLink="features"
+      ><button mat-button [ngStyle]="{ color: 'white' }">Features</button></a
+    >
+    <a routerLink="getting-started"
+      ><button mat-button [ngStyle]="{ color: 'white' }">Log in</button></a
+    >
+  </mat-toolbar>
+</div>

apps/thunder/src/app/components/navigation-bar/navigation-bar.component.scss

@@ -0,0 +1,3 @@
+.spacer {
+  flex: 1 1 auto;
+}

apps/thunder/src/app/components/navigation-bar/navigation-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationBarComponent } from './navigation-bar.component';
+
+describe('NavigationBarComponent', () => {
+  let component: NavigationBarComponent;
+  let fixture: ComponentFixture<NavigationBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavigationBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/thunder/src/app/components/navigation-bar/navigation-bar.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'snurbco-navigation-bar',
+  templateUrl: './navigation-bar.component.html',
+  styleUrls: ['./navigation-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationBarComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

apps/thunder/src/app/components/secure-login-icon/secure-login-icon.component.html

@@ -0,0 +1 @@
+<p>secure-login-icon works!</p>

apps/thunder/src/app/components/secure-login-icon/secure-login-icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SecureLoginIconComponent } from './secure-login-icon.component';
+
+describe('SecureLoginIconComponent', () => {
+  let component: SecureLoginIconComponent;
+  let fixture: ComponentFixture<SecureLoginIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SecureLoginIconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SecureLoginIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/thunder/src/app/components/secure-login-icon/secure-login-icon.component.ts

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'snurbco-secure-login-icon',
+  templateUrl: './undraw_secure_login.svg',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SecureLoginIconComponent {}