Is it possible to for an Ionic(5) Capacitor(3) application to complete an Open ID (Auth0) flow? - ionic-framework

I am struggling to utlise the angular-auth-oidc-client to add OIDC workflows into my Ionic app (android), although I feel the issues are more Capacitor so not sure that the library is the issue. There are numerous (old) posts on Google of people who have had similar problems, so I'm trying to ascertain the current state of play. I can:
By utilising a custom android scheme in my AndroidManifest, and an 'appUrlOpen' listener in app.component my OIDC login page loads in the Chrome browser on the device, and then returns to the Ionic app and opens the correct app page. Unfortunately because I've opened the login in Chrome it hangs around in the background with the username and password populated. I've no handle to it to close it, and the Capacitor plugins don't help me here.
Alternatively, I can add my ID Provider domain into 'AllowNavigation' in capacitor.config.json. This opens my login page in the app's webview, begins the redirect on successful login but fails (hangs) because Capacitor is not loaded when it attempts Window.Capacitor.triggerevent calls.
This is probably classed as a poor question, and I appreciate that it is light on code, but I'm interested in whether anyone has actually managed to do this successfully, as there are so many dead ends on google and github of people who've given up!

Yes it is possible to complete an Open ID Flow on ionic with capacitor.
You need a capacitor plugin to do so, ionic provides an own payed plugin (https://ionic.io/docs/auth-connect), other alternatives exist.
angular-auth-oidc-client out of the box works only on browser, not on iOS or Android. It seems that some adoption can be made, see https://github.com/damienbod/angular-auth-oidc-client/issues/807.

Related

Any experience with cypress-social-login using Facebook provider?

I am trying to make an automated test of the Facebook login feature in our web application in Cypress. I would like to skip the visual input of credentials and rather provide them programatically.
I came across the cypress-social-login plugin - https://www.npmjs.com/package/cypress-social-logins
Does anyone have the experience specifically with the implementation of this plugin for Facebook login? Or did anyone manage to automate Facebook login without any plugin?
Another question is: for the plugin to work, I have to provide a login url fom my application. But my application doesn´t have a specific login url. It uses a fullscreen modal that contains a Facebook login button. Is there a way to modify the plugin to deal with this?
Meanwhile I accepted this fact. But I was successful by using another much simpler approach: First I go to facebook.com and log in there. Then I open my App and click the Facebook login button. In this way I can simulate the majority of users that are already signed in.
Unfortunately, when I run the tests on Lambdatest, Facebook won´t let me sign-in and tells me that I am misusing their services by going too fast :D
For now I am left by running tests locally.

How to get data from Cordova's in-App Browser

I'm working on authentication for an Ionic 4 app. I'm using the in app browser plugin to login. After successful login an access token is sent back to the client. I can't figure out how to get the token from the In-App Browser to the app.
You can use an event listener such as :
this.browser.on('loadstart').subscribe(event => { this.checkForToken(event); })
Where checkForToken can look at your "event.url" and parse the token to be stored to localStorage or some other method to be used to login with once the in-app browser is closed.
Using events to listen for load start and stop was an awesome idea. I was, however, facing another issue. Google doesn't allow sign in using the In-App Browser and I really needed that. After asking around and looking at similar past issues I came across a Cordova plugin called BrowserTab. This was awesome as it's an instance/Custom Tab from chrome so it worked fine with google sign in. Another problem came up. You can't inject Javascript into BrowserTab and there was no way to programmatically close it once done. I looked around some more and that's when Deeplinks came to mind. I used the Deeplinks plugin and passed my access token as a parameter. When the user logs in, the BrowserTab redirects to a Custom URL scheme link for my app with the access token in the URL. Now it works perfectly. I've read somewhere that IOS is getting rid of Custom URL Scheme links. Luckily, it still has support for Universal App Links

FB.login() inside inapp browser (no popups)

I have my Facebook login process working on desktop and mobile, except for Facebook's inapp mobile browser (ios and now android). The issue is that if you call FB.login(), nothing at all happens. I assume this is because the inapp browser doesn't deal with popups.
I understand that a redirect auth flow circumvents the need for a login/permissions popup, however I have built a web-app, which means it is a pain to deal with storing the users current state at the point of signing in.
Does anyone have any good solutions for this?
Also I have tested many other sites login buttons through the inapp browser, and all of the ones I have tried so far don't work. Facebook has done a great job of breaking a large amount of sign up processes.
As stated in the comments, that seems to be a bug either in the Android FB- App or in the Android 5 WebView component. There is a bug report at facebook, but they are still working on it. The only solution i could find for now is to turn off the internal browser: http://www.androidpit.com/facebook-disable-browser
Because that action has to be taken by the user itself, it's no satisfying solution. Therefore i guess the only thing we can do at the moment is to stay tuned for facebooks fix.
Update
Facebook confirmed this is a bug. They are working on it. Stay tuned...
2nd Update
Facebook rolled out a patch. Works for me now.

What's the correct way to authorize PhoneGap application to the Facebook?

I spent a while already to fix annoying issue with Facebook in PhoneGap app. And still a lot of things goes wrong with that. The thing is that I use Appery.io and Facebook plugin.
This is how my Facebook console looks now:
I suggest that localhost might be a reason of the issue. However, I got it into Facebook_Helper.js:
Everytime I try to sign in with FB account, I get the same error at the child window:
So what I've got is that app is authorized at this moment indeed, because there's a menu button at the navbar that allows me to navigate through FB profile:
The first issue lies in that the child window never gets closed automatically once user submitted Sign In form. And the second one is that I can't get the access token to the app directly. I know I'm doing something wrong, but I spend more than a week on that and nothing was clarified.
Honestly, I've no idea why it's not working. I saw a lot of apps written in PhoneGap that use the same authorization too, and they work as it should. Will be appreciate if you take a look into that and, maybe, advice something.
First, I don't see iOS or Android in your developer.facebook screenshot.
Second, you should implement native facebook integration if you are developing an app, if I understand correctly from your code, you are trying to handle only web browser version of authentication. Native integration is both the suggested way by facebook and platforms and better experience for end users. If users have facebook app installed, authenticating over fb app is more secure after all..
You can use a cordova plugin for facebook integration, here is one of the plugins (I am one of the authors): cordova-facebook plugin

How to implement my android algorithm on iOS?

I have an android app working this way:
User read QR-code with my specific URL
If the app installed it intercepts this URL and handles it somehow.
If app not installed standard browser opens this URL and it leads to Google play on app page.
When user install and run app first time it read browser's history and look for my URL.
If app found URL in browser's history then it handles this URL again.
Is it possible to implement this behavior on iPhone/iPad?
I suppose key features here are to read browser history and to intercept http URL's.
If this is impossible how would you implement this thing on iOS?
Thanks in advance for your help.
You can use custom application URLs in the form: myApp://... iOS will automatically launch the application if present. The logic for handling the 'not-installed' case has to be in the QR code scanning app. can be handled by the scanned website via a forwarding link using the iOS custom URL scheme (this might be useful for usage stats).
Additional info on implementing Custom URLs...