Anyone successfully implemented an OAuth login process?
I followed the instructions on the Bubble Doc for native apps, to implement the “Signup/login with a web browser” action and am able to login user successfully,
but how do I get the browser window to close and have the app “refresh” or detect the user is logged in? My tests on the Web previewer result in a blank page (no elements showing) and my tests on BubbleGo result in elements showing but no user being detected. Has anyone been successful at implementing this?
Here’s a screen recording testing this on BubbleGo:
In this case, the user is already authenticated, and after entering the account email the authentication process redirects the user to our current mobile web site. So, that’s showing us that the authentication process is working. If the user is not authenticated, they are taken to the 3rd party’s sign in page to enter their username and password, and the user is authenticated and redirected back to the same mobile web app.
But we stop there. I’m trying to get the browser to close and the app to ‘refresh’ with the logged in user, but it just stays on the browser.
After tapping “Cancel” to close the browser the login view doesn’t refresh/reload. Upon reloading the app, it doesn’t detect a user as demonstrated by me tapping “Go to Home” and there is no logged in user showing at the top of the screen (the gray circle on the top left would have the user’s initials).
And here’s a screenshot of the browser previewer after authenticating and refreshing the page. It’s just blank with not elements on the screen.
It could be related to the logic you have set up on your web login flow. A quick test here would be to create another quick & dirty login page on your web app and point the workflow action to this page instead.
It might also be related to the workflow you have setup where there are two login steps. Might be worth testing with a wf that only has the signup/login with a web page
@nick.carroll We’ve tried a few different things ending up with the same result as what’s showing in the video.
What’s interesting is it appears we are following the same process that the BubbleGo app follows to authenticate users via Google. But, our app lands on our mobile site and doesn’t close the login page, nor does it ‘log the user in’ on the mobile app. So we are trying to understand exactly what we are doing incorrectly.
Would you be able to provide specific instructions on how we should be configuring this workflow to log a user in via a web page?
This is how we handle it on BubbleGo! We have a When user is logged in event to handle the redirect if a user is already logged in and a simple signup/login with a web browser action on tap
Thanks for sharing this. We’ve implemented similar workflow steps, but we’re still not achieving the desired result. Here’s where we stand:
The sign-in browser persists after authentication is completed on both the BubbleGo and web previewer. How do we get it to close?
Upon closing the browser manually on the web previewer, and tapping the “Go to Home” button we’ve implementing to navigate the user to the Home view, the user IS detected as being logged in and data loads. How do we send the logged in user to the Home view?
Upon closing the broswer manually on BubbleGo, and tapping the “Go to Home” button on the Login view, the logged in user IS NOT detected and the workflow we have implemented to detect this navigates the user back to the log in page. So, the Native app is not even detecting the user’s logged in. How do we ensure the logged in user is detected and the user is navigated to the Home view?
I appreciate any additional insights, or if possible joining a quick Zoom call to walk through this. This is the last item we have before launching the app to our users. Thanks!
Sure thing. I don’t know what level of detail you need, so I’ll just lay it all out
The process starts with the user tapping the “Sign in with Procore” button on the 'Log In" view which triggers the ‘login with web browser’ workflow and redirects the user to the ‘login’ page
On the ‘login’ page the user inputs their email and taps “Next” which triggers a workflow with a series of steps and conditions to determine how the user should authenticate (pw or oauth). In this example, the user will authenticate via Procore.
The user is redirected to a different page called ‘procore_oauth’ which is used to validate our oauth credentials with Procore and manage the token creation process. It contains workflows and conditions to handle all of the possible scenarios that might exist, make the necessary API calls to Procore to secure a code so we can generate a token, etc.
Once authenticated, Procore redirects the user back to the ‘procore_oauth’ page, and since we now have valid codes/tokens, the other workflows run to log the user in and redirect to /app (our single-page web app).
This process has worked great for over the last 12 months on our web app and mobile web app. Let me know what other questions or suggestions you might have. Thanks again for your time and assistance.
Gotcha, thanks for all of the detail! Not sure exactly where the issue lies, but the signup/login with a workflow works fine with oauth and 2fa, so I think your oauth flow should be fine. Maybe the issue is in the redirect steps on your login page post login that is causing an issue? can you try without those steps at the end?
I’m assuming you’re referring to the last part after the authentication process completes?
Our integration with Procore provides a place for us to input redirect URLs which this procore_oauth page is one of them. Is it possible to configure a redirect URL for the mobile app?
If we remove the redirects on the procore_oauth page, then the user will just sit on the page and nothing else happens.
Closing the page and tapping “Go to Home” results in the same behavior as before (user is logged in on the web previewer, but not on BubbleGo).
What’s weird thing is the app previewed on BubbleGo NEVER detects a logged in user that has authenticated via oauth…even if they’ve previously authenticated via oauth on the web app. We save these tokens and they last for a certain amount of time, so if they’re valid we just log in the user. BubbleGO never detects this. However, logging in a user via username and password works fine.
The workflow steps on the procore_oauth page send the redirect url through so Procore knows where to redirect the user when they’re done authenticating. Here’s a screenshot showing the version-test redirect back to procore_oauth.
An engineer is going to have to take a deeper look - we are using a special type of webview that is meant for authentication, including oauth, so there is some weird interaction going on. Have you filed a bug report?
Yes. I don’t have a ticket number but I have been emailing “Eram” back and forth on this issue. I last responded like a minute ago to them with information they had requested.
Is there any news about this? I have the same problem with the Miniorange plugin… It does exactly what it has to do, authenticates the user but once done in the popup I see the web version of my app. Is there a way as Kenton also said to address the web app? I think that passage is missing… Because even in my case the popup doesn’t close by itself at all…
I will continue to squeeze and squeeze this even by making several attempts… but so far I have not achieved anything… All that’s missing at the launch, please let us know!
I kept making several attempts as @nick.carroll suggested. What I did is copy the page that I use to log in with the web app. This page does not contain anything extraordinary, simply the Mini Orange element that allows different API calls and token validation.
Compared to before, I have eliminated the redirection to the home page of my web app from the workflow. Now, if I’m logged in, the external browser’s popup for login no longer appears, but it directly accesses the home of my mobile app, recognizing the user. This only happens for the web preview. Before this change, the web browser popup appeared even if I was loggiato and showed the home of my web app. I had to close the popup and wait for the redirection to the home of my mobile app.
Everything I said, doesn’t apply to Bubble Go. Even with these changes, his behavior has not changed at all. It does not recognize the user as logged in and this is exactly what happens to @kenton.baker with its app.
Now my doubt is, can’t it just be a problem related to the Bubble Go App?
I hope it will be solved soon since I want to push the builds to the stores…
