Bubble <> Xano Integration

Bhanu Vadlakonda

Hi,

Looking for help with integrating Xano authentication in Bubble. Anyone here who’s already done that?

Michael Udinski

Hey Bhanu, as mentioned when we spoke - I'll be publishing a video on it this week

Antonios Moutsatsos

 Is there a way to help us integrate google oauth to bubble?

Michael Udinski

 could you be more specific on what kind of help you are describing? Are you authenticating with Xano?

Antonios Moutsatsos

 yes i am migrating database and workflows from bubble to xano and i want to set up google oauth on bubble.

Michael Udinski

 so OAuth basically works like this: 

Step 1 would need to have a page on your app with a button, telling your user they can use their Google account to log in or sign up or continue to your app. (Continue is inclusive of both logging in and signing up). That button needs to call the /init endpoint, which produces a long URL with your unique redirect URI, keys, etc.
 
Your front-end, in this case Bubble, needs to be able to open that URL with a pop-up/page. The contents of that pop-up are produced by the OAuth provider (in this case, Google). (But Bubble or whatever front-end you use will need to have a way to take you to that pop-up).
 
Once the user authorizes their account on that pop-up with Google, they get sent back to your redirect URI's address (this will be the URL for whatever page in your Bubble app you want the user to be redirected to) with a unique code. Then, that code is used for the /sign up, /log in, or /continue endpoint to complete authentication.

Antonios Moutsatsos

 how can i grab the code when the user returns at the redirect uri?

Michael Udinski

 Google sends the code as a URL parameter when sending the user back to your front-end. You'll see something like ?code=123abcxyzetcetc in the URL