Skip to content

[Auth] Add Cordova demo app #5067

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 24, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages-exp/auth-exp/cordova/demo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
platforms/
plugins/
ul_web_hooks/
src/config.js
config.xml
119 changes: 119 additions & 0 deletions packages-exp/auth-exp/cordova/demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# Cordova Auth Demo App
This package contains a demo of the various Firebase Auth features bundled in
an Apache Cordova app.

## Dev Setup

Follow [this guide](https://cordova.apache.org/docs/en/10.x/guide/cli/) to run
set up Cordova CLI. tl;dr:

```bash
npm install -g cordova
cordova requirements
```

### Preparing the deps

At this point you should have a basic environment set up that can support
Cordova. Now you'll need to update some config files to make everything work.
First, read through steps 1 - 5, 7 in the
[Firebase Auth Cordova docs page](https://firebase.google.com/docs/auth/web/cordova)
so that you get a sense of the values you need to add / adjust.

Make a copy of `sample-config.xml` to `config.xml`, and replace the values
outlined in curly braces. Notably, you'll need the package name / bundle ID
of a registered app in the Firebase Console. You'll also need the Auth Domain
that comes from the Web config.

Next, you'll need to make a copy of `src/sample-config.js` to `src/config.js`,
and you'll need to supply a Firebase JS SDK configuration in the form of that
file.

Once all this is done, you can get the Cordova setup ready in this specific
project:

```bash
cordova prepare
```

Work through any issues until no more errors are printed.

## Building and running the demo

The app consists of a bundled script, `www/dist/bundle.js`. This script is built
from the `./src` directory. To change it, modify the source code in
`src` and then rebuild the bundle:

```bash
# Build the deps the first time, and subsequent times if changing the core SDK
npm run build:deps
npm run build:js
```

### Android

You can now build and test the app on Android Emulator:

```bash
cordova build android
cordova emulate android

# Or
cordova run android
```

TODO: Any tips or gotchas?

### iOS

```bash
cordova build ios
cordova emulate ios
```

Please ignore the command-line output mentioning `logPath` -- that file
[will not actually exist](https://github.com/ios-control/ios-sim/issues/167) and
won't contain JavaScript console logs. The Simulator app itself does not
expose console logs either (System Log won't help).

The recommended way around this is to use the remote debugger in Safari. Launch
the Safari app on the same MacBook, and then go to Safari menu > Preferences >
Advanced and check the "Show Develop menu in menu bar" option. Then, you should
be able to see the Simulator under the Safari `Developer` menu and choose the
app web view (Hello World > Hello World). This only works when the Simulator has
already started and is running the Cordova app. This gives you full access to
console logs AND uncaught errors in the JavaScript code.

WARNING: This may not catch any JavaScript errors during initialization (or
before the debugger was opened). If nothing seems working, try clicking the
Reload Page button in the top-left corner of the inspector, which will reload
the whole web view and hopefully catch the error this time.

#### Xcode

If you really want to, you can also start the Simulator via Xcode. Note that
this will only give you access to console log but WON'T show JavaScript errors
-- for which you still need the Safari remote debugger.

```bash
cordova build ios
open ./platforms/ios/HelloWorld.xcworkspace/
```

Select/add a Simulator through the nav bar and click on "Run" to start it. You
can then find console logs in the corresponding Xcode panel (not in the
Simulator window itself).

If you go this route,
[DO NOT edit files in Xcode IDE](https://cordova.apache.org/docs/en/10.x/guide/platforms/ios/index.html#open-a-project-within-xcode).
Instead, edit files in the `www` folder and run `cordova build ios` to copy the
changes over (and over).

### Notes

You may need to update the cordova-universal-links-plugin `manifestWriter.js`
to point to the correct Android manifest. For example:

```js
var pathToManifest = path.join(cordovaContext.opts.projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'AndroidManifest.xml');
```
52 changes: 52 additions & 0 deletions packages-exp/auth-exp/cordova/demo/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"name": "cordova-auth-demo",
"displayName": "Cordova Auth Demo",
"version": "1.0.0",
"scripts": {
"build:js": "rollup -c",
"build:deps": "lerna run --scope @firebase/'{app-exp,auth-exp/cordova}' --include-dependencies build"
},
"keywords": [
"ecosystem:cordova"
],
"devDependencies": {
"cordova-android": "^9.1.0",
"cordova-ios": "^6.2.0",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-universal-links-plugin": "^1.2.1",
"rollup": "^2.52.2"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-buildinfo": {},
"cordova-universal-links-plugin": {},
"cordova-plugin-browsertab": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-customurlscheme": {
"URL_SCHEME": "com.example.hello",
"ANDROID_SCHEME": " ",
"ANDROID_HOST": " ",
"ANDROID_PATHPREFIX": "/"
}
},
"platforms": [
"ios",
"android"
]
},
"dependencies": {
"@firebase/app-exp": "0.0.900",
"@firebase/auth-exp": "0.0.900",
"@firebase/logger": "0.2.6",
"@firebase/util": "0.3.4",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-buildinfo": "4.0.0",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-customurlscheme": "5.0.2",
"cordova-plugin-inappbrowser": "4.1.0",
"cordova-universal-links-plugin-fix": "^1.2.1",
"lerna": "^4.0.0",
"tslib": "^2.1.0"
}
}
45 changes: 45 additions & 0 deletions packages-exp/auth-exp/cordova/demo/rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/**
* @license
* Copyright 2019 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import resolve from '@rollup/plugin-node-resolve';
import strip from '@rollup/plugin-strip';

/**
* Common plugins for all builds
*/
const commonPlugins = [
strip({
functions: ['debugAssert.*']
})
];

const es5Builds = [
/**
* Browser Builds
*/
{
input: 'src/index.js',
output: [{ file: 'www/dist/bundle.js', format: 'esm', sourcemap: true }],
plugins: [
...commonPlugins,
resolve({
mainFields: ['module', 'main']
})
]
}
];

export default [...es5Builds];
16 changes: 16 additions & 0 deletions packages-exp/auth-exp/cordova/demo/sample-config.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version='1.0' encoding='utf-8'?>
<widget id="{{YOUR PACKAGE NAME / BUNDLE ID HERE}}" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Cordova Auth Demo</name>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<universal-links>
<host name="{{DYNAMIC LINK DOMAIN}}" scheme="https" />
<host name="{{YOUR AUTH DOMAIN HERE}}" scheme="https">
<path url="/__/auth/callback"/>
</host>
</universal-links>
<preference name="AndroidLaunchMode" value="singleTask" />
<preference name="android-minSdkVersion" value="22" />
</widget>
Loading