Introduction

Using Bubble to create web applications offers flexibility and control over your design and functionality. This guide will help you implement Descope's advanced authentication features into your Bubble project.

Getting Started with Bubble Settings

  1. Access your Bubble editor, select your project, and navigate to the Settings tab.
  2. Go to the SEO/meta tags section and scroll down to Script/meta tags in header:
  3. Insert the Descope SDK script into this section to enable the authentication features across your site:
<script src="https://unpkg.com/@descope/web-js-sdk@x.x.x/dist/index.umd.js" ></script>
Replace x.x.x with the latest version of the WebJS SDK, which can be obtained from here.

Setting Up the Login/Sign-Up Page

  1. Return to your Bubble editor and create a new page by clicking New Page. Name it Login.
  2. Drag a HTML element onto the canvas from the Visual Elements panel:
  3. Paste the following HTML and script into the HTML element:
<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>
Update x.x.x with the latest version of the Web Component, available here.

This will create a login/sign-up interface on your page, and handle user authentication and redirection upon successful login.

Here is the updated section that includes a note on how to protect only specific pages instead of the entire site using the footer script:

Managing Unauthorized Access

Ensure users who are not authenticated are redirected to the login page:

  1. In the same Settings tab under SEO/meta tags, scroll to Script to run in the page footer and add this code:
<script>
  const sdk = Descope({ projectId: "__ProjectID__", persistTokens: true });

  const sessionToken = sdk.getSessionToken();
  const currentPath = window.location.pathname;
  if (!sessionToken || sdk.isJwtExpired(sessionToken)) {
    const protectedPages = ['/profile', '/dashboard', '/settings']; // Add the paths of the pages you want to protect
    if (protectedPages.includes(currentPath) && currentPath !== '/login') {
      window.location.replace('/login');
    }
  }
</script>
Note: This script ensures that only specific pages (as listed in protectedPages) require the user to be authenticated. If the user is not authenticated or their session has expired, they will be redirected to the login page. Adjust the protectedPages array to include the paths of the pages you want to protect.

This approach allows you to selectively protect pages, giving you greater control over which parts of your Bubble application require user authentication.

Displaying User Details in Your Frontend

To fetch and display user details after authentication:

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

async function getProfile() {
  const profile = await sdk.me(sdk.getRefreshToken());
  document.getElementById('userName').innerText = profile.data.name;
  document.getElementById('userEmail').innerText = profile.data.email;
}

Final Thoughts

Integrating Descope into your Bubble application provides robust authentication capabilities, seamlessly integrated into your no-code development workflow. For additional features like logout functionality or backend session validation, please refer to our comprehensive documentation:

  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

If you have any questions or require further assistance, please contact our support team at Descope.

This guide should now enable you to integrate Descope with your Bubble platform smoothly and efficiently.