This tutorial guides you through setting up an OAuth 2.0 authentication flow. This flow allows users to grant limited permissions to your App and enables your App to request an access token to perform actions on behalf of the user.

By the end of this tutorial, your Webflow App will be able to obtain an access token on behalf of a user using the Authorization Code Grant flow.

Authorization Code Grant Flow

Webflow uses the Authorization Code Grant flow to provide access tokens to Apps. This flow involves a series of interactions between Webflow's authorization server and your web app. Here’s how the process works when a user visits your site for the first time:

1. User sign-up/Login: A user signs up or logs in to your App. At some point, they may need to perform an action that requires using the Webflow API.
2. Authorization request: To make requests to the Webflow API on the user’s behalf, your App redirects the user to an authorization screen. Here, they can review the permissions your App is requesting and authorize access to specific Webflow Sites or a Workspace.
3. User authorization: Once the user grants authorization, Webflow redirects them back to your App via a redirect URI specified during the app setup, adding a code parameter to the query string.
4. Token Request: Your app uses the code to make a secure request to Webflow's authorization server to obtain an access token. If the request is valid, Webflow responds with an access token.
5. API Requests: Your app can now use this access token to make requests to the Webflow API on behalf of the user.

Get an access token

Requirements

Before you begin, ensure you have the following:

• A Webflow App created with the "Data Client" building block. Learn more here
• Your app's client credentials: client_id and client_secret.
  
  Note: Only workspace administrators are authorized to view a client secret. If you're not a site administrator, please contact one to get the secret for you.

1. Set up your server

Before you can request an access token, you'll need to set up your server to handle the OAuth 2.0 flow. We recommend using JavaScript or Python, as we provide SDKs for these languages that can help simplify the authentication process.

Follow the below examples in Node.js or Python to help you create a server that can accept requests and communicate with the Webflow authorization server.

2. Create an authorization link

To enable users to install your App, you need to create an authorization link. This link directs users to a Webflow authorization screen where they can grant your App permission to access their Webflow data.

📘

Where do I put this link?

App Marketplace Submission: Supply this link in your application to the App marketplace. Users will use it to install your App from the marketplace.

Your Site: Place this link on your site to direct users to try out or install your App.

You can create the authorization link using various methods, with the recommended approach being through our JavaScript and Python SDKs.

Parameters and information needed

To create the authorization link, you will need the following information:

Constructing the authorization link

Using the SDK

To simplify the process of creating authorization links and handling OAuth flows, you can use the provided JavaScript and Python SDKs. These SDKs offer convenient methods to generate the authorization URL with the required parameters.

require('dotenv').config();
const express = require('express');
const { WebflowClient } = require('webflow-api');

const app = express();
const port = 3000;

// Endpoint to redirect to the authorization link
app.get('/auth', (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        state: process.env.STATE,
        scope: 'sites:read',
        clientId: process.env.CLIENT_ID,
        redirectUri: process.env.REDIRECT_URI,
    });

    res.redirect(authorizeUrl);
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

from flask import Flask, request, redirect
import requests
from webflow import WebflowClient
from dotenv import load_dotenv
import os

load_dotenv()

app = Flask(__name__)

client_id = os.getenv('CLIENT_ID')
client_secret = os.getenv('CLIENT_SECRET')
redirect_uri = os.getenv('REDIRECT_URI')
state = os.getenv('STATE')

# Endpoint to redirect to the authorization link
@app.route('/auth')
def auth():
    authorize_url = WebflowClient.authorize_url(
        client_id=client_id,
        redirect_uri=redirect_uri,
        scope='sites:read',
        state=state
    )
    return redirect(authorize_url)

if __name__ == '__main__':
    app.run(port=3000)

Manually create the authorization link

https://webflow.com/oauth/authorize

https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=assets%3Aread%20assets%3Awrite%20authorized_user%3Aread%20cms%3Aread%20cms%3Awrite%20custom_code%3Aread%20custom_code%3Awrite%20forms%3Aread%20forms%3Awrite%20pages%3Aread%20pages%3Awrite%20sites%3Aread%20sites%3Awrite

Copying the Link from the Dashboard

Additionally, you can copy an autogenerated installation link from your App's settings.

In your Workspace Dashboard:

1. Select to "Apps and Integrations" in the left-hand menu.
2. Scroll to the "App Development" section and find your App.
3. Copy the link from the "Install" button.

3. Handle redirect to the callback URI

When users click on the authorization link, they will be taken to a screen where they can review and grant the necessary permissions for your App.

After the user authorizes the App, Webflow redirects them to your server using the redirect URI specified in your app settings. This GET request to your server includes the following query parameters:

• code - A single-use authorization code that you'll exchange for an access token. This code is only valid for 15 minutes.
• state : optional - The unique state value you provided in the initial request. Ensure this value matches the original to protect against CSRF attacks.

Let's set up an endpoint to handle the callback request and store these parameters, as you'll need them in the next step to request an access token from Webflow.

See the example below for details on completing the following steps:

1. Setup the callback endpoint
   Create a route to handle the redirect from Webflow
2. Verify state parameter
   Optionally, check that the state parameter matches the one sent in the authorization request.
3. Extract authorization code
   Retrieve the code from the query parameters.

Example

require('dotenv').config();
const express = require('express');
const { WebflowClient } = require('webflow-api');

const app = express();
const port = 3000;

// Endpoint to redirect to the authorization link
app.get('/auth', (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        state: process.env.STATE,
        scope: 'sites:read',
        clientId: process.env.CLIENT_ID,
        redirectUri: process.env.REDIRECT_URI,
    });

    res.redirect(authorizeUrl);
});

