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.

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.

1
require('dotenv').config();
2
const express = require('express');
3
const { WebflowClient } = require('webflow-api');
4
5
const app = express();
6
const port = 3000;
7
8
// Endpoint to redirect to the authorization link
9
app.get('/auth', (req, res) => {
10
    const authorizeUrl = WebflowClient.authorizeURL({
11
        state: process.env.STATE,
12
        scope: 'sites:read',
13
        clientId: process.env.CLIENT_ID,
14
        redirectUri: process.env.REDIRECT_URI,
15
    });
16
17
    res.redirect(authorizeUrl);
18
});
19
20
app.listen(port, () => {
21
    console.log(`Server is running at http://localhost:${port}`);
22
});

Manually create the authorization link

Copying the Link from the Dashboard

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

1
require('dotenv').config();
2
const express = require('express');
3
const { WebflowClient } = require('webflow-api');
4
5
const app = express();
6
const port = 3000;
7
8
// Endpoint to redirect to the authorization link
9
app.get('/auth', (req, res) => {
10
    const authorizeUrl = WebflowClient.authorizeURL({
11
        state: process.env.STATE,
12
        scope: 'sites:read',
13
        clientId: process.env.CLIENT_ID,
14
        redirectUri: process.env.REDIRECT_URI,
15
    });
16
17
    res.redirect(authorizeUrl);
18
});
19
20
// Endpoint to receive info from the callback URL
21
app.get('/callback', async (req, res) => {
22
    const { code, state } = req.query; // Store code and state parameters as variables
23
24
    if (state !== process.env.STATE) {
25
        return res.status(400).send('State does not match');
26
    }
27
});
28
29
app.listen(port, () => {
30
    console.log(`Server is running at http://localhost:${port}`);
31
});

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:

1. Make a request for an access token to Webflow’s authorization server
   
   In the same endpoint we just set up, create a request to Webflow with the following parameters. Webflow requires these parameters to ensure that the entity requesting the access token is the same entity that received the authorization code.
   

   Authorization server endpoint

   
   POST https://api.webflow.com/oauth/access_token
   

   Request Parameters

   client_id

   stringRequired

   Unique ID for your application. Can be found in the dashboard.

   client_secret

   stringRequired

   Private value unique to your application. Can be found in the dashboard.

   code

   stringRequired

   Authorization code used to retrieve an access_token for the user. Can only be used once.

2. Store the access token securely
   
   For demonstration purposes, we’re storing the access token in a variable and printing it to the terminal. However, this approach is not secure for production. You should store the access token securely in a database or environment variables. For comprehensive guidance on securely storing tokens, please refer to our example apps on GitHub

3. Redirect the user within your App
   
   After successfully obtaining the access token, redirect the user to an appropriate location within your app. This could be a dashboard, a welcome page, or any other relevant section. Ensure that the user experience is smooth and they are informed about the successful authentication.

Example

1
require('dotenv').config();
2
  const express = require('express');
3
  const { WebflowClient } = require('webflow-api');
4
  
5
  const app = express();
6
  const port = 3000;
7
  
8
  // Endpoint to redirect to the authorization link
9
  app.get( '/auth', (req, res) => {
10
      const authorizeUrl = WebflowClient.authorizeURL({
11
          state: process.env.STATE,
12
          scope: 'sites:read',
13
          clientId: process.env.CLIENT_ID, 
14
          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
15
      });
16
  
17
      res.redirect(authorizeUrl);
18
  });
19
  
20
  // Endpoint to receive info from the callback URL
21
  app.get('/callback', async (req, res) => {
22
      const { code, state } = req.query;
23
  
24
      if (state !== process.env.STATE) {
25
          return res.status(400).send('State does not match');
26
      }
27
  
28
      try {
29
        // Request an access token
30
       const accessToken = await WebflowClient.getAccessToken({
31
            clientId: process.env.CLIENT_ID,
32
            clientSecret: process.env.CLIENT_SECRET,
33
            code: code,
34
            redirect_uri: process.env.REDIRECT_URI,
35
        });
36
  
37
        // Store the access token securely, e.g., in a database or session (not shown here for brevity)
38
      console.log(accessToken)
39
40
      // Redirect the user to your App
41
      res.redirect('/dashboard')
42
43
        
44
    } catch (error) {
45
        console.error('Error during OAuth process:', error);
46
        res.status(500).send('Internal Server Error');
47
    }
48
  
49
  });
50
51
    // Dashboard route for demonstraton purposes
52
    app.get('/dashboard', async (req, res) => {
53
        res.send('Welcome to your dashboard!')
54
    });
55
  
56
  app.listen(port, () => {
57
      console.log(`Server is running at http://localhost:${port}`);
58
  });
59
  

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.

1. Create a secure tunnel using ngrok (OPTIONAL)

   using ngrok

2. Start your server Enter the following command into your terminal to start your server.

   Node.js

   Python

   node server.js

3. Start the authorization flow
   1. Start the authentication process Open your browser and go to http://localhost:3000/auth. You will be redirected to Webflow’s authorization screen for your App.
   2. Authorize your app Select the workspace or sites you want your app to access, and click the “Authorize” button.
   3. Redirect to your app Upon successful authorization, you will be redirected to your app’s dashboard.
   4. Verify the access token Check your terminal to see the access token printed out.

   Didn’t see what you expected? Read the troubleshooting guide below.

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

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

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:

1
{
2
    "did_revoke": true
3
}

Possible Errors

Troubleshooting