bug: {"code":"auth/operation-not-supported-in-this-environment","message":"This operation is not supported in the environment this application is running on. \"location.protocol\" must be http, https

Hi,

I develop an Angular and Capacitor app. It doesn’t have any Ionic. i.e. Angular and PrimeNG components.

I use Firebase Email/PW auth workflow here https://firebase.google.com/docs/auth/web/password-auth using AngularFire auth here https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md

app.component.ts

ngOnInit(): void {

   this.initializeApp();

   this.authService.setFirebaseAuth(); // Firebase Auth service
 }

 private initializeApp(): void {

   if (Capacitor.isPluginAvailable('StatusBar')) { StatusBar.show(); }

   if (Capacitor.isNative) { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }
 }

auth.service.ts

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private authSubject$: BehaviorSubject<Partial<UserModel>> = new BehaviorSubject<Partial<UserModel>>(null);
  authChanged$: Observable<Partial<UserModel>> = this.authSubject$.asObservable();

  constructor(
    private storageService: StorageService,
    private angularFireAuth: AngularFireAuth,
    private router: Router,
    private loadingService: LoadingService,
    private toastService: ToastService) {
  }

  setFirebaseAuth(): void {
    this.setAuthState();
    this.setAuthIdToken();
  }

  setUser(userModel: Partial<UserModel>): void {

    this.authSubject$.next(userModel);

    this.storageService.set(userModel, StorageConstant.USER);
  }

  getUser(): Partial<UserModel> {
    return this.authSubject$.getValue();
  }

  async signInWithEmailAndPassword(userModel: UserModel): Promise<void> {

    this.loadingService.setLoader(true);

    const signInMethodsForEmail: string[] = await this.angularFireAuth.fetchSignInMethodsForEmail(userModel.email);

    if (signInMethodsForEmail?.length > 0) { // email already exist on Firebase

      try {
        await this.angularFireAuth.signInWithEmailAndPassword(userModel.email, userModel.password);
        this.setUser(userModel);

      } catch (error) {
        this.toastService.showToast('error', error.message);

      } finally {
        this.loadingService.setLoader(false);
      }

    } else {

      try {
        const userCredential: firebase.auth.UserCredential
          = await this.angularFireAuth.createUserWithEmailAndPassword(userModel.email, userModel.password);

        userModel.userId = userCredential.user.uid;
        this.createUser(userModel);

        this.setUser(userModel);

      } catch (error) {
        this.toastService.showToast('error', error.message);

      } finally {
        this.loadingService.setLoader(false);
      }
    }
  }

  sendPasswordResetEmail(email: string): void {
    this.angularFireAuth.sendPasswordResetEmail(email);
  }

  signOut(): void {

    this.angularFireAuth.signOut();

    this.setUser(null);
  }

  private setAuthState(): void {

    this.angularFireAuth.authState.subscribe(async (user: firebase.User) => {

      if (!user) { this.router.navigateByUrl('auth/sign-in'); return; }

      if (this.getUser()) { this.router.navigateByUrl('dashboard'); return; }

      const userModel: Partial<UserModel> = await this.storageService.get<UserModel>(StorageConstant.USER);
      if (userModel) { this.setUser(userModel); this.router.navigateByUrl('dashboard'); return; }

      this.router.navigateByUrl('auth/sign-in');
    });
  }

  private setAuthIdToken(): void {// User is signed in or token was refreshed

    this.angularFireAuth.idToken.subscribe(async (res) => {

      if (!res) { return; }

      let userModel: Partial<UserModel> = await this.storageService.get<UserModel>(StorageConstant.USER);

      userModel = {
        ...userModel,
        authIdToken: res
      };

      this.setUser(userModel);
    });
  }

}

The above code is working fine on Native Android and Web versions. But it shows the below error and not working on iOS native device. i.e. not login to the app

The issue here is setAuthState() not fired due to the below error. Any clue here?

ng build --prod

npx cap sync ios

npx cap open ios

Xcode error when I publish it to my iOS device

