# Bubble.io plugin

\
Integrate your Bubble apps with users' Gmail, Office 365, Outlook.com, hosted MS Exchange, Zoho Mail, and IMAP accounts through Aurinko's Unified Mailbox API.\
\
[The Aurinko plugin](https://bubble.io/plugin/aurinko---unified-mailbox-api-1692218886639x102948326219710460) allows your app to access users' email and calendars. Future versions can add access to contacts, tasks, and a number of CRM APIs.

### Setting up

***

\
1\. Signup for an Aurinko account, to get your **APP\_CLIENT\_ID** and **APP\_CLIENT\_SECRET**\
[Get your developer API keys](https://docs.aurinko.io/getting-started/get-your-developer-api-keys)

\
2\. Add the [Aurinko API plugin](https://bubble.io/plugin/aurinko---unified-mailbox-api-1692218886639x102948326219710460) to your Bubble application. Enter your **APP\_CLIENT\_ID** and **APP\_CLIENT\_SECRET** keys. For APP\_API\_DOMAIN specify 'api.aurinko.io'. (Ask us about configuring a custom domain alias.)

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2FJdgEvr4N0RJ7wE4d04H7%2Fimage.png?alt=media&#x26;token=8ae51c82-7290-4af4-982e-ac9c80a4f723" alt=""><figcaption></figcaption></figure></div>

### OAuth Flow

***

3\. You need to have OAuth clientId and clientSecret from Google, Microsoft, Zoho to be able to use Aurinko's [OAuth Flow](https://docs.aurinko.io/authentication/oauth-flow) in production. See how to register your apps: [Google OAuth setup](https://docs.aurinko.io/authentication/google-oauth-setup), [Office 365 OAuth setup](https://docs.aurinko.io/authentication/office-365-oauth-setup).\
But for testing during your trial you can use Aurinko's OAuth clientId and clientSecret. For Gmail you'll have to allow-list Aurinko: [Adding Aurinko to Google Workspace allowlist](https://docs.aurinko.io/getting-started/adding-aurinko-to-google-workspace-allowlist).

**Redirect URI: Redirect page vs. Custom domain alias**

Google app registrations allow only authorized redirect URIs under a domain you own so the default Aurinko's Redirect URI <https://api.aurinko.io/v1/auth/callback> won't work for you in production.

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2F6zJ0MZM8xPtcoVfdFp1X%2Fimage.png?alt=media&#x26;token=c42c44ef-2dc4-40eb-88a1-cf680548b1d6" alt=""><figcaption></figcaption></figure></div>

You have two options:

* Contact us about provisioning a domain alias for your Aurinko app so your could use a url like <https://aurinko.mydomain/v1/auth/callback>
* Provision an aurinko\_redirect page in Bubble and use it for redirecting all calls to Aurinko's <https://api.aurinko.io/v1/auth/callback> with the url parameters <mark style="color:red;">`state`</mark>, <mark style="color:red;">`code`</mark>, and <mark style="color:red;">`scope`</mark>.

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2FcMeIw4390sIp37gBPJHG%2Fimage.png?alt=media&#x26;token=fa635b02-8dee-4cee-969b-ec90bc01d567" alt=""><figcaption></figcaption></figure></div>

In your Aurinko app settings insert the url of your aurinko\_redirect page, and specify the url as an Authorized redirect URI in your Google app registration.

\
4\. To start accessing email or calendar data you need to get a user authorization to access a remote account. Use the plugin's **'Get OAuth Url (Mailbox)'** action to generate a required OAuth request url and the **'Open External Website'** action with it.

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2F1oCeEfNgeB2QrsmLSKpo%2Fimage.png?alt=media&#x26;token=4945d7fa-e130-41fb-953b-2153f44f7ade" alt=""><figcaption></figcaption></figure></div>

#### **Callback page (return\_url)**

Provision a callback page that will receive an Aurinko account token. All API calls require **Bearer Auth** with the account token.

* For *'response\_type=code' -* Use the plugin's **'Get Token for Code'** action to exchange the auth code for an account token. If you Save the token in your database.
* For *'response\_type=token'* - Extract the token from the url parameter 'token' and remove it from the URL fragment with JavaScript.

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2Fy47sB6pq2uST49JxixKs%2Fimage.png?alt=media&#x26;token=2cd8ecbe-ebe8-418a-a823-1ea49134bbad" alt=""><figcaption></figcaption></figure></div>

5\. Once your app has obtained account tokens it can start calling the API actions, or attaching the API as a data source, just insert the token (prefixed with 'Bearer ') into the **'Authorization:'** header.

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2F1tURnYoaBiOJIAvrqzDq%2Fimage.png?alt=media&#x26;token=f4aba180-a207-4e19-8555-786d286734bd" alt=""><figcaption></figcaption></figure></div>

6\. The following API methods have been defined in the plugin. Also see the full [API reference](https://apirefs.aurinko.io/).

<div data-full-width="true"><figure><img src="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2FmjHIW6O5XMHDQi4zre7C%2Fimage.png?alt=media&#x26;token=b7760f2f-22c1-456a-bd3b-f22abd87e842" alt=""><figcaption></figcaption></figure></div>