# Ionic 2+ Mobile and Web Hosted

**URL:** <https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862>\
**Category:** Get Help\
**Tags:** angular4, ionic2\
**Created:** [August 16, 2017, 7:58am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862 "2017-08-16T07:58:58Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [August 16, 2017, 7:58am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/1 "2017-08-16T07:58:58Z")

</div>

Hello my Ionic application will be deployed both as Apps on mobile, and **hosted as a web app**. How can I make the Auth0 Login available in web mode without getting the Cannot read property ‘isAvailable’ error?

Can I use auth0-js and auth0-lock at the same time as the cordova version? And somehow tell the app which on to use base on the device?

---

<div class="post-metadata">

**Author:** ![jmangelo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/jmangelo/32/7923_2.png) [@jmangelo](https://community.auth0.com/u/jmangelo)\
**Post date:** [August 16, 2017, 3:13pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/2 "2017-08-16T15:13:41Z")

</div>

Technically you can venture yourself into detecting the platform where the application is running and reacting accordingly, in this case that would mean using different authentication flows. I’m not sure if that is the recommendation or if platform detection can be done in a robust way; a quick Google search points to this [thread](https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149) in Ionic forum that you may want to read.

---

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [August 16, 2017, 6:31pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/3 "2017-08-16T18:31:13Z")

</div>

Thanks, I agree that this is not the optimum solution, I will try the non cordova approach using my Auth service that was built for an Angular 2 app, using auth0-js and auth0-lock, I will just try to figure out the callback url depending on the device.

---

<div class="post-metadata">

**Author:** ![myemail12291](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@myemail12291](https://community.auth0.com/u/myemail12291)\
**Post date:** [August 27, 2017, 5:59am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/4 "2017-08-27T05:59:51Z")

</div>

Any update? It is easy to detect the platform in Ionic: [https://ionicframework.com/docs/developer-resources/desktop-support/](https://ionicframework.com/docs/developer-resources/desktop-support/)

However, what should we do for mobile web, native, or desktop web? For native, I guess? [https://auth0.com/docs/quickstart/native/ionic2/01-login](https://auth0.com/docs/quickstart/native/ionic2/01-login)

Then for mobile or desktop web? [Auth0 Angular SDK Quickstarts: Login](https://auth0.com/docs/quickstart/spa/angular2)

It would be easier to have one way; probably could be the SPA flow, but that shows a hosted login page (HLP). It wont work without connectivity in the native situation. Any way to replace HLP with a prebuilt one and use same solution?

---

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [August 28, 2017, 8:34pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/5 "2017-08-28T20:34:12Z")

</div>

We actually stopped using Auth0 for now because of this, and we concentrate on the rest of the app, we might get back to it later.

---

<div class="post-metadata">

**Author:** ![marc-gj](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@marc-gj](https://community.auth0.com/u/marc-gj)\
**Post date:** [August 29, 2017, 3:21am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/6 "2017-08-29T03:21:20Z")

</div>

I’m having this issue as well. I want my app to work as a Progressive Web App (a fully supported part of the ionic family) and as native apps however the auth0 implementation for ionic only provides for the native app implementation.

The instructions for angular 2 + also require using the angular router which isn’t part of ionic. Would really like some clarification on whether this will be supported and possibly when.

---

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [September 5, 2017, 2:02am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/7 "2017-09-05T02:02:17Z")

</div>

Anyone has found an answer to this yet?

---

<div class="post-metadata">

**Author:** ![marc-gj](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@marc-gj](https://community.auth0.com/u/marc-gj)\
**Post date:** [September 5, 2017, 2:06am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/8 "2017-09-05T02:06:58Z")

</div>

I tried to get it to work but to no avail. We had to abandon ionic development for now until there’s a supported solution.

---

<div class="post-metadata">

**Author:** ![marc-gj](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@marc-gj](https://community.auth0.com/u/marc-gj)\
**Post date:** [September 5, 2017, 2:06am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/9 "2017-09-05T02:06:58Z")

</div>

I tried to get it to work but to no avail. We had to abandon ionic development for now until there’s a supported solution.

---

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [August 28, 2017, 8:34pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/10 "2017-08-28T20:34:12Z")

</div>

We actually stopped using Auth0 for now because of this, and we concentrate on the rest of the app, we might get back to it later.

---

<div class="post-metadata">

**Author:** ![yannick1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@yannick1](https://community.auth0.com/u/yannick1)\
**Post date:** [September 5, 2017, 2:02am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/11 "2017-09-05T02:02:17Z")

</div>

Anyone has found an answer to this yet?

---

<div class="post-metadata">

**Author:** ![marc-gj](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@marc-gj](https://community.auth0.com/u/marc-gj)\
**Post date:** [August 29, 2017, 3:21am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/12 "2017-08-29T03:21:20Z")

</div>

I’m having this issue as well. I want my app to work as a Progressive Web App (a fully supported part of the ionic family) and as native apps however the auth0 implementation for ionic only provides for the native app implementation.

The instructions for angular 2 + also require using the angular router which isn’t part of ionic. Would really like some clarification on whether this will be supported and possibly when.

---

<div class="post-metadata">

**Author:** ![myemail12291](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@myemail12291](https://community.auth0.com/u/myemail12291)\
**Post date:** [August 27, 2017, 5:59am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/13 "2017-08-27T05:59:51Z")

</div>

Any update? It is easy to detect the platform in Ionic: [https://ionicframework.com/docs/developer-resources/desktop-support/](https://ionicframework.com/docs/developer-resources/desktop-support/)

However, what should we do for mobile web, native, or desktop web? For native, I guess? [https://auth0.com/docs/quickstart/native/ionic2/01-login](https://auth0.com/docs/quickstart/native/ionic2/01-login)

Then for mobile or desktop web? [Auth0 Angular SDK Quickstarts: Login](https://auth0.com/docs/quickstart/spa/angular2)

It would be easier to have one way; probably could be the SPA flow, but that shows a hosted login page (HLP). It wont work without connectivity in the native situation. Any way to replace HLP with a prebuilt one and use same solution?

---

<div class="post-metadata">

**Author:** ![jmangelo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/jmangelo/32/7923_2.png) [@jmangelo](https://community.auth0.com/u/jmangelo)\
**Post date:** [October 2, 2017, 9:59pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/14 "2017-10-02T21:59:56Z")

</div>

@myemail12291 the link you provided shows platform detection as easy, but that the link in the answer seems to imply there’s more to it. In addition, web and native as very different platforms so there will always be a sort of impedance mismatch if try the one size fits all approach (but that’s just my opinion).

---

<div class="post-metadata">

**Author:** ![bonatoque](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@bonatoque](https://community.auth0.com/u/bonatoque)\
**Post date:** [October 29, 2017, 9:18pm UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/15 "2017-10-29T21:18:38Z")

</div>

In the meantime, is the a pure JS approach that would work with Ionic as a web SPA ?

---

<div class="post-metadata">

**Author:** ![marc-gj](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@marc-gj](https://community.auth0.com/u/marc-gj)\
**Post date:** [August 29, 2017, 3:24am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/16 "2017-08-29T03:24:15Z")

</div>

I was thinking of doing that myself but the angular method also requires that you use the angular router and not the ionic router… Do you know if its possible to implement the angular router alongside the ionic router?

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [March 2, 2018, 5:55am UTC](https://community.auth0.com/t/ionic-2-mobile-and-web-hosted/7862/17 "2018-03-02T05:55:57Z")

</div>


