AuthService basic usage

Let’s revisit the sample login SPA again from auth0.

1. main.ts bootstraps the app, with the app config, including auth0 provider data that includes domain, clientId, and redirect_uri. The app uses this along with the auth0 angular SDK to communicate with your auth0 tenant.

2. You can inject AuthService from any standalone component to access the auth0 angular service. For example:

   • In login-button.ts
     • The service is injected via private auth = inject(AuthService);
     • Clicking the login button calls this.auth.loginWithRedirect();, which redirects the user to auth0 login page
   • In logout-button.tS, this is used: this.auth.logout()
   • In app.ts and profile.ts, the same auth0 Angular service is used to check for successful and failed authentication.

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── app
│   │   ├── app.config.ts
│   │   ├── app.css
│   │   ├── app.html
│   │   ├── app.routes.ts
│   │   ├── app.spec.ts
│   │   ├── app.ts
│   │   └── components
│   │       ├── login-button
│   │       │   └── login-button.ts
│   │       ├── logout-button
│   │       │   └── logout-button.ts
│   │       └── profile
│   │           └── profile.ts
│   ├── environments
│   │   └── environment.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json