Authentication token not in JWT format

[JoSSte]

I am starting my journey into securing an app with auth0 for the first time. I have previously written applications that generated jwt tokens and verified them using the php-auth0 library with success.

This first time using the whole shebang, I have followed the quickstart guides for creating an angular application (Auth0 Angular SDK Quickstarts: Login), as well as the guides for Auth0 PHP API SDK Quickstarts: Authorization

As far as I can tell, i am getting an opaque access token, and as far as I can tell, the root cause is that the audience configured in my auth_config.json is not being sent with the authentication request.

I see that the solution is to send a RedirectLoginOptions to the loginWithRedirect() call

import { RedirectLoginOptions} from '@auth0/auth0-spa-js';
...

  loginWithRedirect() {
    this.auth.loginWithRedirect(new RedirectLoginOptions(...));
  }

But this does not seem to be right, and all my attempts to google a solution or example turn up void of usable answers.

My angular part is basically the sample app code for nav-bar componment and external-api page.

my service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import config from '../../../auth_config.json';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  ping$(): Observable<any> {
    console.log(config.apiUri);
    return this.http.get(`${config.apiUri}/profile`);
  }
}

my component:

import { Component, Inject, OnInit } from '@angular/core';
import { faUser, faPowerOff } from '@fortawesome/free-solid-svg-icons';
import { AuthService } from '@auth0/auth0-angular';
import { RedirectLoginOptions} from '@auth0/auth0-spa-js';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css'],
})
export class NavBarComponent implements OnInit {
  isCollapsed = true;
  faUser = faUser;
  faPowerOff = faPowerOff;

  constructor(
    public auth: AuthService,
    @Inject(DOCUMENT) private doc: Document
  ) {}

  ngOnInit() {}

  loginWithRedirect() {
    this.auth.loginWithRedirect();
  }

  logout() {
    this.auth.logout({ returnTo: this.doc.location.origin + '/loggedout' });
  }
}

The request being sent:

https://josste.eu.auth0.com/authorize?redirect_uri=https://somehting.someurl.com&client_id=blablabla&errorPath=/error&scope=openid profile email&response_type=code&response_mode=web_message&state=blablabla&nonce=blablabla&code_challenge=blalblabla&code_challenge_method=S256&prompt=none&auth0Client=clientsomething

[dan.woda]

Hi @JoSSte,

Welcome to the Auth0 Community!

How are you passing the audience param? Can you show us the code snippet where it is being passed?

[JoSSte]

I tried doing it like this:

  loginWithRedirect() {
    this.auth.loginWithRedirect(new RedirectLoginOptions({audience: 'MY_AUDIENCE'}));
  }

but it doesn’t seem to help

i get the following error at compile time:

Error: src/app/components/nav-bar/nav-bar.component.ts:25:37 - error TS2693: 'RedirectLoginOptions' only refers to a type, but is being used as a value here.

25     this.auth.loginWithRedirect(new RedirectLoginOptions({audience: 'MY_AUDIENCE'}));
                                       ~~~~~~~~~~~~~~~~~~~~

[JoSSte]

Doing further research…

unhandily the link to RedirectLofiiinOptions on The Complete Guide to Angular User Authentication with Auth0 is a 404.

It seems that the reason that the audience was not being added was in the environment configuration, was that i had modified the environment.ts file and replaced YOUR_API_IDENTIFIER with my app identifier, without reading the code.

So essentially, replacing that back to YOUR_API_IDENTIFIER made it work.

environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
import config from '../../auth_config.json';

const { domain, clientId, audience, apiUri, errorPath } = config as {
  domain: string;
  clientId: string;
  audience?: string;
  apiUri: string;
  errorPath: string;
};

export const environment = {
  production: false,
  serverName: "example.com",
  auth: {
    domain,
    clientId,
    ...(audience && audience !== 'YOUR_API_IDENTIFIER' ? { audience } : null), //DO NOT MODIFY THIS LINE!!!
    redirectUri: window.location.origin,
    errorPath,
  },
  httpInterceptor: {
    allowedList: [`${apiUri}/profile`,`${apiUri}/external`],
  },
};

[dan.woda]

Glad you found a resolution. Thanks for posting an update!