Your customers will always need easily accessible information. If you ship products, they want to see the order status and delivery tracking. If you provide a service, they must check their usage, billing details, and account settings. If you're running a SaaS platform, they want access to their subscription status, feature settings, and team management tools. A customer portal can help customers accomplish all of those tasks.
Client portals reduce the need for support tickets and free up time for customer success teams. They also increase customer satisfaction by providing 24/7 access to information.
With the right customer portal software, clients can:
- Check order status and tracking
- Review usage and billing details
- Manage account settings
- Access team management tools
It’s a win-win, and in Retool, you can easily create a client portal for customers to access information easily and securely. Here, we’ll create a fully functioning, easily accessible customer portal in just a couple of steps and then show how to layer on more functionality as-needed to build out the usability for the customer.
Let's get started with the basic setup.
When creating your client portal, your customers will probably expect a few critical features:
A secure client portal protects sensitive information while keeping it accessible to customers. Features like multi-factor authentication (MFA) and role-based access keep data secure without sacrificing a convenient experience.
Customers usually expect to be able to access the latest information when they want it. Real-time updates let them track inventory and orders, monitor service status, and view account changes without a manual refresh.
A customizable client portal allows you to maintain brand consistency while adapting to specific client needs. From custom domain integration to branded interfaces, you can make sure your portal reflects your company’s identity.
Resources like FAQs, tutorials, and best-practices provide easy ways for your clients to gather information independently, reducing the burden on your customer support team.
For the purposes of this tutorial, we’ll focus on the basics of creating a customizable client portal in Retool. In the final step, we’ll offer a few ways to tailor these features to your specific use case.
A customer portal needs robust authentication. Otherwise, anyone can see any individual customer’s information, which would both a) annoy customers and b) annoy your legal team.
Authentication (or authn as it’s sometimes called) comes in many flavors, and Retool supports most of them. Here, we’ll use the most common SSO option—Google.
Getting Google auth set up is pretty straightforward. First, you'll need a Google Cloud project—create one if you haven't already. Once created, we need to create some OAuth 2.0 credentials and a consent screen for logging in users. Don't worry, it's not as scary as it sounds. You’ll see these screens all around the web, and Google will walk you through the process.
Here's what you'll need to tell Google:
- Application type: Web application (because, you know, it's a web app)
- JavaScript origin URI: Your Retool base URL (like https://example.retool.com)
- Redirect URI(s)
The redirect URIs are where Google will send your users back after they log in. Think of it as the "welcome back" mat for your portal. The redirect URIs you’ll need to enter are listed here but will look something like this:
https://<your_base_domain>.com/oauthcallbackhttps://<your_base_domain>.com/oauthhttps://<your_base_domain>.com/oauthcallback/mobile (for Retool Mobile only)
If you are using Retool cloud, then you’ll need these:
https://login.retool.com/oauthcallbackhttps://login.retool.com/oauthcallback/clihttps://login.retool.com/oauth/oauthcallback
Once you have added that to Google, you will get back a Client ID and a Client Secret, which you can add to the Google SSO configuration in your settings:
Now, when customers try to access their portal, they'll get a proper Google sign-in experience, and you'll know exactly who's who:
(At the moment, this looks suspiciously like the Retool login page. We can fix that later.)
Now let’s move on to the other authorization, authz. Think about how you use an app like Retool. You might be an admin for your company account, allowing you to do everything within Retool, an editor who can create apps, or just a viewer able to see and interact with an app.
The same will be true in your portal. You’ll have Admins like yourself who can see and edit everything. But you’ll need a particular role for your customers so they can only view what they need. We can head to Settings > Permissions and set up a new permissions group to do that. We’ll call ours ‘customers’:
We’ll revisit this page in a moment after we’ve completed step 2.
Let’s start creating our new web application.
First, we need the data. Here, we’re going to add some spoof customer data to a Retool database and bring that into the application. First, we’ll create a table to show the data:
Initially, this will populate with demo data, but we can change that within the Inspector. Head to the Inspector for your table, and choose Data source and Connect data. For us, this is going to be a table in our Retool database with customer information, such as order ID, tracking number, and delivery status.
Off the bat, this will connect to our Retool database table and show all information for all customers:
If you don’t like your legal team, you can stop here. If you don’t want to give them a heart attack, we need to only show the logged-in user's details. To do that, we just rework our SQL query in the query editor from:
1SELECT
2
3*
4
5FROM
6
7portalTo:
1SELECT
2
3*
4
5FROM
6
7portal
8
9where
10
11email = {{ current_user.email }}This will then only show the data from the current user:
Here, that is us as admin. We want new users to have access to their users within the published app.
For that, let’s head back to our “customers” permissions group. First, we’ll add a new customer to this group:
This user has no access to anything apart from whatever this permissions group has access to. For that, let’s add a permission for this group to our new app:
We define specific app access to the Portal app for this group. We also need to grant them access to the data for the query to run:
Again, only “Use” access. Now, if we go to the “customer” account, we can log in via Google:
Then, they have access to their data:
And that is a customer portal set up in two(ish) steps.
The above isn’t exactly going to win any design awards, but we wanted to show how easy it is to create a client portal in Retool. From here, you can build out and adapt the portal to your exact needs.
Some enhancements and portal features we’d recommend:
In your branding and customization settings, you can add your logo and brand colors and remove references to Retool. This can go beyond the login page to include emails, 404, password reset, etc.
In this example, our landing page is just the table. But when you initially create an SSO login, Retool will automatically create an entire landing page from which you can build. This lets your customers find exactly what they want within the portal, making for a great user experience overall.
Each of these can then be a specialized app within Retool that customers or subsets of customers have access to. With the right protections, you might give some customers access to the dashboard and order history, but reserve access to invoice management and account statements to a higher level of permissions within a team.
Client portals grant customers access to important information in a cohesive branded environment. You can keep it simple with the first two steps outlined here, or you can expand to include more sophisticated and bespoke features.
You can read more about portals in our original Externals launch write-up, or in this video that shows just how fast you can build your first client portal.
Create a Retool account today to get started (it’s free!) and let us know what you build.
Reader
