auth0 / auth0-angular

Auth0 SDK for Angular Single Page Applications
MIT License
177 stars 58 forks source link

Does not work with Ionic 5 / Capacitor and Deep Linking: Cookie is not set #93

Closed Schwankenson closed 3 years ago

Schwankenson commented 3 years ago

Got Auth0 in the compiled capacitor App running like this: https://auth0.com/docs/libraries/auth0-single-page-app-sdk But it does not work with the angular services: https://auth0.com/docs/quickstart/spa/angular/01-login

I could not find out why. It just does not set the cookie, which is set in the handleRedirectCallback function of the auth-0-spa-client.

And another thing: My redirect url is app://myapp.com, while my app is running in the capacitor webview on https://myapp.com. With the auth 0 angular service, I get the error, that it is not allowed to be on another URL when calling handleRedirectCallback than the redirect URL was.

frederikprijck commented 3 years ago

Thanks for reporting this.

We do have a template in place for reporting issues, making it a bit easier for us to understand the problem, reproduce it and, potentially, resolve it.

Would you be able to fill the missing info that is asked for in the template? Especially a reproduction of the problem so we can investigate what is going on.

Thanks.

Schwankenson commented 3 years ago

Hi Frederik,

sorry, I can`t deliver a example project at the moment. But the issue should be reproducable by:

1. Creating a Ionic 5 / Angular / Capacitor project https://capacitorjs.com/docs/getting-started/with-ionic

2. Add deep linking: https://capacitorjs.com/docs/guides/deep-links

To add a link like app://myapp.com as Auth0 RedirectUri, which redirects back to app after login in browser

3. Implement Auth0-Angular https://auth0.com/docs/quickstart/spa/angular/01-login

Settings the Auth0 callback app to the deep link, which opens the app after redirect flow

4. Compile for android with npx cap add android and open Android Studio with npx cap open android

In the compiled app, you should see the problems I had. With "ionic serve" in local browser, everything works fine.

Maybe a tutorial is a good idea? By the way: There are a lot of people asking for it, and do not get satisfying answers. Maybe a tutorial for Ionic / Angular / Capacitor tutorial would be great at all. I delivered you the basic structure for the tutorial with this post :)

I know: There is the Auth Connect Plugin. But it is only available for Ionic Enterprise customers. And it`s hard to become one. It`s a manual validation which takes some days. And most people just want to integrate Auth0 in their Ionic app without doing such elaborate stuff.

https://community.auth0.com/t/ionic-4-capacitor-how-to-integrate-auth0/23518 https://community.auth0.com/t/integrate-auth0-into-ionic-app/37301 https://community.auth0.com/t/auth0-with-capacitor-and-ionic-5/51096 https://community.auth0.com/t/ionic4-capacitor-react-integration/33290 https://community.auth0.com/t/capacitor-and-auth0js/44106

One more info: Your Ionic 4 Tutorial is for Cordova. And you need to make deep changes in your system to implement it. Cordova is outdated, and it really feels bad to make the changes you described there. Capacitor is the new way, and there are no good infos for how to integrate capacitor with Auth0. https://auth0.com/docs/quickstart/native/ionic4/01-login?_ga=2.14318207.97515475.1606385330-914523536.1581625652&_gac=1.18492301.1606605930.EAIaIQobChMItO6SubGm7QIVkbt3Ch25EgAvEAAYASAAEgKm-PD_BwE

frederikprijck commented 3 years ago

We will have an internal conversation about how we want to move forward with Ionic, I am not sure this should be the same SDK as the one for Angular.

To try and help you on the short term, someone has succesfully used Auth0 with Ionic and Capacitor as mentioned here https://github.com/auth0-samples/auth0-ionic4-samples/issues/10 .

Schwankenson commented 3 years ago

Ok, thank you. I have it running now, too, by using the auth0-spa-client library, not the angular library.

I think, it are only small changes, which would make the Auth0-Angular client working with Ionic / Angular / Capacitor. It was just the auth0.is.authenticated cookie, which was not set. That should be easy to fix.

frederikprijck commented 3 years ago

Would you mind sharing what you actually had to do to make it work? This could both help us as well as anyone that navigates this repository in the future.

Schwankenson commented 3 years ago

It`s a full featured app, so this is unfortunately not possible. But it should not be much work to go through the steps i described above.

frederikprijck commented 3 years ago

Hello,

We have made some changes to our SDK and we believe it should support Ionic with Capacitor now. We have updated the quickstart guide here.

Let me know if this works, then we can close the issue.