Schematics for Okta Auth
npm install @oktadev/schematicsThis 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:
- OAuth 2.0 Authorization Code Flow
- Proof Key for Code Exchange (PKCE)
Prerequisites: Node.js.
Use the links below to see how to create an app and integrate authentication using OktaDev Schematics.
* Angular
* React
* Vue
* Ionic
* React Native
* Express
To learn more about this project, see the following topics:
* Testing
* Contributing
* Tutorials
* Links
* Help
* License
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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.http://localhost:4200/callback
3. Choose Single Page App and use 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:
* Log in to your Okta instance (or create an account if you don't have one). Go to Applications > Create App Integration > OIDC.
* Choose Single-Page Application as the application type and click Next.
* Add http://localhost:4200/callback as a Sign-in redirect URI and http://localhost:4200 as a Sign-out redirect URI.http://localhost:4200
* Specify as a Trusted Origin and click Save.
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.http://localhost:4200/home
3. Specify a name and description of your choosing.
4. Select Single Page Web Application and use for the Callback URLs.http://localhost:4200
5. Use 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:
* Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
* Choose Single Page Web Applications as the application type and click Create.
* Select the Settings tab.
* Add http://localhost:4200/home as an Allowed Callback URL and http://localhost:4200 as a Logout URL.http://localhost:4200
* Specify 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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.http://localhost:3000/callback
3. Choose Single Page App and use 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:
* Log in to your Okta instance (or create an account if you don't have one). Go to Applications > Create App Integration > OIDC.
* Choose Single-Page Application as the application type and click Next.
* Add http://localhost:3000/callback as a Sign-in redirect URI and http://localhost:3000 as a Sign-out redirect URI.http://localhost:3000
* Add as a Trusted Origin and click Save.
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.http://localhost:3000
3. Specify a name and description of your choosing.
4. Select Single Page Web Application and use for the Callback URL.http://localhost:3000
5. Use 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:
* Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
* Choose Single Page Web Applications as the application type and click Create.
* Select the Settings tab.
* Add http://localhost:3000 as an Allowed Callback URL and http://localhost:3000 as a Logout URL.http://localhost:3000
* Specify 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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.http://localhost:8080/callback
3. Choose Single Page App and use 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:
* Log in to your Okta instance (or create an account if you don't have one). Go to Applications > Create App Integration > OIDC.
* Choose Single-Page Application as the application type and click Next.
* Add http://localhost:8080/callback as a Sign-in redirect URI and http://localhost:8080 as a Sign-out redirect URI.http://localhost:8080
* Add as a Trusted Origin and click Save.
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.http://localhost:8080
3. Specify a name and description of your choosing.
4. Select Single Page Web Application and use for the Callback URL.http://localhost:8080
5. Use 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 run serve, 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:
* Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
* Choose Single Page Web Applications as the application type and click Create.
* Select the Settings tab.
* Add http://localhost:8080 as an Allowed Callback URL and http://localhost:8080 as a Logout URL.http://localhost:8080
* Specify 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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.[com.okta.dev-133337:/callback,http://localhost:8100/callback,https://localhost]
3. Choose Native and use for the Login redirect URIs (where dev-133337.okta.com is your Okta domain).[com.okta.dev-133337:/logout,http://localhost:8100/logout]
4. Use 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:
* Sign-in redirect URIs:
* http://localhost:8100/callback
* (where dev-133337.okta.com is your Okta domain)https://localhost
*
* Sign-out redirect URIs:
*
*
* Trusted Origins:
*
* Click Save
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.dev.localhost.ionic:/callback,http://localhost:8100/callback
3. Specify a name and description of your choosing.
4. Select Native and use for the Callback URLs.dev.localhost.ionic:/logout,http://localhost:8100/logout
5. Use for the Logout URLs.auth0 apps open
6. Run 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:
* 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 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,https://localhost
* Add 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:
`xml`
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 above the existing one in the element.
`xml`
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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.com.okta.dev-133337:/callback
3. Choose Native and accept the default Redirect URI of (where dev-133337.okta.com is your Okta domain).com.okta.dev-133337:/logout
4. Use 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:
* Log in to your Okta instance (or create an account if you don't have one). Go to Applications > Create App Integration > OIDC.
* Choose Native as the application type and click Next.
* Add 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).
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.
3. Specify a name and description of your choosing.
4. Select Native and use the following for your Callback and Logout URLs:
org.reactjs.native.example.
For example:
`
org.reactjs.native.example.secureauth0.auth0://dev-06bzs1cu.us.auth0.com/ios/org.reactjs.native.example.secureauth0/callback, com.secureauth0.auth0://dev-06bzs1cu.us.auth0.com/android/com.secureauth0/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.
For example:
`
org.reactjs.native.example.secureauth0.auth0://dev-06bzs1cu.us.auth0.com/ios/org.reactjs.native.example.secureauth0/callback, com.secureauth0.auth0://dev-06bzs1cu.us.auth0.com/android/com.secureauth0/callback
Run npx pod-install.
Start your app and authenticate with Okta. š
`
npm run ios
NOTE: If you have issues with compiling, you may have to disable Flipper in ios/Podfile. Then run npx pod-install 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.
1. Install the Okta CLI.
2. Run okta register to create an account, followed by okta apps create.http://localhost:3000/callback
3. Choose Web > Other and use for the Redirect URI.http://localhost:3000/
4. Accept the default Post Logout Redirect URI ().
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:
* Log into the Okta Developer Dashboard (or create an account if you don't have one), click Applications then Create App Integration > OIDC.
* Choose Web as the application type and click Next.
* Add a Sign-in redirect URI of http://localhost:3000/callback.http://localhost:3000
* Add a Sign-out redirect URI of .
* Click Save.
1. Install the Auth0 CLI.
2. Run auth0 login to register your account, followed by auth0 apps create.http://localhost:3000/callback
3. Specify a name and description of your choosing.
4. Select Regular Web Application and use for the Callback URL.http://localhost:3000
5. Use 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:
* Log in to Auth0 or create an account if you don't have one. Go to Applications > Create Application.
* Choose Regular Web Application as the application type and click Create.
* Select the Settings tab.
* Add http://localhost:3000/callback as an Allowed Callback URL and http://localhost:3000 as a Logout URL.
* Click Save Changes at the bottom.
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:
`bash`
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:
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.
* Add OpenID Connect to Angular Apps Quickly
* Use Angular Schematics to Simplify Your Life
* Use Schematics with Vue and Add Authentication in 5 Minutes
* Use Schematics with React and Add OpenID Connect Authentication in 5 Minutes
* Tutorial: User Login and Registration in Ionic 4
* Create a React Native App with Login in 10 Minutes
This project uses the following open source libraries from Okta:
* Okta Angular SDK
* Okta React SDK
* Okta Vue SDK
* Okta React Native SDK
* Okta OIDC Middleware
And these from Auth0:
* Auth0 Angular SDK
* Auth0 React SDK
* Auth0 Vue SDK
* Auth0 React Native SDK
* Auth0 Express OpenID Connect
For Ionic, it uses Ionic AppAuth.
Please post any questions as issues or ask them on the [Okta Developer Forums][devforum-url] or [Auth0 Community Forums][community-url].
Apache 2.0, see LICENSE.
[npm-image]: https://img.shields.io/npm/v/@oktadev/schematics.svg
[npm-url]: https://www.npmjs.com/package/@oktadev/schematics
[github-actions-image]: https://github.com/oktadev/schematics/workflows/Schematics/badge.svg
[github-actions-url]: https://github.com/oktadev/schematics/actions
[daviddm-image]: https://david-dm.org/oktadev/schematics.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/oktadev/schematics
[devforum-image]: https://img.shields.io/badge/support-developer%20forum-blue.svg
[devforum-url]: https://devforum.okta.com
[community-url]: https://community.auth0.com/
[snyk-url]: https://snyk.io/test/github/oktadev/schematics
[snyk-image]: https://snyk.io/test/github/oktadev/schematics/badge.svg