Integrating Descope with Website Development Platforms

This guide offers a detailed walkthrough on how to integrate Descope's authentication and authorization solutions across popular website builders like Webflow, Squarespace, WeWeb, WordPress, and more. Descope simplifies the process of adding robust security features, including Passwordless Auth, MFA and Single Sign-On (SSO) to other applications.

Potential Use Cases

Full-Fledged Authentication and MFA

Easily add comprehensive passwordless and password-based authentication methods and multi-factor authentication to any existing website, enhancing security and the user sign in processes.

Simplified SSO Experience

Integrate Single Sign-On (SSO) capabilities into your website not only for streamlined login processes but also to serve as a federated identity broker. This allows users to automatically sign into other apps or platforms from your website, creating a seamless integration across services.

This is very common when you're trying to integrate other services like Salesforce, Overdrive, etc. into your applications and provide an easy way to seamlessly sign the user into these applications from your own website without any additional user friction.

User Analytics and Data Collection

Leverage Descope to gather valuable analytics and data on users signing in, enhancing your ability to understand user behavior and optimize your website accordingly with Connectors along with observability tools like Auditing.

Which Website Development Platforms Do We Support?

Descope supports pretty much any website development platform that allows you to run custom javascript code on pages. Most of the common website builder tools that exist do support this, including:

We have specific guides for a variety of platforms below, or if there is no dedicated guide for the platform that you are using, you can skip to the section on generic integration techniques.

Ways of Integration

There are three main ways that you can integrate Descope with web development platforms, like the ones mentioned above. Typically it will either be done natively with our Descope JS SDK, by using Descope as an OIDC or SAML SSO provider, or with a custom plugin we've developed.

Using a Descope SDK and Web Component

  1. Add the SDK: First, include the Descope WebJS SDK in your website's global header section. This is necessary for enabling the Descope features across all pages of your site, so if there is a place you can apply this to all pages you should put it there. Otherwise you can copy this script tag to each web page you're developing.

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

  2. Embed the Descope Web Component: On specific pages like the login or sign-up pages, embed the Descope Web Component. This code snippet will use the Descope Web Component to render your Descope flows, and allow user interaction such as logging in or registering new users.

    <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('/'); // Replace this with where you want to redirect to after successful login
    };
    const onError = (err) => console.log(err);
 
    wcElement.addEventListener('success', onSuccess);
    wcElement.addEventListener('error', onError);
</script>

    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.

    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.

  3. Protecting Pages: Now that you have a way of signing the user into your site, it's important to make sure that users are redirected to the login page and asked to sign-in if they are not already authenticated. You can apply this to specific pages or your whole site, in order to protect your site contents from un-authenticated users.

    <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>

  4. Logout with Client SDK: To give your users the ability to sign out of your site, you'll need to rely on our Client SDK in order perform this action. You can embed this code as a code snippet on your page, in the form of a Sign Out button or something like that.

    <script>
    const logoutButton = document.getElementById('logoutButton');
    logoutButton.onclick = function() {
        sdk.logout();
        window.location.replace('/login');
    };
</script>

  5. Fetching User Details: If you would like to return user details to display in the frontend of your application, you can use this code snippet to extract user details 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
}

  1. (Optional) Backend Session Validation: If you're using your own backend and developing protected APIs with your site, you can use our backend session validation functions documented here, in order to protect your backend.

  2. (Optional) Roles and Permissions: Role and Permissions will be returned in the JWT token that's created based on the identity of the user. To access these, you can access these from the sessionToken object, which you can retrieve in the same way as you did in the previous steps from getSessionToken().

Integration as an OIDC Provider

Descope can also function as an OpenID Connect (OIDC) provider. This is particularly useful if the website builder or platform supports OIDC natively or through plugins.

  1. Configuration: Configure Descope as an OIDC provider within the platform's authentication settings. You can follow the steps here, in order to configure Descope as an OIDC provider of your website.
  2. Protecting Pages: You might need to protect pages using the code in Step 3 in the section above, unless the website building platform supports native OAuth integration.
  3. Roles and Permissions: You may need to consider adding claims related to Roles and Permissions, or custom claims to your OIDC JWT, documented here. The usage of these claims will manifest in custom JS scripts on your web page or in some custom role handling logic built into the platform.

Integration with a Custom Plugin

Currently Descope offers a custom plugin with WordPress, and we are committed to building out more custom plugins for certain applications and platforms in the future.

Final Thoughts

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

If you have any other questions about Descope or how to integrate with these Web Development Platforms, feel reach to reach out to us!

Was this helpful?

Previous

Google (OIDC)

Next

Setup Guides

On this page

Integrating Descope with Website Development PlatformsPotential Use CasesFull-Fledged Authentication and MFASimplified SSO ExperienceUser Analytics and Data CollectionWhich Website Development Platforms Do We Support?Ways of IntegrationUsing a Descope SDK and Web ComponentIntegration as an OIDC ProviderIntegration with a Custom PluginFinal Thoughts