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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Single Page App and use
http://localhost:4200/callbackfor 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/callbackas a Sign-in redirect URI andhttp://localhost:4200as a Sign-out redirect URI. - Specify
http://localhost:4200as a Trusted Origin and click Save.
- Install the Auth0 CLI.
- Run
auth0 loginto register your account, followed byauth0 apps create. - Specify a name and description of your choosing.
- Select Single Page Web Application and use
http://localhost:4200/homefor the Callback URLs. - Use
http://localhost:4200for 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/homeas an Allowed Callback URL andhttp://localhost:4200as a Logout URL. - Specify
http://localhost:4200as 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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Single Page App and use
http://localhost:3000/callbackfor 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/callbackas a Sign-in redirect URI andhttp://localhost:3000as a Sign-out redirect URI. - Add
http://localhost:3000as a Trusted Origin and click Save.
- Install the Auth0 CLI.
- Run
auth0 loginto register your account, followed byauth0 apps create. - Specify a name and description of your choosing.
- Select Single Page Web Application and use
http://localhost:3000for the Callback URL. - Use
http://localhost:3000for 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:3000as an Allowed Callback URL andhttp://localhost:3000as a Logout URL. - Specify
http://localhost:3000as 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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Single Page App and use
http://localhost:8080/callbackfor 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/callbackas a Sign-in redirect URI andhttp://localhost:8080as a Sign-out redirect URI. - Add
http://localhost:8080as a Trusted Origin and click Save.
- Install the Auth0 CLI.
- Run
auth0 loginto register your account, followed byauth0 apps create. - Specify a name and description of your choosing.
- Select Single Page Web Application and use
http://localhost:8080for the Callback URL. - Use
http://localhost:8080for 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:8080as an Allowed Callback URL andhttp://localhost:8080as a Logout URL. - Specify
http://localhost:8080as 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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Native and use
[com.okta.dev-133337:/callback,http://localhost:8100/callback,https://localhost]for the Login redirect URIs (wheredev-133337.okta.comis your Okta domain). - Use
[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:
- Sign-in redirect URIs:
http://localhost:8100/callbackcom.okta.dev-133337:/callback(wheredev-133337.okta.comis your Okta domain)https://localhost
- Sign-out redirect URIs:
http://localhost:8100/logoutcom.okta.dev-133337:/logout
- Trusted Origins:
http://localhost:8100
- Click Save
- Install the Auth0 CLI.
- Run
auth0 loginto register your account, followed byauth0 apps create. - Specify a name and description of your choosing.
- Select Native and use
dev.localhost.ionic:/callback,http://localhost:8100/callbackfor the Callback URLs. - Use
dev.localhost.ionic:/logout,http://localhost:8100/logoutfor the Logout URLs. - Run
auth0 apps openand addhttp://localhost:8100,http://localhostto 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/callbackfor Allowed Callback URLs anddev.localhost.ionic:/logout,http://localhost:8100/logoutfor the Logout URLs. - Add
http://localhost:8100,https://localhostto 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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Native and accept the default Redirect URI of
com.okta.dev-133337:/callback(wheredev-133337.okta.comis your Okta domain). - Use
com.okta.dev-133337:/logoutfor 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:/callbackas a Sign-in redirect URI andcom.okta.dev-133337:/callbackas a Sign-out redirect URI (wheredev-133337.okta.comis your Okta domain).
-
Install the Auth0 CLI.
-
Run
auth0 loginto register your account, followed byauth0 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>.auth0://<your-auth0-domain>/ios/org.reactjs.native.example.<yourappname>/callback,com.<yourappname>.auth0://<your-auth0-domain>/android/com.<yourappname>/callback
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.<yourappname>.auth0://<your-auth0-domain>/ios/org.reactjs.native.example.<yourappname>/callback,com.<yourappname>.auth0://<your-auth0-domain>/android/com.<yourappname>/callback
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.
- Install the Okta CLI.
- Run
okta registerto create an account, followed byokta apps create. - Choose Web > Other and use
http://localhost:3000/callbackfor the Redirect URI. - Accept the default Post Logout 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:
- 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. - Add a Sign-out redirect URI of
http://localhost:3000. - Click Save.
- Install the Auth0 CLI.
- Run
auth0 loginto register your account, followed byauth0 apps create. - Specify a name and description of your choosing.
- Select Regular Web Application and use
http://localhost:3000/callbackfor the Callback URL. - Use
http://localhost:3000for 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/callbackas an Allowed Callback URL andhttp://localhost:3000as 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:
npm publishThat'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 [email protected]:<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.
- 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:
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.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent