I woke up a bit early today. I was really fatigued and had to turn in early yesterday. The fact that a skeleton Angular project of the Secrets Manager was up and running so quickly gave me the comfort I needed to know that I was somewhat productive with the limited time I had available to work on it.

Code Splitting

I often try to split my code where I can. This process of chunking the code allows you to setup a website so that content is not loaded until it is needed. For example, the library to create a QR code isn’t needed unless you are setting up two-factor authentication. I can exclude it so that the code is not loaded until someone goes to configure 2FA.

I had briefly tried to setup code splitting in Angular, but hadn’t gotten it working. Today I created a new route from scratch and looked into the problem a bit more. I had already gotten the first step down to add it to my routes, which is where I started today.

import { Routes } from '@angular/router';
import { HomeComponent } from './app/home/home.component';
import { LoginComponent } from './app/login/login.component';
import { TfaComponent } from './app/tfa/tfa.component';
import { AuthGuard } from './AuthGuard';
import { TfaGuard } from './TfaGuard';

const allFactors = [
  AuthGuard,
  TfaGuard
]
export const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: allFactors },
  { path: 'login', component: LoginComponent },
  { path: 'tfa', component: TfaComponent, canActivate: [AuthGuard] },
  {
    path: 'status',
    loadChildren: () => import('./app/status/status.module')
      .then(m => m.StatusModule)
  }
];

The hoop that I was stuck on previously was using a module. I hadn’t set them up yet, so I was flying a bit blind. The route can’t import a component – it has to import a module. From there, the module exports its own route that loads the component.

import { NgModule } from '@angular/core';
import { StatusComponent } from './status.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: StatusComponent, canActivate: [] }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    StatusComponent
  ],
  exports: [
    RouterModule
  ],
})
export class StatusModule { }

And tada! I now have a status page that load chunks of extra JavaScript only when requested.

I’m glad I got that down. Code-splitting is a bit part of optimizing websites to load quicker and reduce overall bandwidth.

Breakfast

Well, it’s 5:00 AM and my alarm just went off. I need to get ready to serve breakfast. I’ve got a whole lot of events to tend to today, some practice, as well as hosting the Lego Users Group.

Back

I’ve added the encryption page to check if a key exists, display the status of the key in regards to misconfiguration problems, create a new key, or replace the existing one.

Although the endpoints were previously setup, I ran into a bit of problems with more thorough testing. One of the main points I focused on was rotating the database encryption when the key is replaced. Not only do I change the encryption, but now I’m also verifying that the encryption did not fail, and that the decrypted value of both the original and newly encrypted content both decrypt to the same value.

I went ahead and added the forms for editing the database and cache server. In addition, the individual status check is also displayed telling me explicitly where a problem may occur. A few things were changed on the back-end to verify more of the information is valid before committing changes. To make things a bit simpler, I added a button to generate pepper values with the Web Crypto API and display it as base64 with btoa. The pepper value is used as part of the hash for the cache servers variable names.

Wrap Up

• Setup code splitting for multiple routes
• Display status of all parts to make up the application.
• Create custom route guards to allow deny non-authenticated accounts if corresponding settings are configured correctly.
• Generate/Replace encryption key and display status
• Display database credentials and status. Add ability to save.
• Display cache server connection settings, pepper, and status. Add ability to save.

Things to work on

Tomorrow I’ll work on the recovery script itself, and key management off-side. I may go ahead and setup dropbox for a persistent link that doesn’t expire every few hours. I also need to setup a page to edit and save secrets.