Supabase Authentication (OAuth2) For Your Bravo Studio Mobile App

If you're already using Supabase to manage your backend, chances are you're looking for a fast way to turn your product into a mobile app. With Bravo Studio, you can do exactly that — and now, even integrate OAuth2 authentication using Supabase, without writing native code or rebuilding your backend logic.

In this tutorial, we’ll show you how we added a Supabase-powered login to one of our demo projects — the Quit Vaping app — using Bravo Studio.

🎨 Step 1: Design Your App in Figma

Start by designing your app in Figma or using one of Bravo Studio’s free UI kits. For this project, we used a simple login screen with a single action button.

Use the Bravo Studio Figma plugin to tag the web view component and get your screen ready for import.

🌐 Step 2: Set Up Your Supabase OAuth Flow

To make Supabase act as an OAuth2 provider for Bravo, you’ll need:

• A custom login page using HTML, hosted as a Bravo web component
• A Supabase Edge Function that acts as the token endpoint
• The userinfo endpoint from Supabase

You'll update the web component HTML with your project’s SUPABASE_URL and SUPABASE_ANON_KEY.

➡️ Get the web component code here

➡️ Get the token endpoint function code here

(DISABLE Enforce JWT Verification)

🔐 Step 3: Set Up OAuth2 Login in Bravo Studio

Inside your Bravo project:

• Go to Integrations > Login and enable OAuth2
• Add your custom authorize, token, and userinfo URLs
• Add the scope: openid profile email offline

• In the Data Collection, set the authentication type to OAuth2
• Add the apikey header with your Supabase anon key.

Test your setup with a userinfo GET request.

‍

Visit our Docs for full step by step set up.

✅ Ready for Real Users

And just like that, your mobile app has a secure login powered by Supabase — fully functional and ready to test in Bravo Vision.

With Bravo Studio, you can go from Figma design to a mobile app with secure authentication in hours, not weeks.

‍