feature-angular-authentication

Complete user authentication for Angular UI Bundles: login, registration, password management, session timeout, and route protection.

This feature ships:

• authGuard — a functional route guard that protects authenticated-only routes.
• AuthService — an injectable service that resolves the current user and manages auth state.
• AuthAppLayoutComponent — a route layout for the authenticated shell.
• Authentication pages — Login, Register, Profile, Forgot Password, Reset Password, Change Password.
• Apex classes — the server-side handlers (UIBundleLogin, UIBundleRegistration, UIBundleForgotPassword, UIBundleChangePassword, UIBundleAuthUtils).

Built with Angular standalone components, signals, and Reactive Forms.

Features

• Checks authentication status via UI API GraphQL (uiapi.currentUser).
• Protects routes with authGuard, redirecting unauthenticated users to login.
• Supports a return URL (retUrl) query parameter for post-login navigation.
• Session timeout with a configurable duration.
• Password strength validation via hand-written reactive-form validators.
• Forgot password and reset password flows.
• User profile display and change-password functionality.

Install

npx @salesforce/ui-bundle-features-experimental install angular-authentication --ui-bundle-dir <your-ui-bundle>

This copies the authentication library, the auth pages, the profile GraphQL service, and the Apex handler classes into your project. It also copies the feature's route file to src/app/features/authentication/__example__authentication-routes.ts as an integration example — the CLI lists it as an __example__ file to review, merge, and delete.

Usage

Protecting routes

Add the auth routes from the example file into your app's route file (src/app/app.routes.ts). The top-level layout node swaps to AuthAppLayoutComponent, and protected routes use canActivate: [authGuard]:

import { Routes } from "@angular/router";
import { AuthAppLayoutComponent } from "./features/authentication/...";
import { authGuard } from "./features/authentication/auth/auth.guard";
import { ProfilePageComponent } from "./pages/profile/profile-page";

export const routes: Routes = [
  {
    path: "",
    component: AuthAppLayoutComponent,
    children: [
      { path: "login", loadComponent: () => import("./pages/login/login-page") },
      { path: "register", loadComponent: () => import("./pages/register/register-page") },
      {
        path: "profile",
        canActivate: [authGuard],
        component: ProfilePageComponent,
      },
      // ...forgot-password, reset-password, change-password
    ],
  },
];

The feature's route file (copied on install to __example__authentication-routes.ts) shows the full route set — merge it into your own route file rather than replacing it, so your existing routes are preserved, then delete the example file.

Reading auth state

Inject AuthService in any component to read the current user and auth state:

import { Component, inject } from "@angular/core";
import { AuthService } from "./features/authentication/auth/auth.service";

@Component({/* ... */})
export class MyComponent {
  private readonly auth = inject(AuthService);

  readonly user = this.auth.user; // signal
  readonly isAuthenticated = this.auth.isAuthenticated; // signal
}

Local preview limitations

Some authentication surfaces only work on the deployed Experience site, not in local preview (npm run dev on http://localhost). This is expected: the local dev server proxies requests to the org outside the Experience site's guest/community context, so the site session does not exist.

| Surface | Local preview (localhost) | Deployed site | | -------------------------------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------- | | Login / registration / password flows | The site session cannot be established, so these fail with a generic message. | Work — the platform completes the flow. | | MFA challenge | The site session cannot be established, so login fails with a generic message. | Works — the platform renders and completes the challenge. | | Current-user check (uiapi.currentUser) | Works — the local dev proxy forwards GraphQL calls with the CLI-authenticated user. | Works |

How to test these: open the published site login page, e.g. https://<your-domain>.site.com/<site-path>/login. The login failure above is expected locally and is not a misconfiguration.

Notes

• Routes integrate by merging the feature's app.routes.ts into your app's route file — the top-level layout node swaps to AuthAppLayoutComponent, and the auth routes are appended alongside your existing routes.
• The Apex classes deploy to your project's classes/ directory and are required for the login/registration/password flows to work server-side.
• This feature is dependency-free at the package level — Angular, the router, and forms are provided by the base app.

Development

# Build the feature (applies patches from template to dist)
npm run build

# Type-check
npm run typecheck