Adding AWS Amplify lib to custom Retool JS

Hi guys. So what I'm trying to do is authenticate with Cognito to access protected endpoints on our admin backend. I've already succeeded in doing so with a custom Retool auth flow, by adding an API request to Cognito IDP with the USER_PASSWORD_AUTH flow (sending plain username and password).

Now, for security reasons this is less than ideal, so we are trying to use the USER_SRP_AUTH flow, but doing this with the API is extremely inefficient since we would have to encrypt everything locally and it's a bunch of code we don't want to reimplement.

For that reason, I'm trying to use the aws-amplify library (https://cdnjs.cloudflare.com/ajax/libs/aws-amplify/4.3.46/aws-amplify.min.js) to authenticate directly with Cognito leveraging its internal SRP calculation, but so far the library hasn't been recognized even though I'm loading it as suggested in the docs here (Preload custom JavaScript in apps | Retool Docs). Here is my code snippet:

try {
  const user = await Auth.signIn(EMAIL, PASSWORD);

  return {
    accessToken: user.getAccessToken(),
    idToken: user.getIdToken()
  }
} catch (error) {
  console.log('error signing in', error);
}

so basically I've tried doing import, require, etc. at the top of this to no avail and I'm getting frustrated. Does anyone have any idea if this would even be feasible and if so, how to implement it properly?

Regards,
Gonzalo.

Hey @gmerino92, welcome to the community! Not all libraries are able to be imported into the apps via the library settings in app. There was a console error when attempting to import it that way. But in general these libraries can be brought into a custom component. I was able to import this and able to trigger functions via a button in the component.

This is imported as aws_amplify

Let me know if that helps!

Hi, Joe, thanks for the reply.

I'll check it to see if it helps because I was trying to integrate this into the auth flow and I'm not sure how I would make this work with something like that. Bear in mind I'm quite new in using Retool.

I'll let you know how it goes.

Regards,
Gonzalo

No problem! Check out these docs on using values from the app in the custom component and vice versa. You should be able to run any AWS auth related queries in the custom component and pass in values from the app and then send information back out to the app to pass back into queries that you are running. Let me know if you run into any other issues.

Hi, Joe.

Wanted to follow up on this and also ask for some more help since I got stuck. I proceeded to implement the custom component for authentication to interact with the AWS Amplify library and everything seems to be working on that front. That said, I'm using this "authentication button" on the navbar which is a custom module that includes my navigation since I have 3 apps (Organizations, Users and Transactions). So, whenever I authenticate and then switch to a different app (which share the Navbar module) for some reason the state of the module doesn't seem to be persisted. That is, the accessToken and idToken I was using on one of the apps doesn't persist when I switch to another one.

As for the use case itself, you can probably guess: I'm trying to have a multi-page app and have all resources authenticated with this custom component. Is there anything you recommend for that? I saw I could persist the accessToken and idToken I need on localStorage, but I'm not convinced of the safety of that.

Any insight would be greatly appreciated.

Hi @gmerino92, glad to hear that library is working for you in the custom component! With the current state of navigating from app to app that way, that information is not shared among apps unless explicitly passed into the app via local storage or url/hash params. We are working on multi-page apps, which should ease this a bit, but those aren't available quite yet.

Thx for the reply @joeBumbaca . I've migrated the app to a tabbed container pattern so I can persist this authentication throughout. Everything else is working great, I think we can close this!

Appreciate all the help.

1 Like