[NEW PLUGIN] Microsoft Connect - The Easiest Way to Add Microsoft Login (Entra ID / Personal) to Bubble!

Showcase Plugins
1

Hey bubblers! :waving_hand:

Let’s be honest: setting up OAuth 2.0 with Microsoft (Entra ID / Azure AD) from scratch is a massive headache. Their documentation is a maze, and getting the API calls right with the correct headers and tokens can take hours of frustrating trial and error.

I needed a rock-solid, plug-and-play solution for my own app, so I built Microsoft Connect. :office_building::locked_with_key:

This plugin completely abstracts the complexity of the Microsoft Graph API. You just paste your keys, and it works natively with Bubble’s workflows!

:glowing_star: What makes it special?

  • Universal Access: It supports BOTH organizational directories (Enterprise/School Entra ID accounts) AND personal accounts (@outlook, @hotmail, Xbox, Skype). You don’t have to choose!

  • Native Bubble Integration: Works directly with Bubble’s Signup/login with a social network action.

  • Full Profile Data: Doesn’t just grab the email. It includes a built-in Data Call (Get User Profile) so you can easily pull the user’s displayName, givenName, surname, and more directly into your database.

  • Clean & Secure: Uses the standard Authorization: Bearer header flow required by Microsoft’s latest security policies.

:hammer_and_wrench: How easy is it?

  1. Create a free App in the Azure Portal.

  2. Copy your Client ID and Secret Value into the plugin settings.

  3. Add the native login workflow. That’s it! (Detailed step-by-step instructions are included on the plugin page).

:link: Check out the Plugin here: CLICK HERE

:link: Demo Page: CLICK HERE

If you’re building B2B SaaS apps or corporate portals, offering a “Sign in with Microsoft” button is practically a requirement. I hope this plugin saves you the hours of debugging I had to go through! :sweat_smile:

Let me know if you have any questions, run into any issues, or need help setting up your Azure Redirect URIs! Happy building! :rocket::backhand_index_pointing_down:

2

Hi Bubble Community! :waving_hand:

I am super excited to announce a massive update to the Microsoft Connect plugin! Version 2.0 is now live and brings powerful new Microsoft Graph API features for anyone building internal tools, employee dashboards, or student portals.

We also squashed a pesky bug that was affecting enterprise and education users. Here is everything new in V2.0:

:fire: What’s New in Version 2.0: I’ve added the most requested Microsoft integrations directly into the plugin. You can now easily pull data to build full-scale portals:

  • :framed_picture: Get Profile Photo: Easily retrieve and display the user’s Microsoft avatar.

  • :busts_in_silhouette: Get My Groups: Check which classes, departments, or security groups a user belongs to. (Perfect for setting up Role-Based Access Control in Bubble!).

  • :date: Get Calendar Events: Pull the user’s upcoming Outlook schedule and meetings right into your repeating groups.

  • :green_circle: Get Teams Presence: Show live status indicators on your dashboards (e.g., Available, Busy, In a Meeting, Away).

:fire: BONUS: The “Token Bloat” Fix for Enterprise & Education! Do your admin or student users have so many Microsoft Groups that their login crashes with a “Text too long for this field” error? This is a known limitation with Bubble’s native OAuth storage. To solve this, V2.0 introduces a brand new Microsoft Entra Login Element. It uses Microsoft’s official MSAL.js library to authenticate users and store massive tokens securely in the browser state, completely bypassing Bubble’s database limits. Your app is now fully Enterprise and Education ready! :office_building::graduation_cap: (Instructions on the plugin page or demo page)

:warning: Important Upgrade Instructions: If you are upgrading to V2.0 and want to use the new API calls (Groups, Calendar, Presence), you must update your permissions in the Microsoft Azure Portal:

  1. Go to your Azure Portal → App Registrations → Select your app.

  2. Click API Permissions → Add a permission → Microsoft Graph → Delegated permissions.

  3. Add the following scopes: GroupMember.Read.All, Calendars.Read, and Presence.Read.

  4. Make sure to click “Grant admin consent” at the bottom of the page if your tenant requires it.

You can update to the latest version right now in your plugin tab. Let me know what you think of the new features and what you are building with them! :rocket:

3

Commenting not because I’ve used this, but excited to use this on the next application we use that involves Microsoft SSO. It can be a total pain. So thank you for creating this.

4

Thank you for your feedback!

The personal account part is easy but to get the school/enterprise part is a pain. Luckily i have a person that downloaded the plugin and he needs it for his school project so he’s helping me and that’s how i launched V2.

5

Hey Bubble Community! :waving_hand:

Following up on our massive V2.0 update (which fixed the dreaded “Text too long” enterprise error), I realized something important: Bubble’s native “Signup/login with a social network” action is just too limiting for modern apps. So… I completely removed it. :scissors:

