Use Descope With Squarespace

Using Squarespace to design and build your web applications doesn't mean you can't enjoy advanced authentication and authorization. This guide will show you how to integrate Descope into your Squarespace website seamlessly.

Getting Started with Squarespace Settings

1. Access your Squarespace dashboard, and select the site you wish to edit, then navigate to Settings.

2. In Settings, click on Advanced, then select Code Injection:

3. Add the Descope SDK script into the Header section to enable Descope features across your website:

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

Creating a Login/Sign-Up Page

1. Go to your site's main menu and choose Pages, then click + Add Page and name it Login.

2. On the newly created Login page, add a Code Block from the Build section:

3. Insert this HTML and script into the Code Block:

<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 embeds the Descope web component, enabling user authentication and redirection upon successful login.

Handling Redirects for Unauthorized Access

To ensure users are redirected to log in if they are not authenticated:

1. In the same Code Injection section, add the following script to the Footer:

<script>
  const sdk = Descope({ projectId: "__ProjectID__", persistTokens: true });
 
  const sessionToken = sdk.getSessionToken();
  const currentPath = window.location.pathname;
  if (!sessionToken || sdk.isJwtExpired(sessionToken)) {
    if (currentPath !== '/login') {
      window.location.replace('/login');
    }
  }
</script>

Fetching User Details for Your Frontend

To display user-specific details:

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

By integrating Descope into your Squarespace site, you've equipped your website with robust authentication capabilities. For further customization or if you need logout functionality and backend session validation, refer to our detailed 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 encounter any challenges or have questions, our support team at Descope is ready to assist you.