Flutter with Native Webview using OpenID Connect and Okta - flutter

I am currently trying to implement OpenID Connect using Okta as my identity provider.
The only plugin I found that was capable of handling OpenID Connect was the Flutter AppAuth Plugin .
Unfortunately I was not able to use it with a Native Webview in order to have a seamless experience for the end user or more especially to not have any navbar cf. image below:
Anyone was able to implement this flow as a native Webview ?

I don't believe you'll be able to do this in a native Webview. OAuth and OIDC are designed so the application never knows about the user's credentials - the application just receives an ID token and access token. If you tried to embed Okta (or any OAuth flow) in a native login, the application could get at the user's credentials, and possibly harvest them. Popping a browser is a more secure way of doing things.

To add to Matt's answer, AppAuth is the standard pattern here, which involves use of special InApp / system browsers:
Chrome Custom Tabs
ASWebAuthenticationSession
My blog has some details on this. I always recommend people to start with AppAuth samples. A couple of posts:
AppAuth Setup with Private URI Schemes
Advanced Sample with Claimed HTTPS Schemes

Related

How to implement proper External Authentication in Cordova, Ionic w/ ASP .NET WebApi - Google/Facebook

I have a mobile application built upon Ionic Framework which uses many Cordova packages. We are upgrading the app from Ionic3 to Ionic5. In the Ionic3 application our .NET API was responsible to managing user logins. Going forward, in the Ionic5 app we will NOT be managing user credentials - we will be using 3rd party Identity Providers such as Google, Facebook, and Twitter.
We have implemented the Cordova packages to handle external authentication with Facebook and Google and it works fine. How do we tie the token that is received from Google/Facebook to our .NET API? When we try to use the token provided from Google/Facebook we - of course - get a 401 because our .NET API doesn't know about that token as it was issued from an external source.
I am aware of the process of how to enable the schema described here (External Authentication Services w/ASP.NET Web Api) but in this case the user agent browses to the Web Application in the browser. This is not true in my case as the user agent will be using a mobile application not a web site.
But I hope the principal is the same. But I'm missing something here.
The user will open the mobile app, authenticate with Google/Facebook and be issued a token. Now, what needs to happen to get that token to be recognized by my ASP.NET Web Api?
For example. When I registered my mobile app with Google Developer's Console I selected that the type of app is an Android application and was issued a Client ID for Android now how can I use this token in my ASP .NET Web API? There MUST be some way to tie the two together or some article out there.
Thanks in advance for your assistance!
Also, I looked at this post and see its 11 years old. Is there something here that I should be doing? Please help point me in the right direction. how-can-i-verify-a-google-authentication-api-access-token
It is about data ultimately, and identifying users in a consistent manner, then tracking their history with your app / business.
SOCIAL LOGIN PACKAGES
These are often cheap and nasty solutions that add complexity to your apps as you are finding.- especially when you need to look things up by user.
OPTION 1 - COMPLEX APPS
Your API could look at the token issuer (ISS claim in the token) and download token signing keys from either Facebook or Google - if JWKS endpoints exist. Then create a user from the access token's sub claim if required.
OPTION 2 - SIMPLER APPS
Deal with only a single type of token in your UIs and APIs, which will work like this. It moves the complexity to your Authorization Server (AS):
You have an Authorization Server (use Google maybe) to deal with token issuing and other central OAuth concerns
You have multiple Identity Providers (eg Facebook + Google) to support different login methods for users
During login Facebook posts a token to the AS
Then the AS issues its own token to your UI
The AS may be able to use Account Linking to provide a consistent user id regardless of login method
There is a learning curve in getting this working, but once done it can easily be scaled to many apps with zero code changes.
The proper answer is Auth0... see the below sequence diagram!

How to integrate NativeScript Angular android mobile application with Okta Auth flow ith PKCE

I have a NativeScript Angular android app, which i need to integrate with Okta. I was able to successfully integrate my Angular web application with Okta but (As i am not mobile app developer) finding it hard to wrap my mind on how to integrate it with mobile app.
I tried to go through the documentation available at Okta official site(https://developer.okta.com/docs/concepts/auth-overview/#choosing-an-oauth-2-0-flow) it feels like the recommendation is to implement Authorization Code with PKCE for which I would need below:
1.An embedded browser in the mobile app to show Okta login page.
2.Some sort of local server which can receive callback from Okta with auth code and integration of the auth code received in callback with application api service.
Do you think it is right line of thinking?
If yes, how shall i get a web server in mobile app and what would be its address(Would it be localhost?) to receive callback from Okta?
Is there any JavaScript library which can be easily integrated with NativeScript code to do it?
I came across https://github.com/openid/AppAuth-JS but not sure how can i integrate it.
Thanks
You can use the Okta widget and the openAuth method of InAppBrowser plugin to be able to authenticate the users and later redirect to the app again by using deep linking, you can see the example folder of that plugin: https://github.com/proyecto26/nativescript-inappbrowser#usage
We're using this plugin from React Native too and we can get the token from okta after redirect the users through deep linking, it works very well. It's required to deploy the Okta widget in an external domain and register the deep links of your apps (Android/iOS) from Okta, e.g:
${scheme}://${host}/callback (Android)
${scheme}://callback (iOS)

Web Authentication (like firebase auth) that supports a11y and i18n

I am building a web app using the MEAN stack and I want to enable user sign-in with Facebook, Google, Twitter, etc. The caveat is that I also want to support accessibility and internationalization.
The Auth solutions that I've looked at usually popup a new window - which is not ideal for my app; I want the login to be part of the normal page flow.
I can write my own UI markup that does the authentication on the server side using JWT and exposed APIs (like Facebook API) but I was hoping that there is already a solution like Firebase Auth that meets my needs. Any suggestions?

How to authenticate with Foursquare OAuth2 within a jQueryMobile app (no useragent flow)

I am building a mobile app with jQueryMobile and I intend to deploy it onto iPhone thanks to PhoneGap.
My question is : how can I authenticate myself with Foursquare using the OAuth2 protocol in my jQueryMobile app ? One solution would be to use the useragent flow of OAuth2 but this would force the iPhone to launch Safari and thus not stay within the app. Are there any better solutions than this ?
For an iPhone-based or client-side application like you would have in PhoneGap,
Foursquare recommends one of these methods.
If you have no substantive server code, you can embed a web browser and use the token flow, redirecting the user to a dummy page on your domain. You can then grab the token off of the URL and close the browser. We have sample Android and iOS code for your reference.
If you have a server as part of your application, you can use the server flow above, possibly in an embedded browser. Similar to the Facebook API, you can add display=touch to your authorize or authenticate URLs to get a mobile optimized interface.
An alternative to the above is to use the server flow and an external browser, but redirect to a custom URI handler that brings the user back to our application. You can embed the secret in your application and exchange the provided code for an access token. PLEASE take steps to obfuscate your client secret if you include it in released code, and be prepared to rotate it if needed.
https://developer.foursquare.com/docs/oauth.html
This could probably be handled with the ClientBrowser plugin for PhoneGap or just adapting the sample code they have provided into PhoneGap plugins.
One of the core intentions of OAuth2 is to not allow browserless authentication flow like we did with XAuth in the past. Service providers want consumers to see what permissions they are signing off on, and want control of that process.
I'm not very experienced with Phonegap, as I'm a native developer, but if there's a way of instantiating a UIWebView and showing it to the user, you could at least keep the web interaction 'inside' of the application. Given phonegap is basically showing a UIWebView this should be possible. It is possible to examine the source of the html within a UIWebView using
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

Can you use openID as a single sign-on for an iphone app?

I'm looking to implement Single Sign On for a native iOS app whereby logging in with this single sign on gives the mobile device authenticated access to our private service in a fashion that is somewhat similar to oauth.
The marketing text on openid.net suggests that "OpenID is a safe, faster, and easier way to log in to web sites.". Emphasis on web sites.
So the question is: Is it reasonable to implement openID on a native mobile app, or is openID only for web sites.
I've been scouring the web and I'm not finding a way to fit openID in as my login option.
The best way to do this seems to be to use a UIWebView and render a log in page from your site in it. Once the user logs in, they'll be redirected back to your site and have an auth cookie, which you can extract, store, and send on subsequent HTTP requests to the server.
See this, which has a sample code link at the bottom.
OpenID sends its messages as a series of HTTP requests and responses. Your app and the openid provider must communicate to each other via HTTP post, and you will need to redirect the user to corresponding URLs, and have a URL for the user to be redirected back to. As such, you will probably find it difficult to integrate with your app.
Derek Knight claims to have been experimenting with iOS and OpenID using the Janrain Engage iOS SDK. Although the github link he references no longer exists and he doesnt provide a complete and verified solution, he does offer an idea for how it might work.
OpenID and iOS development - gordonknight.co.uk
Janrain Engage for your iPad Apps
The accepted answer diminish the OpenID protocol. OpenID is a federated authentication protocol aiming simple SSO experience, its a web based protocol but it can be implemented if you design an authentication broker.
APPs share nothing, apps should never access anything but identity token and access token (if allow). here is a link to get you starter in the right path to build seems-less SSO in the mobile between apps regardless the app isolation level.
https://www.pingidentity.com/developer/en/resources/napps-native-app-sso.html
Libraries:
https://github.com/openid/AppAuth-iOS
https://github.com/openid/AppAuth-Android