Setting a global custom storage to override all calls to localStorage

[kaestleo]

Is this related to a new or existing framework?

No response

Is this related to a new or existing API?

Authentication

Is this related to another service?

No response

Describe the feature you'd like to request

Hi,

we are building a cross platform App based on Angular and Ionic Capacitor and have been using Cognito and Amplify for user management. Instead of using localStorage for any kind of user information, we have written a custom storage service based on Ionic's own storage.

In aws-amplify v5, we were able to use our custom storage by calling this.amplifyService.auth().configure({ storage: this.customStorageService });. As a result, all aws-amplify operations with respect to localStorage were redirected to our custom storage.

As far as I'm aware, in aws-amplify v6 it is possible to set a custom storage only for tokens by calling cognitoUserPoolsTokenProvider.setKeyValueStorage(this.customStorageService);.
(see https://docs.amplify.aws/angular/build-a-backend/auth/concepts/tokens-and-credentials/#update-your-token-saving-mechanism)

However, these are not equivalent implementations, since the user's identityId is still stored in the localStorage in v6. From what I have found, this is because the storage has been split up internally into an IdentityIdStore and a TokenStore, and the above code only overrides the usage of localStorage for the TokenStore.

I would like to kindly suggest an equivalent solution to the custom storage implementation of v5, such that all storage operations defaulting to localStorage can be overriden with a custom storage.

Thank you for your time and your ongoing work on this project.

Describe the solution you'd like

An easy solution would be to add a setKeyValueStorage(keyValueStorage: KeyValueStorageInterface) method for cognitoCredentialsProvider, analogous to the existing implementation for cognitoUserPoolsTokenProvider.

Describe alternatives you've considered

I feel that it would be even more preferable to implement a single method to set a global custom storage, replacing localStorage wherever it is called inside aws-amplify v6.

Additional context

No response

Is this something that you'd be interested in working on?

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

[ashika112]

@kaestleo Hi, thanks for bringing this up. Let us look into how the same can be achieved in v6 or if this is indeed a gap and will provide some updates soon.

[StephanBradler]

@ashika112 Are there any updates on this? This is blocking us from upgrading to v6. The suggested global custom storage sounds like a logical fix to me, as it should be equivalent to the behavior in v5 and is least surprising to users.
Thanks, Stephan

[ashika112]

@StephanBradler Apologies for the delay. So we think this might be achievable in current v6 architecture too but might not be as strightforward. I am putting together a sample code and gonna be doing some testing. Once i have done that, I will share the sample app here for reference

[ashika112]

Hi @kaestleo @StephanBradler , providing some more update here. Before going into the solution, I want to make sure understanding for this is laid out right. CredentialsProvider is always in-memory storage per architecture.

You can use your custom storage solution for identityId as well by overriding credentialsProvider. The following sample code should help you there.

Basic key-value storage implementation

class MyCustomStorage implements KeyValueStorageInterface {
  storageObject: Record<string, string> = {};
  async setItem(key: string, value: string): Promise<void> {
    this.storageObject[key] = value;
  }
  async getItem(key: string): Promise<string | null> {
    return this.storageObject[key];
  }
  async removeItem(key: string): Promise<void> {
    delete this.storageObject[key];
  }
  async clear(): Promise<void> {
    this.storageObject = {};
  }
}

export default MyCustomStorage;

** In app.tsx** (your entry point)

const customStorage = new MyCustomStorage()

// set cognitoUserPoolTokenProvider
cognitoUserPoolsTokenProvider.setKeyValueStorage(customStorage); 
cognitoUserPoolsTokenProvider.setAuthConfig(Amplify.getConfig().Auth!); // Note: this setAuthConfig is essential to make tokenProvider work as expected when passed in as libraryOption

// set CognitoAWSCredentialsAndIdentityIdProvider
const idStore = new DefaultIdentityIdStore(customStorage);
const credsProvider= new CognitoAWSCredentialsAndIdentityIdProvider(idStore)

Amplify.configure(config, {
  Auth: {
    tokenProvider: cognitoUserPoolsTokenProvider,
    credentialsProvider: credsProvider,
  },
});

Please give this a try and let us know if you are running into an issues. We understand this is not straightforward, so we will update our documentation to make this clear. For long term, we will keep this ticket open as feature request to provide better DX here.

[kaestleo]

Hi @ashika112, thank you very much for your response and the detailed solution. This works for me and results in the desired behavior. Updating the documentation will surely help others with the same issue for now. Thanks again!