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.
Related
I’ve got a set of APIs written in ASP.NET. These are to be accessed by a web app and native mobile app, and should be protected by the SSO.
I would like to be able have a SSO, where the user can login online and access the web app, and can also login on the native app (via the browser), and it’ll remember their login details (ie with an authorization_token).
I’ve been looking into IdentityServer4 but I’m a bit stuck on which authorization flows I would need for this.
Any help is appreciated, as it’s starting to hurt my brain! Do let me know if I need to explain it better.
For flows, there are today only two flows you should consider.
Authorization code flow, this flow is for clients where you want a user to login/signup, like a mobile app or web-application. Meaning, you have a user and a browser involved here.
Client credentials flow, is all about machine to machine communication, where you have no user involved.
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
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)
We are developing a hybrid mobile app (code is written in HTML and runs on browser shell as a native app on the device). We need to authenticate the user against an external security manager. I've seen the Gmail App in iPhone which opens a browser to authenticate the user. We are also looking to do something of that sort. We just need to gather your thoughts on how authentication can be done with some external security manager in a mobile app.
Also I noticed that Dailymotion website was able to know if the user is authenticated with Facebook. This looks like a cross domain authentication.
Can you please share your thoughts on how Google and others have implemented it?
What you are looking for is OAuth and OpenID services to federate your login. Depending on the architecture of your system you can implement whichever one you like or even a hybrid of both.
Take a look at this link: Federated Login for Google Accounts
It provides all the useful information you need.
Hmm this question seems old but in case you haven't found an answer here's how I did it with my hybrid apps :
open url on client side with the provider's (facebook/twitter/instagram) url for login
the user logs in and is redirected to the server's callback url (my server is written in nodejs)
once I've got the access token from the provider. I save this token and then create a token for the client to reuse every time the user wants to access a protected ressource.
Download the apk and test it.
If this is what you're looking for you can checkout both the client side code at : https://github.com/malikov/Authenticate.me-client-cordova-ionic
And the server side code at : https://github.com/malikov/Authenticate.me-Node-Server
Cheers
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