CODEWITHSUNDEEP
angularoauth-2.0oauthangular-oauth2-oidc
obaram
obaram

Reputation: 461

How to configure OAuth Code flow wihout discovery

It is my first try with OAuth. I am using Angular 13 + angular-oauth2-oidc library and I am trying to configure code flow. My problem is that in tutorial discovery document is used by default but my auth server does not have anything like that so when in the beggining app asking about identity_provider_url/.well-known/openid-configuration I am getting an 404 error. Question is how to configure code flow without loading discovery document from auth server? I found only configuration without discovery document for implicit flow. That is how my code looks like right now:

auth.config.ts

import { AuthConfig } from 'angular-oauth2-oidc';

export const authCodeFlowConfig: AuthConfig = {
  // Url of the Identity Provider
  issuer: '**************', // identity provider URL,
  redirectUri: window.location.origin + '/index.html',
  clientId: 'spa',
  dummyClientSecret: 'secret',
  responseType: 'code',
  scope: 'read, write',
  showDebugInformation: true,
};

app.component.ts

import {Component} from '@angular/core';
import {authCodeFlowConfig} from './sso.confiig';
import {OAuthService} from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'sso';

  constructor(private oAuthService: OAuthService) {
    this.oAuthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin(); // I don`t want this
  }
}

login.component.ts

import {Component, OnInit} from '@angular/core';
import {OAuthErrorEvent, OAuthService} from 'angular-oauth2-oidc';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private oAuthService: OAuthService) {
    this.oAuthService.events.subscribe(e => (e instanceof OAuthErrorEvent) ? console.error(e) : console.warn(e));
  }

  public async login(): Promise<void> {
    await this.oAuthService.initCodeFlow();
  }

  public logout(): void {
    this.oAuthService.logOut();
  }

  public get userName() {
    let claims = this.oAuthService.getIdentityClaims();
    if (!claims) return null;
    return claims;
  }
}

Upvotes: 1

Views: 4478

Answers (2)

obaram
obaram

Reputation: 461

Extending auth.config about additional loginUrl and tokenUrl solved the issue.

This is finall version of my config file:

export const OAUTH_CONFIG: AuthConfig = {
  issuer: environment.identityProviderBaseUrl,
  loginUrl: environment.identityProviderLoginUrl,
  logoutUrl: environment.identityProviderLogoutUrl,
  redirectUri: environment.identityProvideRedirectUrl,
  tokenEndpoint: environment.identityProviderTokenUrl,
  clientId: environment.clientId,
  dummyClientSecret: environment.clientSecret,
  responseType: 'code',
  requireHttps: false,
  scope: 'write',
  showDebugInformation: true,
  oidc: false,
  useIdTokenHintForSilentRefresh: false
};

Of corse then we should remember to remove loadDiscoveryDocumentAndTryLogin() .

  public configureCodeFlow(): void {
    this.authService.configure(OAUTH_CONFIG);
    this.authService.setupAutomaticSilentRefresh(undefined, 'access_token');
    this.authService.tryLoginCodeFlow();
  }

Upvotes: 2

Gary Archer
Gary Archer

Reputation: 29218

Have a look at the AuthConfig class and try setting loginUrl to the authorize endpoint and also set the token endpoint explicitly. See if this gives you a different error.

A good library should allow you to set endpoints explicitly. As an example, a couple of years ago an SPA of mine did not work with Azure AD since it did not allow CORS requests to the token endpoint. I worked around this by setting a token endpoint in the oidc client library to point to an API, so that I could call the token endpoint from there.

Upvotes: 2

Related Questions