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

Angular2 app fails to update after emitting an event

ngOnChange event not firing despite attempting various solutions

Getting into nested information in a JSON string using TypeScript

Persistent Ionic tabs after user logs out - keeping tabs active post-logout

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

I am encountering an issue with an undefined variable called "stripe" in my Angular project, despite the fact

Creating a personalized state object containing unresolved promises in React Native utilizing axios inside a custom React Hook

Transferring information between AngularJS and Angular applications

Is it feasible to bring in a Typescript file into an active ts-node REPL session?

Activate the datepicker in Angular by clicking on the input field

Is it possible to toggle between namespace and class using parentheses?

Using Nestjs to inject providers into new instances of objects created using the "new" keyword

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

Encountering TypeScript error 2345 when attempting to redefine a method on an Object Property

Bug in auto compilation in Typescript within the Visual Studios 2015

Error parsing Angular2 with ngFor directive

Encountered an issue during installation: Error message states that Typings command was not

Different methods to prompt TypeScript to deduce the type

Tips on preventing pooling in Angular 5

Angular: Showing the Gap between Basic Elements within an Array in the Template