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


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
  • 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

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

Create a new user

Create a new user 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 in a user 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.

Sign in a user with OTP

Log in a user using magiclink or a one-time password (OTP).

Sign in a user 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.


Do you need any help? Feel free to reach out