How to make sub apps use the main app credentials for Login & Signup?

Absolutely. I’ll walk you through the steps where there are 2 apps

  • App A (which can be your main app) and
  • App B (which can be your sub app and you can add as many as you like).

A high level summary of the steps is that App A (main) is where most data operations and workflow executions usually happen. App A will be where the data is stored and data needs to be exposed through an endpoint while App B (sub) is used to drive those workflows and pull data from App A (main).

First we start by setting up app A (main) to give us the right access level (Private Key), allow sharing workflows (expose workflow API) and data (expose Data API), and something like an ID card to tell App A who is talking to it (Client ID & Secret). Then in App A (main) you setup actual workflows to signup but it can be other workflows too like charging a customer or sending them emails. Next, you use the App Connector plugin in App B (sub) to control A (main) by showing your ID, confirming your access level and then telling it what to do.

Below are the details:

  1. Setup a signup workflow in app A (main app)
    App A main workflow

  2. In App A settings > API tab

  • Enable ‘This app exposes a Data API’ and ‘Workflow API’
  • Create a new API token and notice the Private Key
  • Set login page as the one containing your signup popup
  • Add a new 3rd party app with name (such as app B’s name) and Redirect URI which should be the landing page back in App B
  • Notice Client ID and Secret - you will need this later

  1. Back in app B, install App Connector Plugin

  2. Add a new Bubble app within the plugin with following details:

  • App domain: appAdomain.bubbleapps.io (use custom domain if applicable)
  • Enable match versions
  • Private key - get from step 2
  • Client ID & Secret - get from step 2

  1. In App B landing page, create a login button
  • set workflow to account > signup/login with a social network > choose ‘Bubble app - appAname’ as OAuth provider

  1. You’re all set. Try App B in run-mode > click login > you will get redirected to signup page on App A > once logged in, you will get redirected to App B landing page and the user’s login details will be stored on both apps. Note that login is ‘User’ type data that is special in that it gets stored in both apps. Any workflows you drive from the App Connector for App A (main) will run in App A and store data only in App A.

  2. If you want to pull non-user Data from App A (main) into App B (sub), the ‘expose Data API’ will now be useful. You will expose that data type from App A (main) settings and then be able to select it from the app connector under add a call / Installed calls and then use it in elements within App B (sub) like any other ‘do a search’.

  1. For each call in step 7, select ‘Action’ in ‘use as’ for workflows and ‘Data’ for pulling a data type.

For both workflows and data, typically set authentication as ‘OAuth’ as this requires user signup and sets access through roles defined in the Privacy Settings of the app while ‘API Key’ grants admin access and ‘none’ gives bare minimum access. (see Introduction - Bubble Docs for more details)

25 Likes