Kinde and Bravo Studio

Adding authentication to your Bravo Studio app is easier than you think! With Kinde, you can let users securely sign up, log in, and access their profile data. This guide will walk you through connecting Kinde with Bravo Studio so you can build apps that authenticate users seamlessly.

What you need

Link to this section

• A Figma account (Sign up for free)
• A Kinde account (Sign up for free)
• A Bravo Studio account paid plan (minimum Solo plan)

Step 1: Set up your Kinde application

Link to this section

1. Sign in to Kinde and select Add application.

2. In the dialog that opens, enter a name for the application (we’ve used ‘Bravo Studio app’).

3. Choose Back-end web as the application type, and select Save.

4. On the Quickstart page, select Other back end, and select Save.

   

5. Go to Authentication and switch on each authentication method you want to be available. (e.g. Google, passwordless, etc.) For these to work, you need to set up the selected auth methods in Kinde.

6. Select Save.

7. Go to Details and note your Client ID and Client secret. You’ll need these later.

   

Step 2: Connect Bravo Studio with Kinde

Link to this section

1. Sign in to your Figma account on the web or desktop.

2. Open the Bravo Sample: Kinde Auth Starter Kit.

3. Select Open in Figma. This will create a copy in your account.

4. Select Share in the top-right corner, then select Copy link to copy the public Figma file URL.

   

5. Sign in to your Bravo Studio dashboard, and select Create a new app.

6. Paste the Figma file URL and select Connect Bravoized Figma file.

   

7. In the App tab, open the Home page screen.

   • Select the Your Name text element.
   • Select the database icon to configure dynamic data.
   • Choose Static and enter ${user.name}.
   • Bravo supports built-in variables like ${user.id}, ${user.name}, and ${user.email}. View all built-in variables

   

   

8. Go to the Integrations tab and enable OAuth 2.0 code flow.

   

9. Select Show to view your Bravo callback URLs.

10. Copy the URLs.

    

11. In your Kinde app > Details page, paste the callback URLs (without trailing /) into Allowed callback URLs and select Save.

    

12. Build your Authorize URI:

    • Find your OAuth 2.0 URL in Kinde > Quick Start (e.g., https://<YOUR_BUSINESS>.kinde.com/oauth2/auth).

    • Find your Bravo project URI in the callback URLs section.

    • Set state to any random 8+ characters.

    • Combine them into the following format.

      https://<YOUR_BUSINESS>.kinde.com/oauth2/auth?response_type=code&client_id=<YOUR_KINDE_CLIENT_ID>&redirect_uri=https://<YOUR_BRAVO_APP_ID>.callbacks.bravostudio.app&scope=openid+profile+email+offline&state=abcxyz123

13. Go back to Bravo > Integrations and fill in the following.

    • Client ID: <YOUR_KINDE_CLIENT_ID>

    • Client Secret: <YOUR_KINDE_CLIENT_SECRET>

    • Authorize URI: The URL you just built

    • Token URI: https://<YOUR_BUSINESS>.kinde.com/oauth2/token

    • UserInfo URI: https://<YOUR_BUSINESS>.kinde.com/oauth2/v2/user_profile

    • Scope: openid profile email offline

      

14. Select Save.

    You can find all Kinde endpoints in your business’s OpenID configuration page. (e.g., https://<YOUR_BUSINESS>.kinde.com/.well-known/openid-configuration).

Step 3: Test your Bravo application

Link to this section

1. Download the Bravo Vision app on your smartphone.

2. Open Bravo Vision and log in with your Bravo account. Your projects will appear.

3. Select Bravo Sample: Kinde Auth Starter Kit to open the app preview.

   

4. Select Sign in to register or log in with your Kinde account. Follow the authentication steps.

   

5. Once authenticated, you’ll be redirected to the app’s homepage. You should see your profile name displayed.

   

That’s it! You’ve successfully connected Kinde authentication with Bravo Studio and tested it on your mobile app.

Troubleshooting

If a deployment error occurs, trying changing the Bravo callback URLs in Kinde to be lowercase. See step 11 of Connect Bravo Studio with Kinde above. E.g. change https://a01JMF34GB3VYX7Z5GVQXSGYFP0.callbacks.bravostudio.app to https://a01jmf34gb3vyx7z5gvqxsgyfp0.callbacks.bravostudio.app. It’s odd but it has fixed an issue previously.

You did it!

Link to this section

Your app can now securely sign in users and display their profile data. This is a huge step towards building production-ready apps with authentication powered by Kinde.

What’s next?

• Explore Bravo’s API features to connect your app to live data.
• Dive deeper into Kinde’s documentation to unlock more authentication capabilities.
• Start customizing your app’s design and logic in Bravo to make it your own.

Happy building!