Framer Plugin Workaround
Framer is currently having issues with their package management service, and some users may face errors when using our Framer plugin. To unblock developers while the Framer team is looking into a solution, we have published this workaround guide.
The Issue
The Framer plugin utilizes our React SDK to embed the flow component and handle session management. In certain Framer projects, the Framer package manager is unable to resolve the import of our React SDK and also resolve the other components on the page.
The Workaround
Although it requires some manual configuration, you can follow these steps to add Descope authentication to their Framer site, utilizing our WebJS and Web Component SDKs instead of React. Make sure to follow all of the steps completely:
1. Create Component File
First, you will create a new code file in your Framer project. Call it DescopeWebComponent.tsx
and select "New Component".
After creating the file, delete the contents of the file and paste the following instead:
Replace <your-project-id>
and <your-flow-id>
with your Descope Project and Flow IDs, and save the file.
2. Insert Flow Component
Now you can drag and drop your flow component from the Project Assets toolbar onto anywhere you'd like on your page.
3. Create Overrides File
Now that you've added authentication to your page, you need a way to manage the authenticated user. We will achieve this using Framer Overrides.
You will create a new code file in your Framer project. Call it DescopeOverrides.tsx
and select "New Override".
After creating the file, delete the contents of the file and paste the following instead:
Replace <your-project-id>
with your DescopeD and <your-redirect-url>
with the URL of the page you want unauthenticated users to be redirected to (usually your login page), and save the file.
4. Apply Overrides
You will have to apply a refresh override on each page of your Framer project so that the user's session token is correctly refreshed.
To apply the refresh override:
- Select a page
- Navigate to "Code Overrides" at the bottom of the toolbar on the right
- Select "DescopeOverrides" as the file, and "RefreshSession" as the override.
The Descope Overrides file also includes overrides that you can utilize to protect your pages and components from unauthenticated users. You can learn more about those overrides here.