2020-10-23 01:17:55.778151+0530 App[1541:154056] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/933E61C1-52D9-4CAF-A5BF-2659294D08A5/Library/Cookies/Cookies.binarycookies
Loading network plugin
2020-10-23 01:17:56.031785+0530 App[1541:154056] CAPKeyboard: resize mode - native
⚡️  Loading app at capacitor://localhost...
Reachable via WiFi
APP ACTIVE
⚡️  [log] - onscript loading complete
⚡️  To Native ->  StatusBar show 35357446
⚡️  TO JS {}
To Native Cordova ->  CDVOrientation screenOrientation INVALID ["options": [3, portrait]]
⚡️  [log] - Ionic Native: deviceready event fired after 363 ms
⚡️  [error] - {"code":"auth/operation-not-supported-in-this-environment","message":"This operation is not supported in the environment this application is running on. \"location.protocol\" must be http, https or chrome-extension and web storage must be enabled."}
⚡️  [error] - {"code":"auth/operation-not-supported-in-this-environment","message":"This operation is not supported in the environment this application is running on. \"location.protocol\" must be http, https or chrome-extension and web storage must be enabled."}
⚡️  WebView loaded
SplashScreen.hideSplash: SplashScreen was automatically hidden after default timeout. You should call `SplashScreen.hide()` as soon as your web app is loaded (or increase the timeout). Read more at https://capacitorjs.com/docs/apis/splash-screen#hiding-the-splash-screen
2020-10-23 01:19:50.086532+0530 App[1541:154056] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles
2020-10-23 01:19:50.087868+0530 App[1541:154056] [MC] Reading from public effective user settings.
2020-10-23 01:19:50.341247+0530 App[1541:154056] API error: <_UIKBCompatInputView: 0x101015140; frame = (0 0; 0 0); layer = <CALayer: 0x280a6da80>> returned 0 width, assuming UIViewNoIntrinsicMetric
2020-10-23 01:19:50.341823+0530 App[1541:154056] API error: <_UIKBCompatInputView: 0x101015140; frame = (0 0; 0 0); layer = <CALayer: 0x280a6da80>> returned 0 width, assuming UIViewNoIntrinsicMetric
2020-10-23 01:19:50.908926+0530 App[1541:154056] [Common] _BSMachError: port 8e0b; (os/kern) invalid capability (0x14) "Unable to insert COPY_SEND"
⚡️  To Native ->  Storage set 35357447
⚡️  TO JS {}

ionic info

[WARN] Error loading @ionic/angular package.json: Error: Cannot find module ‘@ionic/angular/package’

Require stack:

• /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
• /usr/local/lib/node_modules/@ionic/cli/lib/index.js
• /usr/local/lib/node_modules/@ionic/cli/index.js
• /usr/local/lib/node_modules/@ionic/cli/bin/ionic [WARN] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module ‘@ionic/angular-toolkit/package’

Require stack:

• /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
• /usr/local/lib/node_modules/@ionic/cli/lib/index.js
• /usr/local/lib/node_modules/@ionic/cli/index.js
• /usr/local/lib/node_modules/@ionic/cli/bin/ionic Ionic:

Ionic CLI : 6.12.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 0.1001.7 @angular-devkit/schematics : 10.1.7 @angular/cli : 10.1.7 @ionic/angular-toolkit : not installed

Capacitor:

Capacitor CLI : 2.4.2 @capacitor/core : 2.4.2

Utility:

cordova-res : 0.15.1 native-run : 1.2.2

System:

NodeJS : v12.18.2 (/usr/local/bin/node) npm : 6.14.7 OS : macOS Catalina

package.json

{ “name”: “a”, “version”: “1.0.0”, “scripts”: { “ng”: “ng”, “start”: “ng serve --host=0.0.0.0”, “build”: “ng build --prod”, “lint”: “ng lint” }, “private”: true, “dependencies”: { “@angular/animations”: “^10.1.5”, “@angular/cdk”: “^10.2.4”, “@angular/common”: “^10.1.5”, “@angular/compiler”: “^10.1.5”, “@angular/core”: “^10.1.5”, “@angular/fire”: “^6.0.3”, “@angular/forms”: “^10.1.5”, “@angular/platform-browser”: “^10.1.5”, “@angular/platform-browser-dynamic”: “^10.1.5”, “@angular/router”: “^10.1.5”, “@capacitor/android”: “^2.4.2”, “@capacitor/cli”: “^2.4.2”, “@capacitor/core”: “^2.4.2”, “@capacitor/ios”: “^2.4.2”, “@ionic-native/barcode-scanner”: “^5.28.0”, “@ionic-native/core”: “^5.28.0”, “@ionic-native/screen-orientation”: “^5.28.0”, “@sentry/angular”: “^5.25.0”, “cordova-plugin-ionic”: “5.4.7”, “cordova-plugin-screen-orientation”: “^3.0.2”, “cordova-plugin-whitelist”: “^1.3.4”, “es6-promise-plugin”: “^4.2.2”, “firebase”: “^7.23.0”, “lodash”: “^4.17.20”, “ng-cloudimage-responsive”: “^2.1.3”, “phonegap-plugin-barcodescanner”: “^8.1.0”, “primeflex”: “^2.0.0”, “primeicons”: “^4.0.0”, “primeng”: “^10.0.3”, “rxjs”: “~6.6.0”, “tslib”: “^2.0.3”, “zone.js”: “~0.10.2” }, “devDependencies”: { “@angular-devkit/architect”: “^0.1001.6”, “@angular-devkit/build-angular”: “^0.1001.6”, “@angular/cli”: “^10.1.6”, “@angular/compiler-cli”: “^10.1.5”, “@sentry/cli”: “^1.58.0”, “@types/lodash”: “^4.14.161”, “@types/node”: “^12.12.67”, “codelyzer”: “^6.0.1”, “firebase-tools”: “^8.12.1”, “fuzzy”: “^0.1.3”, “inquirer”: “^6.2.2”, “inquirer-autocomplete-prompt”: “^1.0.1”, “open”: “^7.3.0”, “ts-node”: “~8.3.0”, “tslint”: “~6.1.0”, “typescript”: “^4.0.3” } }

[mifo111]

Had thesame issue. I think “@angular/fire”: “^6.0.3” is the problem. Going back to version 6.0.2 solved it for me.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.