OAuth2 registration/login flow

Is it possible to implement an oauth2 registration/login flow? My use would be with Strava, but it could just as easily be GitHub or similar. There will be a backend nodejs server handling a lot of the flow, the frontend app needs to start the registration flow and receive a token which it then uses for every REST data request to authenticate.

The documentation is very thin on the ground when it comes to authentication so its not clear to me whether anything like this is supported. I’m a new user of AppGyver and currently just evaluating suitability for this and future projects.

3 Likes

We’ve actually got an OAuth flow function using https://github.com/FormidableLabs/react-native-app-auth coming up in the next release, though it’s initially Android-only as we need to do some deep-rooted AppDelegate mangling to get our Build Service to support the plugin’s dynamic inclusion on iOS. But it’s coming!

Right now, you can also do it manually by first opening the web page via the Open URL flow function, then making the redirect URI of your OAuth endpoint call e.g. appgyverrn://auth?code=<code>, which will then trigger the “App brought to foreground via URL” event type of the Receive event node, with the token in the event output property.

Then, you send the code to your backend server to exchange for the actual access token.

Auth in AppGyver is essentially just the initial view shown when you have auth enabled, then doing some calls to a backend and storing the response in storage / app variable (the templates use appVars.currentUser).

Gonna have more tutorials and videos on this soon, but in short, definitely possible!

4 Likes

Great! Thanks for the explanation :smile:

Hi Harri - Having some trouble implementing this, would love your help.

I can link out to my authentication page (Auth0), which then redirects back into Appgyver after logging in. Everything looks right, except the “app bought to foreground via URL” event never fires - even though the Appgyver app is indeed loading back up after the redirect.

Are there any keys to making this work?
I’m using the android mobile app connected to the Debugger.
Thank you!

There’s at least a very WTF bug where the selected event disappears from the event node magically, so if you check the node again and potentially reselect the correct event, that could fix things. Let me know if it helps.

Thanks Harri - I did see that issue, but re-selected so that wasn’t it. Maybe could help to clarify,

  1. In your example, you redirect back to appgyverrn://auth?code=<code> , is “auth” the name of my login page, or is it a special string which has a meaning in Appgyver? I tried naming my login page “auth”, though the ID is still page.Page3

  2. When it redirects back and brings Appgyver to the foreground, it loads the same page I was previously on. Should it be loading a special auth page (ie my login page) each time? (relates to question 1 above)

  3. So far I was testing this in the Android companion app. Would it work the same way with a web deployment, just send it back to the same page URL I was on before?

  4. To get myself back to the same URL, would you recommend detecting the device and conditionally sending it back to a https:// vs appgyverrn:// URL?

Thank you!

The “auth” has nothing to do with your pages or whatsoever, it could be any string. There’s an unfortunate bug where the event does not trigger when the app is launched, but should work if the app is open in the background. You can’t do it on web the same way so you should have specific logic and paths for both web and mobile device.

A fix for this should be scheduled soon.

1 Like

Hi there. Was hoping you might provide an update on the status of this. Thank you!

We’re looking into fixing this in the new runtime but note that you can still dance around the current bug by having a handler in the “app launched” event as well.

Do you have the link for this tutorial? Cant wait to implement on my apps

Previously, I use the redirect uri (http) but it does not redirect back to the apps. Then I change to appgyverrn but I shows an error as invalid parameter value.

is it the bug or I use wrong redirect_uri?

Depending on the OAuth provider, there’s likely a step to define a native URL scheme vs. a web one for the OAuth client – OAuth 2.0 for Mobile & Desktop Apps  |  Google Identity says you must define an iOS/Android application type specifically.

Any updates on this Topic? We want implement a correct OAuth2 Flow (implicit flow / PKCE) without entering the user/password into a AppGyver Screen and right now I’m unable to find any guidance/support for this.

Maybe there is an example application that can do this

1 Like

where can i get the redirect URI of my OAuth endpoint?

1 Like

bump. did oAuth die?
can a staff weigh in on this? is Appgyver going to support OAuth or not?

1 Like

There is support for OAuth, but it’s not a native log in nor is it the most straightforward to use – the basic pattern for doing OAuth is to open the link from the app, then redirect back to the app and on the global canvas listen to app brought to foreground via URL event. Use the AppGyver Preview url scheme while developing the app and switch it to your chosen url scheme for when you’ve built your app and are testing it and submitting it to stores.

Thanks for the guidance @Mevi . Although indeed far from straightforward, this helped me get closer to having a working social login. May I suggest three things, though ?

For one, the documentation link you pointed to includes two different URL patterns, none of which turned out to be correct. I found the right one here : Appgyverrn:// not working? - #7 by Cecilia . Neither sapappgyverrn://auth nor appgyverrn://auth work. The correct URL seems to be sapappgyver://auth .

Second, may I suggest a tutorial of some king, either via video or a page, so as to guide the many people here looking to enable logging in via Google, Facebook, Apple or other providers. This is quickly becoming a basic functionality. I understand that there is no easier way to do so today than to redirect to a browser page and come back to the app. It requires a lot of juggling for the end user, which is far from ideal. But if the developer himself has a hard time making it work, he may well move on.

Third, I would like to know if you are planning on enabling SDKs to be integrated, so as to plug-in external login in a native and fluid way. If so, what is the current timetable ?

Thanks a lot for the great platform and for your support.

Thanks, I fixed the documentation accordingly!

As for docs/SDK, I think it unlikely we would have the resources to do a tutorial for OAuth in its current state – but we do have third party plugin support in the works right now and when it gets finished, first of all anyone would be able to provide a third party plugin for OAuth, and it’s possible we will implement it ourselves, as it is a feature that does get a lot of use, and it has been requested a lot.

Time table for third party plugin support is that we’re still hoping to get it out this year, but we had some delays due to illnesses so… we will see. It’s a major priority for us though, so I expect it won’t be much longer.

1 Like

Hi @Mevi ,

Thanks for the reply. It is very good to know that 3rd party plugin support is expected soon, and that Oauth is to be supported in a better way.

Sorry to hear that you have been impacted by illnesses. Please keep yourselves safe and take care.

Best regards.

Another option available right now would be to:

  • use WebView (available from the component market)
  • display the oauth login page inside the WebView component
  • listen to the success redirect from the component onLocationChange event
  • parse the token from the url if using implicit grant
  • or parse the authorization code from the url and exchange it for a token if using the authorization code flow

This has its pros and cons, but notably you wouldn’t have to account for the uri schema being different between the preview app and your standalone build.