Use Descope With Framer

Using Framer 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 Framer project. We have developed the Descope Framer Plugin to simplify this integration.

Launch the Plugin

You can find the Descope plugin in the Framer Marketplace. Click Open Plugin in and choose the project you would like to add Descope authentication to, or a new project.

Alternatively, if you are already in your Framer project, choose Open Plugins in the Framer menu and search for Descope.

Configure Descope Settings

Once you've launched the plugin, configure the following Descope project settings:

• Project ID: the ID of your project, found on the settings page of the Descope console
• Flow ID: the ID of the flow you want to run on your Framer site, found on the flows page of the Descope console
• Redirect URL: the URL that the user will be redirected to if they try to access a page they do not have access to, usually your website's home or login page

After configuring the Descope project settings, you must set up the overrides file in order to implement access control. To do so:

1. Copy the code snippet.
2. Navigate to the Assets page in the top left corner of the Framer editor.
3. Click (+) next to Code, name your file "DescopeAuth.tsx" select "New Override" and click "Create".
4. Paste the code snippet into the file and click "Save".
5. Apply the overrides, as described in the overrides section below, to conditionally display the page or component based on the user's authentication status.

Insert Components

Once you have configured your Descope settings within the plugin, you can navigate to the widget tab to insert flows and the user profile widget. You have the option to set Style IDs for either the flow or the widget. If left empty, the component will render in your project's default style.

After inserting, you can drag and drop the flow or widget component onto wherever you'd like on the page.

Apply Overrides

After adding the authentication flow to your page, you can apply the following overrides to implement access control:

• protectedPage: hides the selected page from an unauthenticated user and redirects to the redirect URL specified
• unprotectedPage: hides the selected page from an authenticated user and redirects to the redirect URL specified
• protectedComponent: hides the selected component from an unauthenticated user
• unprotectedComponent: hides the selected component from an authenticated user
• logoutButton: turns the selected component into a logout button

To apply an override:

1. Select a page or component
2. Navigate to "Code Overrides" at the bottom of the toolbar on the right
3. Select DescopeAuth as the file, and your chosen function as the override

Final Thoughts

The Descope Framer Plugin is the ideal solution for anyone looking to improve the security and user experience of their Framer site. With advanced features like passwordless login, MFA, and SSO, you can protect your site while providing a seamless experience for your users.

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