I need assistance with using the angular-oauth2-oidc library to retrieve data from an asynchronous storage provider and then pass it to a synchronous storage implementation

Question

I need assistance with using the angular-oauth2-oidc library to retrieve data from an asynchronous storage provider and then pass it to a synchronous storage implementation

Typically, the angular-oauth2-oidc library saves tokens in session storage by default.

While you can provide your own storage provider through the OAuthStorage class, it requires a storage provider that can retrieve data synchronously.

I am developing a mobile hybrid app using Ionic and CapacitorJS, and I need to store tokens using the CapacitorJS Storage plug-in.

The CapacitorJS Storage plug-in only allows asynchronous data retrieval methods, such as:

get(options: GetOptions) => Promise<GetResult>

This poses a challenge when integrating with the synchronous expectations of the angular-oauth2-oidc library. For instance, their method to fetch an access token follows this pattern:

 public getAccessToken(): string {
    return this._storage ? this._storage.getItem('access_token') : null;
 }

Is there a way for me to create an implementation of the OAuthStorage class with a synchronous getItem method that can utilize the asynchronous CapacitorjS.Storage.get method?

Alternatively, is it possible to convert data from an asynchronous method to be compatible with a synchronous method without altering the caller?

angular typescript asynchronous ionic-framework

Answer 1

Answer №1

It is impossible to wait for an asynchronous method to finish within a synchronous one, so the task you are inquiring about cannot be achieved directly. Below, you will find a suboptimal workaround that attempts to address this issue.

The following class serves as a synchronous facade for Capicitor's Storage API. From the consumer's perspective, it may seem like multiple keys are being used, but in reality, only one entry is created in storage. This design allows for the underlying keys stored to remain unknown at startup as they are children of the known key. Whenever data is modified, the Storage API reflects these changes.

export class StorageFacade {
  private data: Record<string, any> = {};

  constructor(private storageKey: string) { }
  
  /** Load initial data from storage */
  async init() {
    const res = await Storage.get(this.storageKey);
    this.data = (res) ? JSON.parse(res) : {};
  }  

  getItem(key: string) {
    return this.data[key];
  }

  removeItem(key: string) {
    delete this.data[key];
    Storage.set(this.storageKey, JSON.stringify(this.data));
  }

  setItem(key: string, value: any) {
    this.data[key] = value;
    Storage.set(this.storageKey, JSON.stringify(this.data));
  }
}

The challenge remains of ensuring everything is ready before the keys are required for authentication. One solution is to utilize an APP_INITIALIZER to preload the initial data into storage so that it is prepared prior to any authentication needs:

async function initAuthStorage(storage: OAuthStorage) {
  await this.storage.init();
}

@NgModule({
  providers: [
    { provide OAuthStorage, useValue: new StorageFacade('authStorage') }
    {
      provide: APP_INITIALIZER,
      useFactory: initAuthStorage,
      deps: [OAuthStorage],
      multi: true,
    },
  ],
})

There may be opportunities to refine this approach, such as persisting changes only when the app is closing rather than after every modification. Nonetheless, this should serve as a solid foundation.

Answer 2

It is impossible to wait for an asynchronous method to finish within a synchronous one, so the task you are inquiring about cannot be achieved directly. Below, you will find a suboptimal workaround that attempts to address this issue.

The following class serves as a synchronous facade for Capicitor's Storage API. From the consumer's perspective, it may seem like multiple keys are being used, but in reality, only one entry is created in storage. This design allows for the underlying keys stored to remain unknown at startup as they are children of the known key. Whenever data is modified, the Storage API reflects these changes.

export class StorageFacade {
  private data: Record<string, any> = {};

  constructor(private storageKey: string) { }
  
  /** Load initial data from storage */
  async init() {
    const res = await Storage.get(this.storageKey);
    this.data = (res) ? JSON.parse(res) : {};
  }  

  getItem(key: string) {
    return this.data[key];
  }

  removeItem(key: string) {
    delete this.data[key];
    Storage.set(this.storageKey, JSON.stringify(this.data));
  }

  setItem(key: string, value: any) {
    this.data[key] = value;
    Storage.set(this.storageKey, JSON.stringify(this.data));
  }
}

The challenge remains of ensuring everything is ready before the keys are required for authentication. One solution is to utilize an APP_INITIALIZER to preload the initial data into storage so that it is prepared prior to any authentication needs:

async function initAuthStorage(storage: OAuthStorage) {
  await this.storage.init();
}

@NgModule({
  providers: [
    { provide OAuthStorage, useValue: new StorageFacade('authStorage') }
    {
      provide: APP_INITIALIZER,
      useFactory: initAuthStorage,
      deps: [OAuthStorage],
      multi: true,
    },
  ],
})

There may be opportunities to refine this approach, such as persisting changes only when the app is closing rather than after every modification. Nonetheless, this should serve as a solid foundation.

I need assistance with using the angular-oauth2-oidc library to retrieve data from an asynchronous storage provider and then pass it to a synchronous storage implementation

Answer №1

Similar questions

Efficiently loading Ionic 3 components within a tab with lazy-loading functionality

Tips for managing the 'completed' button in an Android keyboard application using AngularJS/Ionic

Different approach to including labels on scatter plot without relying on "chartjs-plugin-datalabels"

The Karma testing feature in Angular Quickstart encounters issues right from the start

What is the recommended module to choose when importing MAT_DIALOG_DATA?

Material UI - The array is unexpectedly resetting to contain 0 elements following an onChange event triggered by the TextField component

Using a custom TypeScript wrapper for Next.js GetServerSideProps

Develop a set of matching key/value pairs using TypeScript

Learn the proper way to write onClick in tsx with Vue 2.7.13

The Ghostly Glare of Doom: Ionic 2 Strikes on Android

Guide on transitioning Angular 2 RC 1 (or an earlier version) Forms to the new Forms in Angular 2 RC 2 / RC 4

Ways to set the className prop for all components automatically without having to specify it repeatedly

What is the process for generating a dynamic array in typescript?

What is the process for changing the text in a text box when the tab key on the keyboard is pressed in

The script resource is experiencing a redirect that is not permitted - Service Worker

Modifying the color of a GIF animated image using CSS

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

Unexpected outcome when returning a map

What is the best way to reduce the size of TypeScript source code in an Electron application with the help of Electron Forge and Electron Packager

Angular-Slickgrid displaying empty data entries