Use Descope With Bubble

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>

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>

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>

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.