How to use Retool with AWS Amplify (AppSync and Cognito)

Retool is a platform that makes it really easy to build internal tools (eg: admin panels). It lists a lot of integrations that it offers out the box, and although it doesn’t mention Amplify, AppSync, or Cognito, it’s actually pretty easy to connect to them.

This guide is intended for anyone with an existing AppSync and Cognito set-up (doesn’t matter if created via Amplify or not) who wants to connect to them with Retool.

Step 1: Create a new Cognito app client for Retool

• To do this in the AWS console open the settings for your Cognito user pool via https://console.aws.amazon.com/cognito/users/, navigate to General settings > App clients, and then scroll down to Add another app client
• Make sure you enable username password based authentication (ALLOW_USER_PASSWORD_AUTH) and have Generate client secret checked.
• After creating the new app client navigate to App integration > App client settings, find the new client.
• Make sure Cognito User Pool is enabled as an identity provider.
• Set the Callback URL to https://oauth.retool.com/oauth/user/oauthcallback.
• For Allowed OAuth Flows enable Authorization code grant.
• For Allowed OAuth Scopes enable openid and profile.
• Navigate back to General settings > App clients, find the new client, and copypaste the App client id and App client secret to use later. They will probably both be long strings of lower case letters and numbers, around 26 and 49 characters long respectively.
• Navigate to App integration > Domain name and copypaste the domain value to use later. Should be something like https://xxxxxxxx.auth.us-east-1.amazoncognito.com/oauth2/authorize (where xxxxxxxx is your unique domain).

Step 2: Find your AppSync API URL

• To do this in the AWS console go to https://console.aws.amazon.com/appsync/home.
• Navigate to Settings and copypaste the API URL to use later. It should look something like this: https://xxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql (where xxxxxxxx is a unique id).
• Make sure you have Amazon Cognito User Pool enabled as an authorization mode and make sure it’s configured to use the same user pool from Step 1.

Step 3: Create a new resource in Retool

• Navigate to the Resources section of your Retool dashboard and Create new resource. Name it whatever you like (“AppSync”?).
• Set Base Url to the AppSync API URL you copied in Step 2.
• Set the Authorization header to OAUTH2_TOKEN .
• Choose OAuth 2.0 as the Authentication method.
• The OAuth callback URL should be https://oauth.retool.com/oauth/user/oauthcallback (the value you pasted as the Callback URL in Step 1).
• Set the Authorization URL to the Cognito domain value you copied in Step 1 followed by /oauth2/authorize .
• Set the Access Token URL to the Cognito domain value you copied in Step 1 followed by /oauth2/token .
• Set the Client ID to the App client id value you copied in Step 1.
• Set the Client Secret to the App client secret value you copied in Step 1.
• Set Scopes to profile openid .
• You’re done! Now you have your AppSync instance as a resource, authorized with your Cognito user pool. Press Test Connection and then Save changes.

Step 4: Use your AppSync data in a Retool app

• Create a new App in Retool (or edit an existing one).
• To query your AppSync data, open up the bottom bar inside the Retool editor, go to New > Resource Query, and select your newly created Resource. There’ll be a text input where you can write a GraphQL query, and you can use the results it returns in a table or other component using the component’s Data property.
• One easy way to write queries is to leverage the AWS console. Go to your AppSync instance in the console (like in Step 2), navigate to Queries, and you can use the explorer on this page to help you construct and test queries. When you’re happy with your query you can copypaste it directly into the aforementioned text input in the Retool editor.