Save access_token and reuse in another apps

Queries and Resources
1

Hello, I'm trying to use Supabase as a service to login my users, I created a basic email / password form and a rest-api resource with my supabase url and apikey. I'm able to login the user successfully and the response returns all the informations including an access_token. Ideally, the user is not redirected from the login app to the dashboard app.

Now, in the dashboard app, I would like to check if the user is authorised by using the access_token returned in the login app. If so, show the dashboard app, otherwise route back to the login app.

In a server-side application I would store the access_token in a SESSION variable and reuse it when needed, is it possible to achieve something like that in Retool? How can I store the access_token for further checks?

If this is not possible, what should be the correct workflow using Retool and a custom login?

Thanks!

2

Hi @Pennatool ,

Maybe you can use a custom variable to store the access token for further checks in Retool?

To do this, follow these steps:

  1. In the App Editor for your login app, add a custom variable and name it access_token.
  2. In the Expression field, enter the following expression:
{{ http2.body.access_token }}

This will store the access token from the Supabase response in the access_token variable.

  1. Save your changes.

Now, in your dashboard app, you can use the access_token variable to check if the user is authorized. To do this, add a conditional check to your app.

In the Expression field, enter the following expression:

{{ access_token }} != null

If the expression evaluates to true, the user is authorized and you can show the dashboard app. Otherwise, route back to the login app.

Here is a simple example of a dashboard app that checks if the user is authorized:

import { useState } from "react";

function Dashboard() {
  const [authorized, setAuthorized] = useState(false);

  // Check if the user is authorized.
  if ({{ access_token }} != null) {
    setAuthorized(true);
  }

  // If the user is authorized, show the dashboard app.
  if (authorized) {
    return (
      <div>
        Dashboard
      </div>
    );
  } else {
    // Otherwise, route back to the login app.
    return (
      <div>
        Please login to access the dashboard.
      </div>
    );
  }
}

export default Dashboard;

You can modify this example to fit your specific needs.

Note: If you need to use the access token to make authenticated requests to Supabase, you can pass it as a header in the request. For example:

Authorization: Bearer {{ access_token }}

I hope this helps!

:grinning:

Patrick

3

Hi @PatrickMast, thank you for your reply! Unfortunately I can't use a variable declared in the Login app from the Dashboard app, maybe I'm missing something?

4

Hi @Pennatool,

Oh, yes, this is because variables are scoped to the app in which they are defined.

Now, there are a couple of ways to share data between Retool apps:

1. Use URL query strings:
You can pass data from one app to another using URL query strings. Query strings are best suited for smaller pieces of information that is not sensitive. Every app has a unique URL.

To pass data from the Login app to the Dashboard app using URL query strings, follow these steps:

  1. In the Login app, add an event handler to the login button.
  2. In the event handler, use the openApp() function to open the Dashboard app and specify the access token as a query string parameter. For example:
openApp('/dashboard', {
  access_token: '{{ access_token }}'
});
  1. In the Dashboard app, access the access token from the URL query string using the query() function. For example:
const accessToken = query('access_token');

2. Use a shared data source:
If you need to share more complex data between apps, you can use a shared data source, such as a database or a cloud storage provider.

To use a shared data source to pass the access token from the Login app to the Dashboard app, follow these steps:

  1. In the Login app, store the access token in the shared data source. For example, if you are using a database, you could insert a new record with the access token as a field.
  2. In the Dashboard app, retrieve the access token from the shared data source. For example, if you are using a database, you could query the database for the record with the access token.

I hope this helps!

:grinning:

Patrick