Starting with this latest update, the native Bubble OAuth flow is officially retired. Everything is now handled by the custom “Microsoft Entra Login Element”.

Whether your users are logging in with Personal Accounts (Outlook/Hotmail) or Enterprise/Education Accounts (Entra ID / Office 365), this single powerful visual element handles it all seamlessly.

Here is why this completely changes the game for your apps:

:bullseye: 1. True Dynamic Scopes (No More Scary Consent Screens!)

With the old native login, you had to ask for all permissions upfront. If you wanted to read a user’s calendar, you had to ask for it on day one, which scared users away. Now, scopes are 100% dynamic! You can trigger the login element and ask for basic info (User.Read) to get them into the app. Later, when they click a “Sync Calendar” button, you can trigger the element again asking for Calendars.Read. Better user experience = higher conversion rates! :chart_increasing:

:handshake: 2. One Element to Rule Them All

No more separate setups for Personal vs. Business accounts. The MSAL.js element automatically detects the account type and authenticates them securely.

:high_voltage: 3. The New “Passwordless” Bubble Login Workflow

Because we are bypassing Bubble’s native system to give you unlimited token sizes, we use a brilliant “Magic Link” workaround to log the user into your Bubble database instantly without them ever knowing.

Here is the exact workflow you should build with the new element:

Because we are bypassing Bubble’s native system to give you unlimited token sizes (fixing the “Text too long” error), we don’t save passwords. Once the user authenticates via the Microsoft pop-up, you must log them into your Bubble database.

Choose one of the two passwordless workflows below:

:high_voltage: Option A: The Direct Login Method (Recommended for seamless UX)

This method uses a clever “temporary password” workaround to instantly log the user in without them leaving the page.

1. The Trigger:

  • When Button Login is clicked :right_arrow: Add action: Trigger Microsoft Login (Define your scopes, e.g., openid profile email User.Read).

2. The Login Event:

  • Create a new workflow event: When a Microsoft Entra Login User Logged In.

3. Action 1: Auto-Provision New Users

  • Add action: Account > Sign the user up.

  • Email: This MicrosoftEntraLogin's Email

  • Password: Calculate formula > Generate random string (e.g., 12 characters).

  • Only when: Do a search for Users (Email = This MicrosoftEntraLogin's Email):count is 0 (This creates the account and logs them in if it’s their first time).

4. Action 2: Generate Password for Returning Users

  • Add action: Account > Assign a temp password to a user.

  • Email: This MicrosoftEntraLogin's Email

  • Only when: Do a search for Users (Email = This MicrosoftEntraLogin's Email):count > 0

5. Action 3: Log Returning Users In

  • Add action: Account > Log the user in.

  • Email: This MicrosoftEntraLogin's Email

  • Password: Result of step 2 (Assign a temp password)

  • Only when: Do a search for Users (Email = This MicrosoftEntraLogin's Email):count > 0

6. Action 4: Redirect

  • Add action: Navigation > Go to page (e.g., Dashboard).

:e_mail: Option B: The Secure Email Magic Link Method

If you prefer strict verification, you can force the user to click a magic link sent to their Microsoft email inbox.

1. The Trigger:

  • When Button Login is clicked :right_arrow: Add action: Trigger Microsoft Login.

2. The Login Event:

  • Create a new workflow event: When a Microsoft Entra Login User Logged In.

3. Action 1: Auto-Provision New Users

  • Add action: Account > Sign the user up (Use the exact same setup as Step 3 in Option A).

4. Action 2: Send the Magic Link

  • Add action: Account > Assign a magic login link.

  • Email: This MicrosoftEntraLogin's Email

  • Just create link, don’t send email: :cross_mark: UNCHECKED (Bubble requires this to be unchecked to successfully send the link for front-end workflows).

  • Navigate on login: Choose your destination page (e.g., Dashboard).

5. Action 3: Show a Notification

  • Add an alert or text to your page: “Success! Please check your Microsoft email inbox and click the magic link to enter the app.”

:satellite_antenna: Making API Calls (Fetching Data)

Now that your user is securely logged in, you can fetch their Microsoft data (Profile, Photo, Groups, etc.) without hitting database limits!

  1. In your workflow or dynamic text, select Get data from an external API.

  2. Choose one of our pre-configured calls (e.g., Microsoft Login - Get My Groups).

  3. The Bubble editor will prompt you for an access_token.

  4. Pass the token directly from the visual element’s memory: This Microsoft Entra Login's Access Token.Go check out the updated plugin and let me know if you love the new Dynamic Scopes as much as I do!

Happy Building! :clinking_glasses: