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.
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.
After you install the Clerk plugin, add the
FRONTEND_API key for your instance.
You can find this value on your instance's Home page. For more information, go to our Frontend API documentation.
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.
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:
That's it! Now bubble will recognize your users, and you can use Clerk elements and actions throughout your page.
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.
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 Settings → URL & redirects → Redirects select "Use custom URL" and enter
/version-test?debug_mode=true for the following fields:
After sign up redirect URL
After sign in redirect URL
After sign out redirect 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).
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:
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!