skip to content
Alvin Lucillo

Basic login angular SPA with auth0

/ 2 min read

One of the uses of auth0 is to authenticate login. Auth0 provides a documentation to get started with a simple login SPA (single page application). Follow the steps here: https://auth0.com/docs/quickstart/spa/angular

Notes:

  • You can skip the instruction to use auth0/agent-skills if you want to set this up yourself.
  • ng generate component commands from the steps may create different file name from the expected component file names (e.g., mine is login-button.ts but the documentation expects profile.component.ts). This is fine. Just only make sure that these components are properly imported because examples from the documentation might expect the latter.
  • You don’t need to create an auth0 application, so you can just pass anything to domain and clientId as long as their values are of string type. At this stage, you just want to see your SPA working, at least get it running.

Using tree -I 'node_modules', here’s what my directory looks like:

.
├── 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

Run with npm start and you should see the welcome page with the login button.