Issue with obtaining access token in Angular 8 authentication flow with Code Flow

Question

Issue with obtaining access token in Angular 8 authentication flow with Code Flow

As I work on implementing SSO login in my code, I encounter a recurring issue. Within my app.module.ts, there is an auth.service provided inside an app initializer. Upon hitting the necessary service and capturing the code from the URL, I proceed to send a POST request containing a body that should return the access token. However, upon making the post request, the application refreshes and the process repeats itself. After several attempts, it terminates with a message stating that the Authorization code has expired.

Inside app.module.ts file:

export function appsso(http: HttpClient, authService: AuthService) {
    return (): Promise<any> => {
        return authService.init()
    };
}

{provide: APP_INITIALIZER, useFactory: appsso, deps: [HttpClient, AuthService], multi: true}

Inside authService file:

constructor(private http: HttpClient) {}

init() {
    return new Promise<void>((resolve, reject) => {
        console.log('init is called');
        if (localStorage.getItem('token')) {              
            console.log('good to go');
        } else {
            if (!location.href.includes('?code=')) {        
                const params = [
                    'response_type=code',
                    'client_id=abcde',
                    'scope=openid profile',
                    'redirect_uri=https://URLhere/a.0/',
                ];
                location.href = 'https://secureURLhere/authorize?' + params.join('&');      
                return 
            } else {
                const code = window.location.href.split('=')[1];     
                return this.getAuthToken(code).then(data): any => {
                    localStorage.setItem('tokenData', data);
                    console.log('access token received');
                    resolve();
                }, error ((err) => {
                    console.log ('error occured');
                    reject();
                });    
            }
        }
    }

getAuthToken(code: string){
  let body: HttpParams = new HttpParams();
  body = body.append('grant_type', 'authorization_code')
  body = body.append('code', code)
  body = body.append('client_id', 'abcde')
  body = body.append('client_secret', '12345');
  return this.http.post('https://secureURLhere/token', body).toPromise();   
}

Additionally, the header is set to

'Content-Type': 'application/x-www-form-urlencoded'

. Despite setting up for receiving the access token when the Post API is hit, the application continues to refresh. How can this persistent issue be resolved?

angular typescript post single-sign-on angular8

Answer 1

Answer №1

There are several issues in the code that need to be addressed. It is important to ensure that every if statement returns something at the end to prevent the code from getting stuck. Additionally, incorporating returns within if statements can help avoid unnecessary nesting and make the code more readable.

The structure of your service code should resemble the following:

import { HttpClient, HttpParams } from '@angular/common/http';

export interface AuthTokenResponse {
  access_token: string;
  id_token: string;
  expire_in: number;
  token_type: string;
}

class AuthService {
  constructor(private http: HttpClient) {}

  init() {
    return new Promise<void>((resolve, reject) => {
      // Check for token in local storage
      if (localStorage.getItem('auth-token')) {
        resolve(); // Token exists, proceed
        return;
      }

      const params = window.location.search
        .substr(1)
        .split('&')
        .reduce((prev, current) => {
          const [key, value] = current.split('=');
          if (key || (value !== undefined && value !== null)) {
            prev[key] = value;
          }
          return prev;
        }, {});

      if (params && params['code']) {
        this.getAuthToken(params['code']).then(
          (data) => {
            localStorage.setItem('auth-token', JSON.stringify(data));
            resolve(); // Save token to local storage
          },
          (err) => {
            reject(); // Error handling
          }
        );
        return;
      }

      const redirectParams = new HttpParams()
        .set('response_type', 'code')
        .set('client_id', 'abcde')
        .set('scope', 'openid profile')
        .set('redirect_uri', 'https://URLhere/a.0/');

      location.href =
        'https://secureURLhere/authorize?' + redirectParams.toString();
      reject(); // Redirect if no token present
    });
  }

  getAuthToken(code: string): Promise<AuthTokenResponse> {
    const body = new HttpParams()
      .append('grant_type', 'authorization_code')
      .append('code', code)
      .append('client_id', 'abcde')
      .append('client_secret', '12345');

    return this.http
      .post<AuthTokenResponse>('https://secureURLhere/token', body)
      .toPromise(); // Make API call to fetch auth token
  }
}

Answer 2

There are several issues in the code that need to be addressed. It is important to ensure that every if statement returns something at the end to prevent the code from getting stuck. Additionally, incorporating returns within if statements can help avoid unnecessary nesting and make the code more readable.

The structure of your service code should resemble the following:

import { HttpClient, HttpParams } from '@angular/common/http';

export interface AuthTokenResponse {
  access_token: string;
  id_token: string;
  expire_in: number;
  token_type: string;
}

class AuthService {
  constructor(private http: HttpClient) {}

  init() {
    return new Promise<void>((resolve, reject) => {
      // Check for token in local storage
      if (localStorage.getItem('auth-token')) {
        resolve(); // Token exists, proceed
        return;
      }

      const params = window.location.search
        .substr(1)
        .split('&')
        .reduce((prev, current) => {
          const [key, value] = current.split('=');
          if (key || (value !== undefined && value !== null)) {
            prev[key] = value;
          }
          return prev;
        }, {});

      if (params && params['code']) {
        this.getAuthToken(params['code']).then(
          (data) => {
            localStorage.setItem('auth-token', JSON.stringify(data));
            resolve(); // Save token to local storage
          },
          (err) => {
            reject(); // Error handling
          }
        );
        return;
      }

      const redirectParams = new HttpParams()
        .set('response_type', 'code')
        .set('client_id', 'abcde')
        .set('scope', 'openid profile')
        .set('redirect_uri', 'https://URLhere/a.0/');

      location.href =
        'https://secureURLhere/authorize?' + redirectParams.toString();
      reject(); // Redirect if no token present
    });
  }

  getAuthToken(code: string): Promise<AuthTokenResponse> {
    const body = new HttpParams()
      .append('grant_type', 'authorization_code')
      .append('code', code)
      .append('client_id', 'abcde')
      .append('client_secret', '12345');

    return this.http
      .post<AuthTokenResponse>('https://secureURLhere/token', body)
      .toPromise(); // Make API call to fetch auth token
  }
}

Answer 3

Answer №2

Revision 1: Do you remember to ensure the promise is returned within the getAuthToken() method? It seems like when you call getAuthToken, it returns null.

Revision 2: I don't see any issue with http.post that could trigger a refresh of the app. The only line that could result in a reload is this:

 location.href = 'https://secureURLhere/authorize?' + params.join('&');

I suspect the problem lies within the if condition here:

location.href.includes('?code=')

You may need to review that section in getAuthToken when setting the params. It seems like you might be receiving &code= instead of the expected ?code=. I could be mistaken.

Revision 3

Based on the code, my assumption is that the POST request follows this structure:

POST https://secureURLhere/token HTTP1.1
(Body content below)
grant_type=authorization_code&code=code&client_id=abcde&client_secret=12345

You can verify this in the Network tab of Chrome DevTools. Show it to your API contact or refer to the API documentation for clarification on the expected format. Regarding user-defined headers, they should be HttpHeaders type and included as the third parameter of http.post() within an object named "headers". The default headers are set by the HttpClient automatically.

When it comes to how it operates, http.post returns an observable that you can subscribe to. In this scenario, you are converting the observable into a promise and handling it further. As for the type of observable being used – it depends on the response sent by the API. It could be an observable of String (Observable), Blob (Observable), or full HttpResponse (Observable<HttpResponse>) among others. There are 15 different overloads of http.post. You specify the desired response reading method either by setting responseType during the http.post request creation or using generics and typecasting. Refer to the official documentation for more clarity.

Answer 4

Revision 1: Do you remember to ensure the promise is returned within the getAuthToken() method? It seems like when you call getAuthToken, it returns null.

Revision 2: I don't see any issue with http.post that could trigger a refresh of the app. The only line that could result in a reload is this:

 location.href = 'https://secureURLhere/authorize?' + params.join('&');

I suspect the problem lies within the if condition here:

location.href.includes('?code=')

You may need to review that section in getAuthToken when setting the params. It seems like you might be receiving &code= instead of the expected ?code=. I could be mistaken.

Revision 3

Based on the code, my assumption is that the POST request follows this structure:

POST https://secureURLhere/token HTTP1.1
(Body content below)
grant_type=authorization_code&code=code&client_id=abcde&client_secret=12345

You can verify this in the Network tab of Chrome DevTools. Show it to your API contact or refer to the API documentation for clarification on the expected format. Regarding user-defined headers, they should be HttpHeaders type and included as the third parameter of http.post() within an object named "headers". The default headers are set by the HttpClient automatically.

When it comes to how it operates, http.post returns an observable that you can subscribe to. In this scenario, you are converting the observable into a promise and handling it further. As for the type of observable being used – it depends on the response sent by the API. It could be an observable of String (Observable), Blob (Observable), or full HttpResponse (Observable<HttpResponse>) among others. There are 15 different overloads of http.post. You specify the desired response reading method either by setting responseType during the http.post request creation or using generics and typecasting. Refer to the official documentation for more clarity.

Issue with obtaining access token in Angular 8 authentication flow with Code Flow

Answer №1

Answer №2

Similar questions

typescript exploring the versatility of dynamic types and generics

The onChange() function in the Date Picker event is failing to activate

What is the best way to reference typescript files without using absolute paths?

Utilizing BehaviourSubject for cross-component communication in Angular

"Trying to create a new project with 'ng new xxx' command resulted in error code -4048

Angular 2: Enhancing User Experience with Pop-up Dialogs

The async pipe value seems to be constantly null when dealing with router events

Exploring the capabilities of argon2-browser in a cutting-edge setup with vite

Establish a connection between MongoDB and the built-in API in Next.js

Having trouble getting web components registered when testing Lit Element (lit-element) with @web/test-runner and @open-wc/testing-helpers?

Setting an expiry date for Firestore documents

Maintain the text layout when copying and pasting from the Angular Application

Issue encountered while generating a dynamic listing using Angular

How can the panel within an accordion be enlarged or minimized?

Guidelines for transitioning an AngularJS module for injection into an Angular 2 component

The process of exporting a singleton instance

What is the best way to initiate the registration page through the @auth0/auth0-react library?

Restrict the number of rows in a CSS grid

Is there a way for me to store the current router in a state for later use

(Chrome Extension, Angular 7) How come a mat dialog displays properly on a webpage but fails to render in a chrome extension? (Including a repo for reproduction)