Starting with basic angular SPA

The previous journals provide a journey, following the auth0’s angular SPA demo (https://auth0.com/docs/quickstart/spa/angular). Now, let’s start doing a project from scratch. This assumes that you have your auth0 tenant and SPA client ready.

1. Create an angular app

ng new auth0-sample
cd auth0-sample

2. Modify auth0-sample/src/app/app.config.ts and populate the values.

import { provideAuth0 } from "@auth0/auth0-angular";

export const appConfig: ApplicationConfig = {
	providers: [
		//...
		provideAuth0({
			domain: "your tenant domain",
			clientId: "your auth0 SPA client ID",
			authorizationParams: {
				redirect_uri: window.location.origin,
			},
		}),
	],
};

3. Modify auth0-sample/src/app/app.ts

import { AuthService } from "@auth0/auth0-angular";
//...
export class App {
	protected readonly auth = inject(AuthService);

	protected login(): void {
		this.auth.loginWithRedirect();
	}

	protected logout(): void {
		this.auth.logout({
			logoutParams: {
				returnTo: window.location.origin,
			},
		});
	}
}

4. Modify auth0-sample/src/app/app.html

@if (auth.isAuthenticated$ | async) {
<button type="button" (click)="logout()">Log out</button>

@if (auth.user$ | async; as user) {
<p>{{ user.name || user.email }}</p>
} } @else {
<button type="button" (click)="login()">Log in</button>
}

5. Just run npm start and log in