firebase / firebase/firebase-js-sdk

auth-compat module incorrectly detects Capacitor/Cordova environment on iPad

Open
#8,755 2 comments 0 reactions 0 assignees View on GitHub
api: auth needs-attention question
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### Operating System

iPadOS 17.6.1

### Environment (if applicable)

Cordova/Capacitor app running in WKWebview on iPadOS

### Firebase SDK Version

11.2.0

### Firebase SDK Product(s)

Auth

### Project Tooling

Cordova app with webpack

### Detailed Problem Description

The [auth-compat](https://github.com/firebase/firebase-js-sdk/tree/main/packages/auth-compat) module relies on matching the URL scheme and user agent string to detect whether it is running in a Cordova/Capacitor Webview in [`_isAndroidOrIosCordovaScheme`](https://github.com/firebase/firebase-js-sdk/blob/main/packages/auth-compat/src/platform.ts#L52).

However, since iPadOS 13 (circa 2019), Safari (and its WKWebView implementation) began identifying itself with a user agent string similar to that of macOS to provide a desktop-like browsing experience. This change means that the user agent string no longer contains iPad and instead resembles that of a Mac.
For example the user agent string of my iPad Simulator is `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148`.

This means the current detection fails to correctly detect that it is running in a Cordova/Capacitor Webview when running on an iPad, so assumes it's a desktop browser environment.
Therefore when the auth-compat module is imported, this leads to a run-time error:

![Image](https://github.com/user-attachments/assets/55463bef-2c85-433c-8dfd-7258e688f149)

### Steps and code to reproduce issue

- On macOS with [ionic environment](https://ionicframework.com/docs/intro/environment) for [iOS development for Cordova](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios):
- Run in Terminal:
- `ionic start firebase-test blank --type=angular --cordova && cd firebase-test`
- `npm install -g @angular/cli`
- `ng add @ionic/cordova-builders`
- `ionic cordova platform add ios`
- Edit `src/main.ts` and add:
```
window.onerror = function (message) {
alert(message);
}
```
- Run in Terminal:
- `ionic build`
- `cordova platform prepare ios`
- Open `platforms/ios/firebase-test.xcworkspace` in Xcode
- In Xcode, select a connected physical iPad or an iPad Simulator and then select "Run"
- Observe that app launches without errors

Then add the Firebase SDK:
- Run in Terminal: `npm i firebase`
- Edit `src/main.ts` and add:
```
import firebase from '@firebase/app-compat';
import '@firebase/auth-compat';

const config = {
// your project config
};
firebase.initializeApp(config)
console.log(firebase.auth().currentUser);
```
- Run in Terminal:
- `ionic build`
- `ionic cordova prepare ios`
- In Xcode, select a connected physical iPad or an iPad Simulator and then select "Run"
- Observe than an error dialog appears
- Inspect Webview with Safari Devtools and observer errors are due to Firebase SDK

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.