how to know APPLICATION_CLIENT_ID and YOUR_AUTH0_DOMAIN of my web application

Question

I have created a web application following this guide https://auth0.com/blog/creating-beautiful-apps-with-angular-material/.

In the guide, they create auth0.ts file.

There, they mentioned setting my APPLICATION_CLIENT_ID and YOUR_AUTH0_DOMAIN.

I don't understand where to get these IDs from.

Here is the code for my auth.ts file.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';

(window as any).global = window;

@Injectable()
export class AuthService {

  auth0 = new auth0.WebAuth({
    clientID: '<APPLICATION_CLIENT_ID>',
    domain: '<YOUR_AUTH0_DOMAIN>',
    responseType: 'token',
    redirectUri: 'http://localhost:4200/',
    scope: 'openid'
  });
  accessToken: String;
  expiresAt: Number;

  constructor(public router: Router) { }

  public login(): void {
    this.auth0.authorize();
  }
  public handleAuthentication(): void {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken) {
        window.location.hash = '';
        this.accessToken = authResult.accessToken;
        this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
        this.router.navigate(['/dashboard']);
      } else if (err) {
        this.router.navigate(['/']);
        console.log(err);
      }
    });

  }
  public logout(): void {
    this.accessToken = null;
    this.expiresAt = null;

    this.router.navigate(['/']);
  }
  public isAuthenticated(): boolean {
    return new Date().getTime() < this.expiresAt;
  }
}

Answer 1

It sounds like you signed up for Auth0 and created an application.

If you go to your Application Dashboard you'll see your app listed.

Click on the application's name and you'll enter the application settings page. The little icons on the right let you copy the information you need.

If you haven't signed up, you can sign up for free.

Once logged in and you need to create a new application, click on "+ New Application". From here you can follow the built-in guide to create a Single-Page Application inside Auth0.

Once you've created your application, you can copy the aforementioned configuration into the auth.ts file.

If you were to copy the settings from my screenshot, your auth.ts file would look like this:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';

(window as any).global = window;

@Injectable()
export class AuthService {

  auth0 = new auth0.WebAuth({
    clientID: 'c45ij324tg345bjnfojo2u6b4352',
    domain: 'your-auth0-domain.auth0.com',
    responseType: 'token',
    redirectUri: 'http://localhost:4200/',
    scope: 'openid'
  });
  accessToken: String;
  expiresAt: Number;

  constructor(public router: Router) { }

  public login(): void {
    this.auth0.authorize();
  }
  public handleAuthentication(): void {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken) {
        window.location.hash = '';
        this.accessToken = authResult.accessToken;
        this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
        this.router.navigate(['/dashboard']);
      } else if (err) {
        this.router.navigate(['/']);
        console.log(err);
      }
    });

  }
  public logout(): void {
    this.accessToken = null;
    this.expiresAt = null;

    this.router.navigate(['/']);
  }
  public isAuthenticated(): boolean {
    return new Date().getTime() < this.expiresAt;
  }
}

Disclosure: I work for Auth0.