🔐 Authentication
Manage your users through Supabase Auth service.
In this section, we cover the essential aspects of user authentication within your Bubble.io application using the Supabase plugin.
Please ensure that a Supabase Auth component is visible on every page of your app. This is crucial because this component initiates the connection with your Supabase instance. Note that you can have multiple instances of the Supabase Auth component.
Setup
Add the element Supabase Auth
to your page.
Authentication settings
Fields
- Name
DB Schema
- Type
- string
- Description
The Postgres schema which your tables belong to.
- Name
Datatype identity
- Type
- App type
- Description
Optional. Select "Identity (Supabase)" for this field. This type is automatically defined by the Supabase plugin and allows exposing identities linked to the current user.
- Name
Auto Refresh Token?
- Type
- boolean
- Description
Automatically refreshes the token for logged-in users.
- Name
Persist Session?
- Type
- boolean
- Description
Whether to persist a logged-in session to storage.
- Name
Detect Session In Url?
- Type
- boolean
- Description
Detect a session from the URL.
- Name
Set Session From Url?
- Type
- boolean
- Description
When this option is enabled, the plugin automatically attempts to set the user session based on values retrieved from the URL (after an email or OAuth redirect). Otherwise, you'll need to manually trigger the
Set User Session
action, such as on page load.
- Name
Real-Time Events Per Second
- Type
- integer
- Description
Rate limiting. The default is 10, which means that the client can send one event every 100 milliseconds.
- Name
Headers
- Type
- json
- Description
Optional headers for initializing the client. They will be automatically included in action calls to your Supabase instance
User metadata
- Name
Datatype
- Type
- App type
- Description
Optional. Data type that you have initialized through the API connector. Allows you to retrieve the user metadata you defined during user signup.
- Name
Expected user metadata (JSON)
- Type
- json
- Description
Optional. By default, the plugin attempts to automatically retrieve the user metadata format based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.
Custom claims
- Name
Datatype
- Type
- App type
- Description
Optional. Data type that you have initialized through the API connector. Allows you to retrieve the custom claims you defined on your Supabase project.
- Name
Expected custom claims (JSON)
- Type
- json
- Description
Optional. By default, the plugin attempts to automatically retrieve the custom claims format based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.
States
The element exposes the following states:
Is Logged In
: indicates if user is logged-in or not.User ID
User Email
User Phone
User Email Confirmed At
User Last Sign In At
User Confirmed At
User Created At
User Updated At
User Aud
User Role
Access Token
: JWT access tokenRefresh Token
: JWT refresh tokenToken Type
Expires At
Expires In
Is anonymous?
Identities
: list of identities linked to the current userUser metadata
: current user metadataCustom claims
: current user custom claimsApp Metadata Provider
: the provider used to authenticate the user (e.g. email)App Metadata Providers
Status Code
: could be one of 'success', 'failed'Status Message
: message returned by the Supabase authentication serviceAuth Event
: the last authentication event received
States used with OTP and OAuth authentication
User Metadata Avatar Url
User Metadata Email
User Metadata Email Verified
User Metadata Full Name
User Metadata Iss
User Metadata Name
User Metadata Phone Verified
User Metadata Picture
User Metadata Provider Id
User Metadata Sub
URL Access Token
URL Refresh Token
URL Type
URL Error
URL Error Code
URL Error Description
Error states
The plugin parses Supabase's response in the event of authentication errors during login with password and signup, assigning a unique error code and slug to each.
You can use these codes and slugs in your workflow to tailor your logic in response to specific authentication errors.
Error Slug
: simple text describing the error.Error Code
: unique code (number)
Login with password errors
description | Code | Slug |
---|---|---|
Invalid login credentials | 100 | invalid-login-credentials |
Email not confirmed | 101 | email-not-confirmed |
Phone number not confirmed | 102 | phone-number-not-confirmed |
Email login disabled | 103 | email-login-disabled |
Phone number login disabled | 104 | phone-number-login-disabled |
Database error | 105 | database-error |
Error generating JWT token | 106 | error-generating-jwt-token |
Captcha verification process failed | 107 | invalid-captcha |
Signup errors
Description | Code | Slug |
---|---|---|
Email already in use | 200 | email-already-in-use |
Signups not allowed for this instance | 201 | signups-not-allowed |
Password should be at least X characters | 202 | password-too-short |
Only an email address or phone number should be provided on signup. | 203 | only-email-or-phone-number |
Invalid channel, supported values are sms or whatsapp | 204 | invalid-channel |
PKCE not supported for phone signups | 205 | pkce-not-supported-for-phone-number |
Email signups are disabled | 206 | email-signup-disabled |
Database error finding user | 207 | database-error-signup |
Phone signups are disabled | 208 | phone-number-signup-disabled |
User already registered | 209 | user-already-registered |
Update errors
Description | Code | Slug |
---|---|---|
Auth session is missing | 300 | auth-session-missing |
Login anonymously errors
Description | Code | Slug |
---|---|---|
Captcha verification process failed | 400 | invalid-captcha |
Events
The element triggers the following event:
Auth State Changed
: when receiving a new authentication event from SupabaseAuth Error Received
: when receiving an authentication error from SupabaseSigned Up
: triggered when a user successfully signs upSigned Up Error
: triggered when an error occurs during the user sign-up processSign In
: triggered when a user successfully signs inSign In Error
: triggered when an error occurs during the user sign-in processSigned Out
: triggered when a user successfully signs outSigned Out Error
: triggered when an error occurs during the user sign-out processUser Updated
: triggered when a user's account information is successfully updatedUser Updated Error
: triggered when an error occurs while updating a user's account informationVerify OTP
: triggered when an OTP has been successfully verifiedVerify OTP Error
: triggered when an OTP is not validIdentity linked
: triggered when an identity is linked.Identity linked error
: triggered when an error occurs while linking identity.Identity unlinked
: triggered when an identity is unlinked.Identity unlinked error
: triggered when an error occurs while unlinking identity.Send password reset request
: triggered when a password reset request has been succesfully sent.Send password reset request error
: triggered when an error occurs while sending a password reset request.Sign in anonymously
: triggered when a user successfully sign in anonymouslySign in anonymously error
: triggered when an error occurs during the user's attempt to sign in anonymously.Send password reauthentication nonce
: triggered when a password reauthentication nonce has been succesfully sent.Send password reauthentication nonce error
: triggered when an error occurs while sending a password reauthentication nonce.Refresh user session
: triggered when the user session has been refreshed.Refresh user session error
: triggered when an error occurs while refreshing the user session.
Explore our demo app to see how to effectively use the auth component in your app.
Sign the user up
Sign the user up through email and password on your Supabase instance.
Authentication settings
You can use the User Metadata
to add custom fields to a user at the time of signup.
For instance, you can automatically provision user profiles during signup.
Our guide here provides detailed instructions on how to implement this process.
Log the user in with password
Log in an existing user using an email and password or a phone and password.
Logout a user
Sign out the current user.
Update user
Updates user settings for the logged in user.
Log the user in with OTP
Log in a user using magiclink or a one-time password (OTP).
Log the user in with OAuth
Log in an existing user via a third-party provider (OAuth).
Set user session
After a user lands on your Bubble page from an email link or
a successful OAuth redirect, the plugin automatically tries to retrieve
the access_token
and refresh_token
values from the URL.
Then, it exposes these values as the URL Access Token
and URL Refresh Token
to the authentication components.
You can use the Set session
action to
set the current user session based on these parameters.
Verify OTP
Log in a user given a user supplied OTP received via email or mobile call.
Send a password reset request
Sends a password reset request to an email address.
Log the user in anonymously
Creates a new anonymous user.
Link an OAuth identity
Links an OAuth identity to an existing user.
Unlink an OAuth identity
Unlinks an identity from a user by deleting it. The user will no longer be able to sign in with that identity once it's unlinked.
Send a password reauthentication nonce
Sends a reauthentication OTP to the user's email or phone number.
Refresh user session
Returns a new user session, regardless of expiry status.
Do you need any help? Feel free to reach out