// Endpoint to receive info from the callback URL
app.get('/callback', async (req, res) => {
    const { code, state } = req.query; // Store code and state parameters as variables

    if (state !== process.env.STATE) {
        return res.status(400).send('State does not match');
    }
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

from flask import Flask, request, redirect
import requests
from webflow import WebflowClient
from dotenv import load_dotenv
import os

load_dotenv()

app = Flask(__name__)

client_id = os.getenv('CLIENT_ID')
client_secret = os.getenv('CLIENT_SECRET')
redirect_uri = os.getenv('REDIRECT_URI')
state = os.getenv('STATE')

# Endpoint to redirect to the authorization link
@app.route('/auth')
def auth():
    authorize_url = WebflowClient.authorize_url(
        client_id=client_id,
        redirect_uri=redirect_uri,
        scope='sites:read',
        state=state
    )
    return redirect(authorize_url)

# Endpoint to receive info from the callback URL
@app.route('/callback')
def callback():
    authorization_code = request.args.get('code') // Store parameters
    state_received = request.args.get('state') // Store parameters

    if state_received != state:
        return 'State does not match', 400

    
if __name__ == '__main__':
    app.run(port=3000)

4. Request an access token

Now that you have the authorization_code you can exchange it for an access_token. The access token request should be made as soon as possible after authorization as an unconfirmed authorization_code is only valid for 15 minutes.

Let's walk through the steps to create a smooth flow for a user:

Example

  require('dotenv').config();
  const express = require('express');
  const { WebflowClient } = require('webflow-api');
  
  const app = express();
  const port = 3000;
  
  // Endpoint to redirect to the authorization link
  app.get( '/auth', (req, res) => {
      const authorizeUrl = WebflowClient.authorizeURL({
          state: process.env.STATE,
          scope: 'sites:read',
          clientId: process.env.CLIENT_ID, 
          redirectUri: process.env.REDIRECT_URI, // If the redirect URI is included in the auth link, it must also be included in the request for an access token
      });
  
      res.redirect(authorizeUrl);
  });
  
  // Endpoint to receive info from the callback URL
  app.get('/callback', async (req, res) => {
      const { code, state } = req.query;
  
      if (state !== process.env.STATE) {
          return res.status(400).send('State does not match');
      }
  
      try {
        // Request an access token
       const accessToken = await WebflowClient.getAccessToken({
            clientId: process.env.CLIENT_ID,
            clientSecret: process.env.CLIENT_SECRET,
            code: code,
            redirect_uri: process.env.REDIRECT_URI,
        });
  
        // Store the access token securely, e.g., in a database or session (not shown here for brevity)
      console.log(accessToken)

      // Redirect the user to your App
      res.redirect('/dashboard')

        
    } catch (error) {
        console.error('Error during OAuth process:', error);
        res.status(500).send('Internal Server Error');
    }
  
  });

    // Dashboard route for demonstraton purposes
    app.get('/dashboard', async (req, res) => {
        res.send('Welcome to your dashboard!')
    });
  
  app.listen(port, () => {
      console.log(`Server is running at http://localhost:${port}`);
  });
  

  from flask import Flask, request, redirect
  import requests
  from webflow import WebflowClient
  from dotenv import load_dotenv
  import os
  
  load_dotenv()
  
  app = Flask(__name__)
  
  client_id = os.getenv('CLIENT_ID')
  client_secret = os.getenv('CLIENT_SECRET')
  redirect_uri = os.getenv('REDIRECT_URI')
  state = os.getenv('STATE')
  
  # Endpoint to redirect to authorization link
  @app.route('/auth')
  def auth():
      authorize_url = WebflowClient.authorize_url(
          client_id=client_id,
          redirect_uri=redirect_uri,
          scope='sites:read',
          state=state
      )
      return redirect(authorize_url)
  
  # Endpoint to recieve info from the callback URI
  @app.route('/callback')
  def callback():
      authorization_code = request.args.get('code')
      state_received = request.args.get('state')
  
      if state_received != state:
          return 'State does not match', 400
  
      # Request an access token
      try:
          access_token = WebflowClient().get_access_token(
              client_id=client_id,
              client_secret=client_secret,
              code=authorization_code,
              redirect_uri=redirect_uri,
          )
  
          # Store the access token securely, e.g., in a database or session (not shown here for brevity)
       print(access_token)
          
          # Redirect the user to the dashboard
          return redirect('/dashboard')
  
      except Exception as e:
          print('Error during OAuth process:', e)
          return 'Internal Server Error', 500
  
  
    # Dashboard route for demonstration purposes
    @app.route('/dashboard')
    def dashboard():
        return 'Welcome to your dashboard'
  
    if __name__ == '__main__':
      app.run(port=3000)
  

5. Start your server and test the authentication flow

You're ready to test your newly created authentication flow! In this step, we'll start our server, navigate to the authorization screen, and get an access token from Webflow.

Revoke an access token

To revoke an access token that has been issued to your application, make a POST request to the following endpoint with the below parameters:

https://webflow.com/oauth/revoke_authorization

Request Parameters

Example Request

curl -X POST https://webflow.com/oauth/revoke_authorization \
  -H "Content-Type: application/json" \
  -d '{
        "client_id": "2ccc1b455c782fd60093590c83ee5e315b36bd6640507bb48570e5d0265c2854",
        "client_secret": "d26ec60528020e1caf426db1a20dceaf5f4e3581bb29bc659b2886d46a7160ed",
        "access_token": "53db404efe82daea0c65c635a49bc9388e470146b4d800f559cb9a7f3daf83f1"
      }'

Response

If the request is successful, the access token will be revoked, and the response will return an HTTP status code of 200 OK with the following response body:

{
    "did_revoke": true
}

Possible Errors

Troubleshooting