January 12, 2022

Automatically Authenticate with Preflight Scripts in Apollo Studio Explorer

Parul Schroff
Product Management at Apollo
Last updated January 11, 2022

We recently introduced Preflight Scripts to Explorer! With preflight scripts you can automatically run any custom authentication before your GraphQL operation is executed. Preflight scripts are especially useful for managing authentication flows like OAuth by refreshing an access token, for example. Let’s take a look.

Setting up your preflight script

For a graph and variant you want to create a script for, scroll down to find the “Preflight script” section in Apollo Studio Explorer Settings. You will only be able to set up a script if you have the role of Contributor or Admin for this particular graph.

Add a preflight script

Clicking on the “Add script” button will open up the preflight script editor panel. In the editor you’ll find some code snippets to help you get started. You can simply click on the plus icon for adding snippets and start writing your preflight script.

Edit your preflight script

Test and publish your script

As you develop your script in the script editor panel, you can click “Test script” to test its execution. Console messages are printed in the Console output panel. Setting any environment variables in the above dialog will also be reflected in Explorer. Once you are ready, click Save and the script will be available to all team members executing operations against this graph variant in Explorer.

Below is an example of a preflight script that refreshes access tokens after a specific period of time.

⚠️ Note: This script exactly as is will not work since it is using a dummy OAuth server.

if (new Date().getTime() > explorer.environment.get("token_expires_at")) {
  const { access_token, expires_at, refresh_token } = await explorer.fetch(
      "https://example.com/token",
      {
        method: "POST",
        header: {
            "Content-Type": "application/json",
            //...
        },
        body: JSON.stringify({
            refreshToken: explorer.environment.get("refresh_token"),
        }),
      },
    )
    .then((response) => response.json());

  explorer.environment.set("token", access_token);
  explorer.environment.set("refresh_token", refresh_token);
  explorer.environment.set("token_expires_at", expires_at);
}

Additionally, we will need to perform the following steps:

  1. Authenticate server outside of Apollo Studio to retrieve token, refresh_token and token_expires_at.
  2. Add these values as environment variables in Explorer.
  3. Now, with the preflight script running, when the token expires the script will automatically refresh the token and there is no need to manually authenticate again.

Write your preflight script today!

Head over to Apollo Studio Explorer and write your preflight script to make authentication before operations are executed easy for your consumers! Learn more here and as always, we love hearing from you, so if you have any feedback, please drop a post on the Apollo Studio GitHub Community!

Written by

Parul Schroff

Stay in our orbit!

Become an Apollo insider and get first access to new features, best practices, and community events. Oh, and no junk mail. Ever.

Make this article better!

Was this post helpful? Have suggestions? Consider so we can improve it for future readers ✨.

Similar posts

September 15, 2022

The Graph Architect’s Guide to GraphQL Summit 2022

by Melissa Annecchini

Company