Bubble API - Authentication

Authenticating users when using the Bubble API

Overview

Overview

This article will cover several methods to authenticate a user when trying to access a Bubble Workflow API or Bubble's Data API endpoint.

Goals of the article

The goal of the article is to provide a clear example of the authentication methods you can use.

Authentication methods

There are several methods to authenticate the user. The app or client context will help us decide which one to use in each case.

Methods (read Bubble's manual with extended info):

• Use an API Token generated in the API section in the Settings Tab:

  • When you authenticate with such an API Token, the call is run in the context of an admin user of the app, who has access to all data. This method is not the best if we need to limit what the user can do or not do. At least it should be used with caution.

• Create Sign up/Login API workflows:

  • This is useful for developing an alternative front-end to the Bubble app, such as a native app.

  • We can sign up and log users in. This user, once the workflow is being executed, will be the 'Current user,' who you can access with actions.

  • Privacy rules will apply to this user as they would if the user was logging in the Bubble app and using it in their own browser.

  • The user receives a token that expires in 86400 seconds. You can login the user again to obtain a new token.

• Session cookie

• No authentication:

  • In some cases, you may want to enable calls that aren't authenticated, e.g., to let a user sign up or login to the app.

  • To enable this, check the box 'This workflow can be run without authentication' at the workflow level.

  • When a workflow is run under such circumstances, the privacy rules that apply are the one for 'everyone.'

Create Sign up/Login API workflows

Create a signup workflow:

API wf info

Sign up action info

Create a login workflow:

API wf info

Login action info

API call to the sign up workflow example:

NodeJS - Axios

var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', 'USER_EMAIL');
data.append('password', 'USER_PASSWORD');

var config = {
  method: 'post',
  url: 'YOUR_BUBBLE_APP_URL/version-test/api/1.1/wf/signup',
  headers: { 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

cURL

curl --location --request POST 'YOUR_BUBBLE_APP_URL/version-test/api/1.1/wf/signup' \
--form 'email="USER_EMAIL"' \
--form 'password="USER_PASSWORD"'

Both the signup and the login workflow responses use the same schema:

{
    "status": "success",
    "response": {
        "token": "1673441284837x593001571178241900",
        "user_id": "1673436829567x808711980741338100",
        "expires": 86400
    }
}

Then you can have any kind of workflow. The user will be the one identified on the signup or login API call from where you got the token.

API wf info

In this example we'll return the App settings object unique id and the number of users the app has:

Worflow action

The API call. In this case we won't be passing any parameters, just the token as a Bearer token:

NodeJS - Axios

var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();

var config = {
  method: 'post',
  url: 'https://YOUR_BUBBLE_APP_URL/version-test/api/1.1/wf/get_app_info',
  headers: { 
    'Authorization': 'Bearer 1673441284837x593001571178241900', 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

cURL

curl --location --request POST 'YOUR_BUBBLE_APP_URL/version-test/api/1.1/wf/get_app_info' \
--header 'Authorization: Bearer 1673441284837x593001571178241900'

The response from our app API:

{
    "status": "success",
    "response": {
        "id": "1650534160106x505836262754615300",
        "users_count": 2
    }
}

Demo app

Demo app editor

More information

Bubble manual