Using Descope With Webflow

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.

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>

Implementing Login/Sign-Up Page

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

Also, double-check to make sure that Slug is also set to 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>

This code will display the web component of the sign-up-or-in flow, and upon successful authentication, redirect to the homepage of the site. Afterward, you can publish your site and verify that the authentication is working properly!

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

If you would like to return user details to display in the frontend of your application, you can this information from the sessionToken created when the user is authenticated.

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
}

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 - here
2. Backend Session Validation - 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!