auth0-angular-example's Introduction

Angular OpenID Connect with Auth0 Example

This example shows you how to integrate OpenID Connect authentication with Angular and Auth0.

Please read Add OpenID Connect to Angular Apps Quickly to see how this app was created.

Prerequisites:

Node.js 14+
An Auth0 Account

Auth0 is an easy to implement, adaptable authentication and authorization platform. Basically, we make your login box awesome.

Getting Started
Links
Help
License

Getting Started

To install this example, clone it.

git clone https://github.com/oktadev/auth0-angular-example.git
cd auth0-angular-example

Create an OIDC App on Auth0

To add authentication with Auth0, you'll first need a free Auth0 account. Install the Auth0 CLI and run auth0 login to register your account. Then, run auth0 apps create. Specify a name and description of your choosing. Choose Single Page Web Application and use http://localhost:4200/home for the Callback URL. Specify http://localhost:4200 for the rest of the URLs.

You can also use the Auth0 Console:

Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
Choose Single Page Web Applications as the application type and click Create.
Click Angular, then the Settings tab.
Add http://localhost:4200/home as an Allowed Callback URL and http://localhost:4200 as a Logout URL.
Specify http://localhost:4200 as an Allowed Origin and click Save Changes at the bottom.

Modify src/app/auth-routing.module.ts to add your Auth0 OIDC settings:

const config = {
  domain: 'YOUR-AUTH0-DOMAIN',
  clientId: 'YOUR-AUTH0-CLIENT-ID',
  redirectUri: window.location.origin + '/home',
  httpInterceptor: {
    allowedList: ['/api/*']
  },
};