TutorialsPrivate page

Once user is authenticated, you can build private routes like a user dashboard, account, etc.

If you want to make protected API calls, follow this tutorial.

The auth.guard.ts in /guards ensures any pages & subpages are private. If the user is not authenticated, they'll be redirected to the login page (see auth in config.ts)

Here's an example of a simple user dashboard showing private user data:

/src/app/pages/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  todos: any[] = [];
  isLoading = true;

  constructor(private apiService: ApiService) {}

  async ngOnInit() {
    try {
      const { data, error } = await this.apiService.getTodos();
      if (error) {
        console.error('Error fetching todos:', error);
      } else {
        this.todos = data;
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      this.isLoading = false;
    }
  }
}

/src/app/pages/dashboard.component.html

<main class="min-h-screen p-8 pb-24">
  <section class="max-w-xl mx-auto space-y-8">
    <h1 class="text-3xl md:text-4xl font-extrabold">Private Page</h1>

    <div *ngIf="isLoading">Loading...</div>
    <pre *ngIf="!isLoading">{{ todos | json }}</pre>
  </section>
</main>

Tutorials Private page

TutorialsPrivate page