---
title: App Bridge for Space and Tool Plugins
description: Discover Storyblok's documentation with comprehensive developer guides, user manuals, API references, and examples to help you get the most out of the headless CMS platform.
url: https://storyblok.com/docs/plugins/app-bridge
---

# App Bridge for Space and Tool Plugins

The App Bridge is a new authentication flow for Storyblok [Space plugins](/docs/plugins/space-plugins) and [Tool plugins](/docs/plugins/tool-plugins). It provides an additional authentication method on top of the existing [OAuth 2.0 authorization flow](/docs/plugins/oauth-authorization-flow), offering flexibility for different use cases.

## Why use the App Bridge?

Storyblok’s OAuth 2.0 authentication provides extensions with access to the [Storyblok Management API](/docs/api/management/), which is perfect for scenarios that require comprehensive content management within a Storyblok space. However, not all plugins need this level of access. For example, for a Google Analytics dashboard that displays traffic data, OAuth would be unnecessary. 

App Bridge Workflow

App Bridge authentication is not a replacement for the existing OAuth flow; instead, they complement each other effectively. It is recommended to use both together for optimal results. Here’s an outline of how they can work in tandem:

App bridge + OAuth

## App Bridge authentication flow

Before diving into the authentication flow, [obtain the extension credentials](/docs/plugins/oauth-authorization-flow) and save them in the project's environment files.

When a plugin first loads, a `postMessage` with the following payload needs to be sent to initiate the validation process:

```javascript
{
    action: "app-changed", // or "tool-changed",
    event: "validate"
}
```

Furthermore, a custom message event listener to listen for messages with the following payload has to be set up:

```javascript
{
    action: "validated",
    token: "....."
}
```

Once the payload with the token is received, it's essential to validate the token to ensure secure communication. This can be accomplished by setting up an API route to handle the token validation:

```javascript
const tokenReceivedFromMessagePayload = '...';
const secretCopiedFromPluginOauthTab = '...';
jwt.verify(tokenReceivedFromMessagePayload, secretCopiedFromPluginOauthTab);
```

Based on the validation response, if the token is valid, the plugin’s content can be shown. It's also good practice to store the token in the session and include it in the headers of all subsequent requests. This approach ensures that the plugin is securely running inside a Storyblok space, and any sensitive server-side operations can be executed based on this token verification.

## Related resources

[OAuth 2.0 Authorization Flow](/docs/plugins/oauth-authorization-flow)

[Storyblok Management API](https://www.storyblok.com/docs/api/management)

[Space plugin Next.js starter w/ App Bridge](https://github.com/storyblok/space-tool-plugins/tree/main/space-plugins/nextjs-starter)

[Space plugin Nuxt starter w/ App Bridge](https://github.com/storyblok/space-tool-plugins/tree/main/space-plugins/nuxt-starter)

[Tool plugin Next.js starter w/ App Bridge](https://github.com/storyblok/space-tool-plugins/tree/main/tool-plugins/nextjs-starter)

[Tool plugin Nuxt starter w/ App Bridge](https://github.com/storyblok/space-tool-plugins/tree/main/tool-plugins/nuxt-starter)

## Pagination

-   [Previous: Introduction](/docs/plugins/space-plugins)
-   [Next: OAuth 2.0 Authorization Flow](/docs/plugins/oauth-authorization-flow)