Learn how to integrate Clerk into your bubble.io application
This integration allows you to use Clerk as the authentication and user management solution for your bubble.io sites. Add social logins, passwordless auth, multi-factor auth, the familiar user profile button, and more all without code.
The bubble.io plugin is currently in closed beta. To get access to the official Clerk plugin, reach out to us on any of our support channels so we can add you to the beta.
1. Install the official bubble.io Clerk plugin
To get access to the official Clerk plugin, reach out to us on any of our support channels so we can add you to the beta.
Add the FRONTEND_API key
After you install the Clerk plugin, add the
FRONTEND_API key for your instance. You can find this value by selecting API Keys from your instance's Home page. For more information, go to our Frontend API documentation.
2. Automatic sign-up/log-in workflow
For Clerk to work with bubble's sign-up/log-in mechanism, you need to add the Clerk workflow. All actions come from the base bubble Account type. The final result of workflow will look like this:
The workflow must be triggered from ClerkProvider's "Clerk loaded with user" event.
The ClerkProvider element
In order to use Clerk on your page, first you need to add the ClerkProvider element. It can go anywhere, and does not display anything. To create the workflow follow these steps:
1. Create an account for someone else
2. Assign a temp password to a user
3. Log the user in
That's it! Now bubble will recognize your users, and you can use Clerk elements and actions throughout your page.
3. Sign out workflow
For sign out to work, you will need to sign out of both Clerk and bubble. An example sign out workflow is as follows:
When the Signout button is clicked, the action "Account →Log the user out" is triggered along with the "Clerk → Signout" action.
4. (Preview-only) URL Redirects
In bubble's preview environment, your app will be running on the following URL:
/version-test?debug_mode=true. In order to make Clerk work during preview mode, you need to redirect here after adjust your Redirects in the Clerk dashboard to point to this value.
Under Paths enter
/version-test?debug_mode=true for the following fields:
- Sign up redirect URL
- Sign in redirect URL
- Sign-out redirect, single account URL
The final result should look like this:
The Clerk plugin includes basic actions that allow you to link sign-up, log-in and sign-out processes to your page elements.
The OpenSignup action will open the Clerk sign-up modal.
The OpenSignin action will open the Clerk sign-in modal.
The Signout action will sign out the active user.
The Clerk plugin includes pre-built elements that can enhance your application's user experience.
The ClerkProvider element is the base building block for the integration between your page and Clerk. For actions and workflows to function properly, you need to add a ClerkProvider element anywhere on your page so that actions can reference it.
This element does not display anything.
The UserButton element gives your users an easy way to manage their account(s).
The element should not be visible on page load, as shown below.
To show the UserButton, add a new workflow using a"Clerk loaded with user" event. This workflow will show the UserButton once Clerk has fully loaded. Here's what this workflow will look like:
Frequently Asked Questions
- Where can I manage my application's users? Users can be managed from the Clerk Dashboard in the Users section.
- Can I change the Clerk interface theme to match my application ? Yes! Navigate to Settings → Theme in the Clerk Dashboard for your instance for complete customizability. Don't forget to press the Apply changes button!
- Can I migrate all my existing bubble.io users to Clerk ? Yes! Contact us and we can help you migrate your existing user base.
If you have any questions, feature requests, or bug reports, feel free to contact us at any time!