Hey everyone! I recently tackled the task of integrating Webflow OAuth into my app, and as someone who doesn't code, I wanted to share my approach using Xano as a backend and Webflow as a frontend. If you're a coding pro, please bear with me—no throwing rotten tomatoes! This is one no-coder to another, hoping to smoothen your journey a bit. TLDR: I've compiled every step into a video for those who prefer visual learning, but you'll find a detailed text version of the process below. https://youtu.be/bTUatl6eTec?embedable=true Understanding OAuth Let's quickly grasp the fundamental concept of how OAuth operates. Picture this: you're on holiday and want to rent an apartment in a foreign country. You find an apartment building where you can rent a unit. Upon arrival, instead of being given keys to all the flats, the owner sends you a one-time code to access your specific flat's key lockbox. You use this code to open the lockbox and retrieve a key card, granting you access to the apartment during your stay. In this analogy, Webflow represents the apartment owner, the one-time code serves as an access code, and the key card is analogous to an access token. If you need access to any information about a user's Webflow projects—such as lists of pages, assets, collections, or forms—you'll require an access token. This token is used with any API requests sent to Webflow on behalf of the user. In the example below, I'll demonstrate building a simple Webflow app that displays information about the user's project without storing the access token in my database (although in real-world scenarios, it's advisable to store tokens associated with users). Step 1: Create a New Webflow App Navigate to your Webflow dashboard's "Apps & Integrations" tab and create a new app. Provide general information about your app, including its name, description, and home page URL. Specify the required permissions—I'll use a data client app in my example, granting "Read" access to "Sites." You can adjust these permissions later if needed. The crucial pieces of information we need here are the and , automatically generated for your app. Leave the Redirect URL field blank for now; we'll revisit it in the next step. Client ID Client Secret Step 2: Setting Up a New Webflow Project as the Frontend Create a new Webflow project with two pages: Home and Sites. On the Home page, add a button labeled "Show Sites," which will trigger a request to Webflow for the access code. Set the button's URL to , replacing YOUR_CLIENT_ID with the actual Client ID obtained earlier. Adjust the URL if your app requires additional permissions. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Clicking this button will display a permissions screen to the user, allowing them to choose which projects to grant access to. Upon authorizing the app, they'll be redirected to the Redirect URL—remember to copy the URL of the Sites page (the second page you created) and paste it into the Redirect URL field of your app. Upon completing this step, clicking "Show Sites" will redirect users to the Sites page, with the access code included in the URL. Step 3: Setting Up a Xano Project and Creating the First API Create a new project in Xano, and navigate to the APIs tab. Add a new API Group, and then within that group, add a new API Endpoint—let's call it "getToken." In the "getToken" endpoint: Add a text input named "accessCode" to receive the access code from the frontend. Make a POST request to with body parameters: https://api.webflow.com/oauth/access_token client_id: Your Client ID client_secret: Your Client Secret grant_type: authorization_code code: accessCode (using the variable from the input) Define the output of the first API request as "accessToken," which will be the access token associated with the user. Make a second API request (for demonstration purposes) to retrieve the user's site list—a GET request to . Include the following headers: https://api.webflow.com/v2/sites accept: application/json authorization: accessToken.response.result.access_token Define the output of the second API as "siteList," which represents the list of Webflow projects. Return the "siteList" in the response. Copy the API endpoint URL for later use. Step 4: Configuring a Frontend Request From Your Webflow Project Return to the Webflow project and open the Sites page—the page where users are redirected after granting access to their Webflow projects. Here, add the following JavaScript functions in the custom code area before the </body> tag. First, let's create the function to retrieve the sites: getSites() function getSites() {
 const url = window.location.search;
 const params = new URLSearchParams(url);
 const accessCode = params.get('code');
 const options = {
 method: 'POST',
 headers: {accept: 'application/json', 'content-type': 'application/json'},
 body: JSON.stringify({accessCode: accessCode})
 };
 fetch('YOUR_API_ENDPOINT', options)
 .then(response => response.json())
 .then(response => {
 const siteList = response.response.result.sites;
 showSites(siteList);
 })
 .catch(err => console.log(err));
} Then, let's create the function to display the retrieved sites: showSites() function showSites(sites) {
 const container = document.querySelector('#result');
 sites.forEach(site => {
 const siteDiv = document.createElement('div');
 siteDiv.classList.add('site');
 const siteContent = 
 `<h2>${site.displayName}</h2>
 ID: ${site.id}
 Workspace ID: ${site.workspaceId}
 Short Name: ${site.shortName}
 Time Zone: ${site.timeZone}
 Created On: ${site.createdOn}
 Last Updated: ${site.lastUpdated}
 Last Published: ${site.lastPublished}
 <img src="${site.previewUrl}" alt="Preview">
 `;
 siteDiv.innerHTML = siteContent;
 container.appendChild(siteDiv);
 });
} Lastly, ensure that the function runs on page load: getSites() document.addEventListener('DOMContentLoaded', function() {
 getSites();
}); And there you have it! I hope this guide proves helpful for my fellow no-coders! Feel free to reach out if you have any questions or need further clarification. Happy coding!

A Beginner's Guide to Font Selection: Tips and Top Free Typeface Combinations for Impactful UI

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

No-Code Webflow OAuth: Make Authenticated Requests to the Webflow API Using Xano

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Beginner's Guide to Font Selection: Tips and Top Free Typeface Combinations for Impactful UI

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

A Beginner's Guide to Font Selection: Tips and Top Free Typeface Combinations for Impactful UI

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps