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

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)

Related

SAML link from native mobile app to website

Fairly new to SAML - so I was hoping someone can help me with this question.. Within our mobile application, we use our clients' SAML integration via the IDP-initiated flow. This all works as a charm, logging in, refreshing the token, etc.
Is it possible to open a website (not another mobile app) in our mobile app and pass on the SAML authentication so a user doesn't have to sign in again?

Flutter with Native Webview using OpenID Connect and Okta

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

Keycloak OpenID Client without browser

Problematic
I have a working Keycloak in production and I need my users to log into a mobile app, developed using react native using that Keycloak. Till now I was using the normal login flow through the in-app browser as AppAtuh, but now I received a request from users, to say in the app while logging in.
What I've tried
I made the Keycloak theme for the mobile login ressemble the Mobile App UI so much, that it could be just opened using react WebView as a normal screen.
On the paper, this idea works, but in real life, I cannot take advantage of the Keycloak ID cookie placed. So whenever the WebView open, a new session with cookies are generated. It's not useful.
I started calling keycloak endpoints myself from inside the mobile app. It's not an easy job, because some endpoints doesn't works because of OTP configurations that I've done.
Secondly, this Idea works for simple process like login, but does not work very well for registration or reset-password. And it's just an example. My Kecloak does have a list of Authenticators which uses phoneNumber and some cookies to login.
Specifications
I'm using Keycloak 10 (started with keycloak 6 a year ago)
The mobile app is developed using React Native and Expo. Tthe first login flow was using the library Expo AppAuth and the second, React native WebView
Have you read that? I think you should consider using Custom URI scheme for your Keycloak OpenID Connect client and use default phone browser. This might be helpful as well.

Facebook Login with Blackberry Webworks

So I'm trying to build a Blackberry Webworks that integrates with Facebook.
I'm trying to use the Javascript API provided by Facebook, but I'm having some issues with logging in.
The typical "FB.login" function creates a popup, and this doesn't show up on a Blackberry so using that is no good.
Another issue is that I have no idea what to set as the redirect_url for the oauth login, because Webworks pages are referenced locally (local://index.html), and the API rejects this as a valid url. (I've also tried just index.html, but this also causes an error)
And finally, I have no idea what to use for the Mobile Website URL on the Application settings and not sure what other settings to use. Since users will be coming from a Webworks app, Facebook is rejecting login requests if I try to call the oauth url directly. (191 Error).
I figured out the only viable way to do this is to have a web server that will go through the OAuth2 authentication process documented by Facebook.
What you can do in Blackberry is open a new window or to use a Blackberry BrowserField that links to the web server, that way, your page will be able to get the oauth token that you can use to make Graph API calls.

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