
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@oktadev/schematics
Advanced tools
This repository is a Schematics implementation that allows you to easily integrate Okta into your Angular, React, Vue, and Ionic projects.
Prerequisites: Node.js.
First, create an empty project with Angular CLI. You must add Angular routing for this schematic to work.
npm i -g @angular/cli
ng new secure-angular --routing
cd secure-angular
http://localhost:4200/implicit/callback
as a Login redirect URI, and click Done.In your secure-angular
project, add @oktadev/schematics
:
ng add @oktadev/schematics
You'll be prompted for an issuer, which you can find in your Okta dashboard at API > Authorization Servers. For the client ID, use the Client ID from the app you created in Okta.
See the Okta Angular SDK for more information.
Create a new project with Create React App.
npx create-react-app secure-react
cd secure-react
If you'd like to use TypeScript, add the --typescript
flag.
npx create-react-app secure-react --typescript
cd secure-react
http://localhost:3000/implicit/callback
as a Login redirect URI, and click Done.Install Schematics globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth
schematic in your secure-react
project.
npm i @oktadev/schematics
schematics @oktadev/schematics:add-auth
You'll be prompted for an issuer, which you can find in your Okta dashboard at API > Authorization Servers. For the client ID, use the Client ID from the app you created in Okta.
See the Okta React SDK for more information.
Create a new project with Vue CLI. You must add routing for this schematic to work. If you specify TypeScript, a src/router.ts
will be used.
npm i -g @vue/cli
vue create secure-vue
cd secure-vue
Install Schematics globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth
schematic in your secure-vue
project.
npm i @oktadev/schematics
schematics @oktadev/schematics:add-auth
You'll be prompted for an issuer, which you can find in your Okta dashboard at API > Authorization Servers. For the client ID, use the Client ID from the app you created in Okta.
See the Okta Vue SDK for more information.
Create a new Ionic + Angular project with Ionic CLI. You must use the tabs
layout for everything to work currently.
npm install -g ionic
ionic start secure-ionic tabs
cd secure-ionic
You will need an issuer
and a clientId
to begin. You can obtain those from Okta by completing the following steps.
NOTE: OIDC Login for Ionic is made possible thanks to the excellent Ionic AppAuth project and its examples. This integration is not Okta-specific and should work with any identity provider that supports PKCE for browser and mobile apps.
Log in to your Okta Developer account (or sign up if you don't have an account).
From the Applications page, choose Add Application. On the Create New Application page, select Native. Give your app a memorable name, and configure it as follows:
http://localhost:8100/implicit/callback
com.okta.dev-737523:/callback
(where dev-737523.okta.com
is your Okta Org URL)http://localhost:8100/implicit/logout
com.okta.dev-737523:/logout
Copy your issuer (found under API > Authorization Servers), and client ID into the following command and run it:
ng add @oktadev/schematics --issuer=$issuer --clientId=$clientId
NOTE: You can switch to Capacitor by passing in --platform=capacitor
. The default is Cordova.
Start your app and you should be able to authenticate with Okta. 🎉
ionic serve
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:
ionic cordova prepare ios
Open your project in Xcode, configure code signing, and run your app.
open platforms/ios/MyApp.xcworkspace
If you want to use Capacitor, you must integrate this library with ng add @oktadev/schematics --platform=capacitor
.
Then, run:
ionic build
ionic capacitor add ios
Open your project in Xcode and configure code signing.
ionic capacitor open ios
Add your custom scheme to ios/App/App/Info.plist
:
<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.
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:
ionic cordova prepare android
Set the launchMode to singleTask
so the URL does not trigger a new instance of the app in platforms/android/app/src/main/AndroidManifest.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.
If you want to use Capacitor, you must add this library with ng add @oktadev/schematics --platform=capacitor
.
Then, run:
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:
<string name="custom_url_scheme">com.okta.dev-737523</string>
Set the launchMode to singleTask
so the URL does not trigger a new instance of the app in android/app/src/main/AndroidManifest.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.
ionic capacitor open android
See Ionic's iOS and Android Development docs for more information.
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
, vue-ts
, ionic
and ionic-cap
.
./test-all.sh
will test all the options: Angular, React, React with TypeScript, Vue, Vue with TypeScript, Ionic with Cordova, and Ionic with Capacitor.
To publish, simply do:
npm run build
npm publish
That's it!
If you'd like to modify this library, and contribute your changes, you can start by forking it to your own GitHub repository. Then, clone it to your hard drive.
git clone git@github.com:<your username>/schematics.git
cd schematics
Create a new branch for your changes:
git checkout -b my-awesome-branch
Make the changes you want to make and add tests where appropriate. Create a new project with whatever framework you're using, then run the following command inside it to use your modified project.
npm link /path/to/schematics
You'll need to run npm run build
whenever you change anything in the schematics project.
NOTE: You can also use npm pack
in your schematics project, then npm install /path/to/artifact.tar.gz
in your test project. This mimics npm install
more than npm link
.
This project uses the following open source libraries from Okta:
For Ionic, it uses Ionic AppAuth.
Please post any questions as issues or as a question on the Okta Developer Forums.
Apache 2.0, see LICENSE.
FAQs
Schematics for Okta Auth
The npm package @oktadev/schematics receives a total of 415 weekly downloads. As such, @oktadev/schematics popularity was classified as not popular.
We found that @oktadev/schematics demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.