Introduction

If you're using Webflow to design and build your web applications, this tutorial will walk you through how to integrate Descope into your Webflow website. By following along, you can enjoy the same no-code development experience but for your authentication and authorization.

Note: If you would like to use a template we've provided, so you can see how Descope is embedded in custom code and in HTML embed components, please visit the Webflow Template Marketplace.

Getting Started in Webflow Settings

Before you begin, you'll need to sign up for Descope. Please complete the sign up process and then return back to this guide.

1. Head to your Webflow dashboard, and under the site you wish to edit, open up the three dots on the site you would like to integrate Descope with and select Settings.

2. Select Custom Code in the top menu bar:

3. Add the following snippet to the Head Code section, which will allow your website to use the Descope SDK across all pages:

<script src="https://unpkg.com/@descope/web-js-sdk@x.x.x/dist/index.umd.js" ></script>

Please replace x.x.x with the latest version of the WebJS SDK, which you can get from here

Implementing Login/Sign-Up Page

1. Return to your site, and add a new page called Login:

2. Next, you will want to embed an HTML element to the page. You will find this by clicking Add (the box with the + mark on the left-hand sidebar) and scrolling down to the Advanced options:

3. Once that element has been added, double-click that element on the canvas, paste this code in the HTML Embed code editor:

<script src="https://unpkg.com/@descope/web-component@x.x.x/dist/index.js"></script>
<descope-wc project-id="__ProjectID__" flow-id="sign-up-or-in"></descope-wc>

<script>
        const wcElement = document.getElementsByTagName('descope-wc')[0];
	const onSuccess = () => {
            window.location.replace('/');
	};
	const onError = (err) => console.log(err);

	wcElement.addEventListener('success', onSuccess);
	wcElement.addEventListener('error', onError);
</script>

Please replace x.x.x with the latest version of the Web Component, which you can get from here

Customizing Descope HTML Element

1. If you would like to change the flow being used, you can input a different flow-id where you see sign-up-or-in. The flow-id's can be found in the Descope console here.
2. If you would like to change where the website will redirect when login is successful, you can change the window.location.replace value of '/' under the onSuccess() function.

Handing Redirect if Not Authenticated

The final step to using Descope with Webflow, is making sure that user's trying to access a protected resource are redirected to the login page and asked to sign-in if they are not already authenticated.

1. To implement this, go back to your site Settings and click on Custom Code, where we were at the beginning:

2. Scroll down to the Footer Code section, and paste this code:

<script>
  const sdk = Descope({ projectId: "__ProjectID__", persistTokens: true });

  const sessionToken = sdk.getSessionToken()
  const currentPath = window.location.pathname;
  console.log(currentPath)
  if ((sessionToken) && (!sdk.isJwtExpired(sessionToken))){
    // User is logged in
  } else {
    if (currentPath != '/login') {
        // Redirect to login page
    	window.location.replace('/login');
    }
  }
</script>

Fetching User Details for Your Frontend

const sessionToken = sdk.getSessionToken();
if (sessionToken) {
  getProfile()
}

async function getProfile() {
  const profile = await sdk.me(sdk.getRefreshToken())
  userName.innerHTML = profile.data.name
  userEmail.innerHTML = profile.data.email
}

NOTE: You can also retrieve this information from the onSuccess() function located in the step above.

Once this is completed, you should have a full-fledged authenticated Webflow application, running with Descope. However, there are a few extra pieces you might want to add to your website.

Final Thoughts

If you want to add a Logout functionality or handle Session Validation in your backend, you can do by following the instructions from our Docs website:

1. Logout Using Client SDK - click here
2. Backend Session Validation - click here
3. Roles and Permissions - This can be found in Step 7 of the guide here

As you can now see, it's super easy to get started and build out scalable, secure authentication with the power of our SDKs in your Webflow website.

If you have any other questions about Descope or how to integrate with Webflow, feel reach to reach out to us!