NocodegardenNocodegarden

🔐 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.

Supabase - Authentication settings

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 token
  • Refresh Token: JWT refresh token
  • Token Type
  • Expires At
  • Expires In
  • Is anonymous?
  • Identities: list of identities linked to the current user
  • User metadata: current user metadata
  • Custom claims: current user custom claims
  • App 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 service
  • Auth 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

descriptionCodeSlug
Invalid login credentials100invalid-login-credentials
Email not confirmed101email-not-confirmed
Phone number not confirmed102phone-number-not-confirmed
Email login disabled103email-login-disabled
Phone number login disabled104phone-number-login-disabled
Database error105database-error
Error generating JWT token106error-generating-jwt-token
Captcha verification process failed107invalid-captcha

Signup errors

DescriptionCodeSlug
Email already in use200email-already-in-use
Signups not allowed for this instance201signups-not-allowed
Password should be at least X characters202password-too-short
Only an email address or phone number should be provided on signup.203only-email-or-phone-number
Invalid channel, supported values are sms or whatsapp204invalid-channel
PKCE not supported for phone signups205pkce-not-supported-for-phone-number
Email signups are disabled206email-signup-disabled
Database error finding user207database-error-signup
Phone signups are disabled208phone-number-signup-disabled
User already registered209user-already-registered

Update errors

DescriptionCodeSlug
Auth session is missing300auth-session-missing

Login anonymously errors

DescriptionCodeSlug
Captcha verification process failed400invalid-captcha

Events

The element triggers the following event:

  • Auth State Changed: when receiving a new authentication event from Supabase
  • Auth Error Received: when receiving an authentication error from Supabase
  • Signed Up: triggered when a user successfully signs up
  • Signed Up Error: triggered when an error occurs during the user sign-up process
  • Sign In: triggered when a user successfully signs in
  • Sign In Error: triggered when an error occurs during the user sign-in process
  • Signed Out: triggered when a user successfully signs out
  • Signed Out Error: triggered when an error occurs during the user sign-out process
  • User Updated: triggered when a user's account information is successfully updated
  • User Updated Error: triggered when an error occurs while updating a user's account information
  • Verify OTP: triggered when an OTP has been successfully verified
  • Verify OTP Error: triggered when an OTP is not valid
  • Identity 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 anonymously
  • Sign 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.

Supabase - Authentication settings

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.

Links an OAuth identity to an existing user.

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