Skip to content
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.

Sign up for GitHub

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

Fix Android and Capacitor + iOS #13

Merged
merged 5 commits into from
Apr 19, 2019
Merged

Fix Android and Capacitor + iOS #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
31b1934
Fix Android
Apr 19, 2019
bae1f58
Add better error handling
Apr 19, 2019
1af4776
Improve error handling
Apr 19, 2019
e51dd2f
Fix Capacitor integration
Apr 19, 2019
a9af8a1
Fix vulnerability by removing jasmine-node
Apr 19, 2019
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
60 changes: 45 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,11 @@ Create a new Ionic + Angular project with Ionic CLI. You **must** use the `tabs`

```
npm install -g ionic
ionic start $appName tabs
cd $appName
ionic start secure-ionic tabs
cd secure-ionic
```

**NOTE:** You can switch to Capacitor by passing in `--platform=capacitor`. The default is Cordova.
**NOTE:** You can switch to Capacitor by passing in `--platform=capacitor`. The default is Cordova.

You will an `issuer` and `clientId` to begin. You can obtain those from Okta by completing the following steps.

Expand All @@ -145,13 +145,6 @@ Copy your issuer (found under **API** > **Authorization Servers**), and client I
ng add @oktadev/schematics --issuer=$issuer --clientId=$clientId
```

You can also use the following syntax:

```
npm i @oktadev/schematics
ng g @oktadev/schematics:add-auth --issuer=$issuer --clientId=$clientId
```

Start your app and you should be able to authenticate with Okta. 🎉

```
Expand All @@ -177,16 +170,36 @@ If you want to use Capacitor, you **must** integrate this library with `ng add @
Then, run:

```
npm run build
ionic build
ionic capacitor add ios
```

Open your project in Xcode, configure code signing, and run your app.
Open your project in Xcode and configure code signing.

```
ionic capacitor open ios
```

Add your custom scheme to `ios/App/App/Info.plist`:


```xml
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.getcapacitor.capacitor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>capacitor</string>
<string>com.okta.dev-737523</string>
</array>
</dict>
</array>
```

Then run your app from Xcode.

### Android

If you ran `ng add @oktadev/schematics` without a `--platform` parameter, your project has been configured for Cordova. Generate a native project with the following command:
Expand All @@ -200,10 +213,27 @@ If you want to use Capacitor, you **must** add this library with `ng add @oktade
Then, run:

```
npm run build
ionic build
ionic capacitor add android
```

Change the custom scheme in `android/app/src/main/res/values/strings.xml` to use your reverse domain name:

```xml
<string name="custom_url_scheme">com.okta.dev-737523</string>
```

For both Capacitor and Cordova, set the launchMode to singleTask so the URL does not trigger a new instance of the app in `android/app/src/main/AndroidManifest.xml`:

```xml
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:name="com.mydomain.app.MainActivity"
android:label="@string/title_activity_main"
android:launchMode="singleTask"
android:theme="@style/AppTheme.NoActionBarLaunch">
```

Open your project in Android Studio and run your app.

```
Expand All @@ -218,9 +248,9 @@ This project supports unit tests and integration tests.

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

`./test-app.sh angular` will create an Angular project with Angular CLI, install this project, and make sure all the project's tests pass. Other options include `react`, `react-ts`, `vue`, and `vue-ts`.
`./test-app.sh angular` will create an Angular project with Angular CLI, install this project, and make sure all the project's tests pass. Other options include `react`, `react-ts`, `vue`, `vue-ts`, `ionic` and `ionic-cap`.

`./test-all.sh` will test all the options: Angular, React, React with TypeScript, Vue, and Vue with TypeScript.
`./test-all.sh` will test all the options: Angular, React, React with TypeScript, Vue, Vue with TypeScript, Ionic with Cordova, and Ionic with Capacitor.

## Publishing

Expand Down
Loading