openid/AppAuth-JS

Benefits of this library

sattaman opened this issue Β· 33 comments

I've got a mobile app which I've currently used oidc-client to implement auth for.

How does this library compare to oidc-client?

The owner pointed me to your project.

The main goal of this project is to be able to provide a standards compliant OAuth2 client for native apps written with JavaScript (Chrome Apps, Electron and Node.js client side applications).

It looks like your intended use case is React Native. What is the intended target platform (Android / iOS) ?

We don't support React Native, yet. We're working our way up to supporting more client-side JS frameworks, the library is still pretty new and it will take some time.

If you'd like to help, we'd be happy to accept contributions! You would need to implement an AuthorizationRequestHandler, AuthorizationNotifier and Requestor for React Native, calling out to the platform-specific pieces for creating an SFSafariViewController / Custom Tab as required, handling the redirect, and sending token requests. We don't have a lot of documentation to help you do this yet.

I think we answered your question. If you would like to reopen this issue, please let me know.

May I ask how this is looking now? For use in web pages and/or React Native?

Thanks a lot.

We already support web apps. Look at the appfolder for reference. I have not made progress on the React Native side of things. Will take a look at it once I have some time 😁

Thanks man :) :)

Ionic/cordova seems to be another popular framework to support to

Just to let you know, there is an AppAuth library for React Native now. You can find it here: https://github.com/FormidableLabs/react-native-app-auth

fantastic :)

@nmocruz @janiilmari
Does this library support Ionic/Cordova at the moment?

Thank you!

@lostdev not sure, I didn't try. I'm using oidc-client-js at the moment, that has some old support to cordova. Because I'm not happy with that, I was to change to something updated.

this sample is old and I got some problem to use it, google is not accepting anymore the cordova webview

@nmocruz exactly, I was looking for something else as well.

@lostdev The problem with Ionic/Cordova or hybrid apps is the webview, but possible to overwrite the browser agent, because this library seems to not do anything to show the login page in a system browser, tab etc I suspect that is not working properly.

If you want to use Cordova or something similar, you should* choose a wrapper to AppAuth-Android / AppAuth-iOS which is what the react-native-app-auth library does. Thanks for the link @janiilmari.

@tikurahul don't know what you mean with "choose a wrapper" but it seems like it's missing a plugin to cordova that code wrap AppAuth-Android and AppAuth-iOS implementations.

@tikurahul other is that hybrid apps in cordova easy (depends on what we use) build to andoird, ios and windows phone. Windows phone is not completely dead since that we have customers asking for it.

@tikurahul thank you! I've been searching for a library for days and I haven't found any wrappers anywhere.

I'm at a point where I'd have to build them myself it seems, or, use a library with implicit flow using an in app browser and handle the response in a url fragment (but this would be a last resort, I know there are preferred methods).

Ultimately I'm looking for an authorization code flow that supports pixie (PKCE) in Cordova, but I can't find anything.

The key is to be able to launch a browser tab / system browser and to complete the authorization flow (because the user is probably already signed in) and then bring the user back to the app.

https://github.com/google/cordova-plugin-browsertab does the first part. The 2nd part is do-able by either using Intent's or using universal links in iOS. Unfortunately there are no samples I know of, that complete the flow end to end. You have a couple of choices & guidance but that's pretty much it. For react-native, there seems to be a nicely packaged library that can do everything.

Choose wisely. πŸ˜„

@tikurahul you had to go there didn't you... App is already built using angular so I'm stuck here :)

@lostdev Here's a tutorial I wrote that uses Ionic (with Angular) and Cordova's in-app browser to authentication with Okta. Hopefully you find it useful. https://developer.okta.com/blog/2017/08/22/build-an-ionic-app-with-user-authentication

Hi @mraible!

Thank you for the link. Already came across your blog and actually already did a poc using your example. It was extremely helpful.

Two issues I see are that it uses the in app browser, and also doesn't support the Auth code flow, and thus didn't have a refresh token (as far as I understand).

I may try to use your approach with AppAuthJS here to see if I can do something. I won't be using Google Auth so the in app browser should work for now.

Thanks a lot for the reply!

@tikurahul I'm having trouble understanding where the refresh token will get stored on a native device. I know it's supposed to be treated with care and cannot simply be stored in local storsge, for example, so what's the best practice? There are plugins I can use to store the token within the iOS keychain, for example.

The spec doesn't say anything about storing tokens so I'm assuming the app wouldn't store the refresh token, and instead start the Auth flow every time the app is launched. But my concern with that is that the user would need to login fairly regularly unless the idp tokens are permanent?

So much to learn!

Actually localStorage is a good place to store refresh tokens. It’s sandboxed to your app. On iOS you could use the keychain but localStorage is a good place to start.

One thing to remember is any storage mechanism you chose is accessible to all 3P scripts you embed. So embed only the scripts you need and choose a good CSP.

Also redirect URIs need to be protected. That’s why the web sample of AppAuth-JS uses redirection to a fragment URI (double redirect) as fragments are not available to servers logging referers.

Hi, I'm struggling with the same question - but being a Cordova noob, the road is dark...
Based on what I find here and elsewhere, I consider the following, using an authorization code flow:

1/ In the Cordova app, create an AppAuth-JS AuthorizationRequest, but rather than calling performAuthorizationRequest use https://github.com/google/cordova-plugin-browsertab to redirect to the authorization server in an in-app browser tab.
2/ After authentication, redirect back to the Cordova app via a custom URI scheme and using https://github.com/EddyVerbruggen/Custom-URL-scheme so that the code ends up in the cordova app
3/ Use AppAuth-JS performTokenRequest to exchange the code for tokens.

I see some challenges for PKCE (cf #28), but overall, should this work? Am I missing something essential?

@FreeWillaert Your approach looks okay to me. πŸ‘

has anybody successfully used this aside from #21 ?

Could you share your implementation ?

Following the discussion in Issue 21, I've uploaded our implementation of AppAuth for Ionic. More here: #21 (comment)

Hi, I'm struggling with the same question - but being a Cordova noob, the road is dark...
Based on what I find here and elsewhere, I consider the following, using an authorization code flow:

1/ In the Cordova app, create an AppAuth-JS AuthorizationRequest, but rather than calling performAuthorizationRequest use https://github.com/google/cordova-plugin-browsertab to redirect to the authorization server in an in-app browser tab.
2/ After authentication, redirect back to the Cordova app via a custom URI scheme and using https://github.com/EddyVerbruggen/Custom-URL-scheme so that the code ends up in the cordova app
3/ Use AppAuth-JS performTokenRequest to exchange the code for tokens.

I see some challenges for PKCE (cf #28), but overall, should this work? Am I missing something essential?

@FreeWillaert I did that and worked for me thanks.

can i get any references of react, cordova integration with OIDC