@oktadev/schematics
Advanced tools
Fast and easy installation of Okta and Auth0's OIDC SDKs
This project is a Schematics implementation that allows you to easily integrate Okta and Auth0 into your Angular, React, Vue, Ionic, React Native, and Express projects.
This library currently supports:
Prerequisites: Node.js.
Use the links below to see how to create an app and integrate authentication using OktaDev Schematics.
To learn more about this project, see the following topics:
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
Then, integrate your Angular app with Okta or Auth0.
okta register to create an account, followed by okta apps create.http://localhost:4200/callback for the Redirect URI.In your secure-angular project, add @oktadev/schematics:
ng add @oktadev/schematics
Use the values that the Okta CLI provides for the issuer and client ID when prompted.
Run npm start, open http://localhost:4200 in your browser, and sign in. š„³
See the Okta Angular SDK for more information.
You can also use the Okta Admin Console:
http://localhost:4200/callback as a Sign-in redirect URI and http://localhost:4200 as a Sign-out redirect URI.http://localhost:4200 as a Trusted Origin and click Save.auth0 login to register your account, followed by auth0 apps create.http://localhost:4200/home for the Callback URLs.http://localhost:4200 for the rest of the URLs.In your secure-angular project, add @oktadev/schematics with the --auth0 flag:
ng add @oktadev/schematics --auth0
Use the values that the Auth0 CLI provides for the issuer and client ID when prompted.
Run npm start, open http://localhost:4200 in your browser, and sign in. š„³
See the Auth0 Angular SDK for more information.
You can also use the Auth0 Console:
http://localhost:4200/home as an Allowed Callback URL and http://localhost:4200 as a Logout URL.http://localhost:4200 as an Allowed Origin and click Save Changes at the bottom.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 --template typescript flag.
npx create-react-app secure-react --template typescript
cd secure-react
Then, integrate your React app with Okta or Auth0.
okta register to create an account, followed by okta apps create.http://localhost:3000/callback for the Redirect URI.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your secure-react project.
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth
Use the values that the Okta CLI provides for the issuer and client ID when prompted.
Run npm start, open http://localhost:3000 in your browser, and sign in. š
See the Okta React SDK for more information.
You can also use the Okta Admin Console:
http://localhost:3000/callback as a Sign-in redirect URI and http://localhost:3000 as a Sign-out redirect URI.http://localhost:3000 as a Trusted Origin and click Save.auth0 login to register your account, followed by auth0 apps create.http://localhost:3000 for the Callback URL.http://localhost:3000 for the rest of the URLs.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your secure-react project with the --auth0 flag:
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --auth0
Use the values that the Auth0 CLI provides for the issuer and client ID when prompted.
Run npm start, open http://localhost:3000 in your browser, and sign in. š
See the Auth0 React SDK for more information.
You can also use the Auth0 Console:
http://localhost:3000 as an Allowed Callback URL and http://localhost:3000 as a Logout URL.http://localhost:3000 as an Allowed Origin and click Save Changes at the bottom.Create a new project with Vue CLI. You must add routing for this schematic to work. If you specify TypeScript, a src/router/index.ts will be used.
npm i -g @vue/cli
vue create secure-vue
cd secure-vue
Then, integrate your Vue app with Okta or Auth0.
okta register to create an account, followed by okta apps create.http://localhost:8080/callback for the Redirect URI.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your secure-vue project.
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth
Use the values that the Okta CLI provides for the issuer and client ID when prompted.
Run npm run serve, open http://localhost:8080 in your browser, and sign in. š„
See the Okta Vue SDK for more information.
You can also use the Okta Admin Console:
http://localhost:8080/callback as a Sign-in redirect URI and http://localhost:8080 as a Sign-out redirect URI.http://localhost:8080 as a Trusted Origin and click Save.auth0 login to register your account, followed by auth0 apps create.http://localhost:8080 for the Callback URL.http://localhost:8080 for the rest of the URLs.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your secure-react project with the --auth0 flag:
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --auth0
Use the values that the Auth0 CLI provides for the issuer and client ID when prompted.
Run npm start, open http://localhost:8080 in your browser, and sign in. š„
See the Auth0 Vue SDK for more information.
You can also use the Auth0 Console:
http://localhost:8080 as an Allowed Callback URL and http://localhost:8080 as a Logout URL.http://localhost:8080 as an Allowed Origin and click Save Changes at the bottom.Create a new Ionic + Angular project with Ionic CLI. You must use the tabs layout for everything to work correctly.
npm install -g @ionic/cli
ionic start secure-ionic tabs --type=angular --no-interactive
cd secure-ionic
Then, integrate your Ionic app with Okta or Auth0.
okta register to create an account, followed by okta apps create.[com.okta.dev-133337:/callback,http://localhost:8100/callback] for the Login redirect URIs (where dev-133337.okta.com is your Okta domain).[com.okta.dev-133337:/logout,http://localhost:8100/logout] for the Logout redirect URIs.In your secure-ionic project, add @oktadev/schematics:
ng add @oktadev/schematics
Use the values that the Okta CLI provides for the issuer and client ID when prompted.
Start your app and authenticate with Okta. š
ionic serve
You can also use the Okta Admin Console:
Log in to your Okta instance (or sign up if you don't have an account).
From the Applications page, choose Create App Integration > OIDC. Select Native Application.
Give your app a memorable name, and configure it as follows:
http://localhost:8100/callbackcom.okta.dev-133337:/callback (where dev-133337.okta.com is your Okta domain)http://localhost:8100/logoutcom.okta.dev-133337:/logouthttp://localhost:8100auth0 login to register your account, followed by auth0 apps create.dev.localhost.ionic:/callback,http://localhost:8100/callback for the Callback URLs.dev.localhost.ionic:/logout,http://localhost:8100/logout for the Logout URLs.auth0 apps open and add http://localhost:8100,http://localhost to Allowed Origins (CORS). Scroll down and Save Changes.In your secure-ionic project, add @oktadev/schematics with the --auth0 flag:
ng add @oktadev/schematics --auth0
Use the values that the Auth0 CLI provides for the issuer and client ID when prompted.
Start your app and authenticate with Auth0. š
ionic serve
You can also use the Auth0 Console:
dev.localhost.ionic:/callback,http://localhost:8100/callback for Allowed Callback URLs and dev.localhost.ionic:/logout,http://localhost:8100/logout for the Logout URLs.http://localhost:8100,http://localhost to Allowed Origins (CORS). Scroll down and Save Changes.Build and add Capacitor for iOS with the following commands:
ionic build
npm i @capacitor/ios
npx cap add 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>dev.localhost.ionic</string>
<string>com.okta.dev-133337</string>
</array>
</dict>
</array>
Then, run your project using the Capacitor CLI:
npx cap run ios
You can also open your project in Xcode and configure code signing.
npx cap open ios
Then run your app from Xcode.
Build and add Capacitor for Android with the following commands:
ionic build
npm i @capacitor/android
npx cap add android
Add your reverse domain name as the android:scheme in android/app/src/main/AndroidManifest.xml by adding another <intent-filter> above the existing one in the <activity> element.
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="com.okta.dev-133337" /> <!-- use dev.localhost.ionic for Auth0 -->
</intent-filter>
Then, run your project using the Capacitor CLI:
npx cap run android
You can also open your project in Android Studio and run your app.
npx cap open android
See Ionic's iOS and Android Development docs for more information.
Create a new React Native project with the React Native CLI.
npx react-native init SecureApp
Then, integrate your React Native app with Okta or Auth0.
okta register to create an account, followed by okta apps create.com.okta.dev-133337:/callback (where dev-133337.okta.com is your Okta domain).com.okta.dev-133337:/logout for the Post Logout Redirect URI.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Install and run the add-auth schematic in your SecureApp project.
cd SecureApp
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --issuer=$issuer --client-id=$clientId
You can also use the Okta Admin Console:
com.okta.dev-133337:/callback as a Sign-in redirect URI and com.okta.dev-133337:/callback as a Sign-out redirect URI (where dev-133337.okta.com is your Okta domain).Install the Auth0 CLI.
Run auth0 login to register your account, followed by auth0 apps create.
Specify a name and description of your choosing.
Select Native and use the following for your Callback and Logout URLs:
org.reactjs.native.example.<yourappname>://<your-auth0-domain>/ios/org.reactjs.native.example.<yourAppName>/callback,com.<yourappname>://<your-auth0-domain>/android/com.<yourappname>/callback
NOTE: The <yourappname> and <yourAppName> placeholders is the iOS callback have different cases. The first is all lowercase and the second is camel case. For example:
org.reactjs.native.example.secureapp://dev-06bzs1cu.us.auth0.com/ios/org.reactjs.native.example.SecureApp/callback,
com.secureapp://dev-06bzs1cu.us.auth0.com/android/com.secureapp/callback
Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Install and run the add-auth schematic in your SecureApp project with the --auth0 flag.
cd SecureApp
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --issuer=$issuer --client-id=$clientId --auth0
You can also use the Auth0 Console:
Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
Choose Native as the application type and click Create.
Select the Settings tab.
Add the following for Allowed Callback and Logout URLs:
org.reactjs.native.example.secureapp://<your-auth0-domain>/ios/org.reactjs.native.example.SecureApp/callback,com.secureapp://<your-auth0-domain>/android/com.secureapp/callback
Run pod install --project-directory=ios --repo-update.
Start your app and authenticate with Okta. š
npm run ios
NOTE: If you have issues in Simulator, stop the Metro process and run npm run ios again.
One change is made to Android build files. In android/app/build.gradle, a manifestPlaceholders is added in android > defaultConfig.
Since this modification is done for you, you can simply start your app and authenticate with Okta. š
npm run android
For more information, see the Okta React Native SDK and the Auth0 React Native SDK.
Create a new project with express-generator and pug.
mkdir express-app
cd express-app
npx express-generator --view=pug
Then, integrate your Express app with Okta or Auth0.
okta register to create an account, followed by okta apps create.http://localhost:3000/callback for the Redirect URI.http://localhost:3000/).Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your express-app project.
The Okta CLI will create an .okta.env file in the current directory. It will have the values you need. After you use them in the command below, you can delete this file.
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --issuer=$issuer \
--client-id=$clientId --client-secret=$clientSecret
šØ This process will create an .env file will be generated with your credentials. Make sure to add *.env to .gitignore and don't check it into source control!
Start your app and authenticate with Okta at http://localhost:3000. š
npm start
See the Okta OIDC Middleware SDK for more information.
You can also create your app using the Okta Admin Console:
http://localhost:3000/callback.http://localhost:3000.auth0 login to register your account, followed by auth0 apps create.http://localhost:3000/callback for the Callback URL.http://localhost:3000 for the Logout URL.Install the Schematics CLI globally.
npm install -g @angular-devkit/schematics-cli
Then install and run the add-auth schematic in your express-app project with the --auth0 flag.
Use the values that the Auth0 CLI provides for the issuer and client ID. You may have to use auth0 apps open to get the client secret for your app.
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --issuer=$issuer \
--client-id=$clientId --client-secret=$clientSecret --auth0
šØ This process will create an .env file with your credentials. Make sure to add *.env to .gitignore and don't check it into source control!
Start your app and authenticate with Auth0 at http://localhost:3000. š
npm start
See the Auth0 Express OpenID Connect SDK for more information.
You can also use the Auth0 Console:
http://localhost:3000/callback as an Allowed Callback URL and http://localhost:3000 as a Logout URL.This project supports unit tests and integration tests.
npm 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, ionic, react-native, and express. You can also add -auth0 to any of these options.
./test-all.sh will test all the options for both Okta and Auth0: Angular, React, React with TypeScript, Vue, Vue with TypeScript, Ionic with Capacitor, React Native, and Express.
To publish, simply do:
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.
Check out the following blog posts to see OktaDev Schematics in action.
This project uses the following open source libraries from Okta:
And these from Auth0:
For Ionic, it uses Ionic AppAuth.
Please post any questions as issues or ask them on the Okta Developer Forums or Auth0 Community Forums.
Apache 2.0, see LICENSE.
FAQs
Schematics for Okta Auth
The npm package @oktadev/schematics receives a total of 416 weekly downloads. As such, @oktadev/schematics popularity was classified as not popular.
We found that @oktadev/schematics demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.