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-skillsif you want to set this up yourself. ng generate componentcommands from the steps may create different file name from the expected component file names (e.g., mine islogin-button.tsbut the documentation expectsprofile.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
domainandclientIdas 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.