Angular - Create Private Pages that are accessible only after Authorization

Technical Questions
1

  1. With the Angular CLI, create a LandingPageComponent or Any other page component that you want to be private:

    ng g c LandingPage

  2. Add the below imports to app.module.ts

    import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    LandingPageComponent,
    ...
  ],
  imports: [
    ...
    HttpClientModule,
    BuilderModule.forRoot('Builder-Public-API-Key')
  ],
  providers: [],
  bootstrap: [AppComponent]
})

  3. Generate Builder Private key

private key

  1. Go over to builder.io/models and choose your model and hit show more options under model settings and then find the public readable option and turn that off and save your model, e.g. perhaps make a new private-page model of page type with this setting switched off.

    Screenshot 2023-01-18 at 8.59.19 PM
    Screenshot 2023-01-18 at 8.59.19 PM2880×1416 318 KB

  2. From src → app → landing-page ->. Open landing-page.component.ts and add or replace content with below code

    import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent implements OnInit {
  noBuilderPageForUrl: boolean = false;
  builderRSP: Observable<any> | undefined;

  constructor(private http:HttpClient){ }
  
  // Replace the builder-api-key and private key from your own space. 
  ngOnInit():void {
    let apiUrl = 'https://cdn.builder.io/api/v2/content'
    let modelName = 'page'
    this.builderRSP = this.http.get<any>(`${apiUrl}/${modelName}?apiKey=builder-api-key&limit=1&userAttributes.urlPath=/`,{
      headers: { Authorization: `Bearer bpk-private-key` },
    }).pipe(map(data => data.results[0]))
  }

}

Note: In case you get Error: Module not found: Error: Can’t resolve ‘@angular/elements’,

To resolve this install dependency for @angular/elements using below command

npm i --save @angular/elements

Repo: GitHub - Manic-sh/builder-angular-private-pages: Builder Integration with angular, private page example