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