OktaDev Schematics
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:
Angular
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 for Angular
- Install the Okta CLI.
- Run
okta register
to create an account, followed byokta apps create
. - Choose Single Page App and use
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:
- 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 andhttp://localhost:4200
as a Sign-out redirect URI. - Specify
http://localhost:4200
as a Trusted Origin and click Save.
Auth0 for Angular
- Install the Auth0 CLI.
- Run
auth0 login
to 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/home
for the Callback URLs. - Use
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:
- 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 andhttp://localhost:4200
as a Logout URL. - Specify
http://localhost:4200
as an Allowed Origin and click Save Changes at the bottom.
React
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 for React
- Install the Okta CLI.
- Run
okta register
to create an account, followed byokta apps create
. - Choose Single Page App and use
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:
- 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 andhttp://localhost:3000
as a Sign-out redirect URI. - Add
http://localhost:3000
as a Trusted Origin and click Save.
Auth0 for React
- Install the Auth0 CLI.
- Run
auth0 login
to register your account, followed byauth0 apps create
. - Specify a name and description of your choosing.
- Select Single Page Web Application and use
http://localhost:3000
for the Callback URL. - Use
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:
- 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 andhttp://localhost:3000
as a Logout URL. - Specify
http://localhost:3000
as an Allowed Origin and click Save Changes at the bottom.
Vue
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 for Vue
- Install the Okta CLI.
- Run
okta register
to create an account, followed byokta apps create
. - Choose Single Page App and use
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:
- 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 andhttp://localhost:8080
as a Sign-out redirect URI. - Add
http://localhost:8080
as a Trusted Origin and click Save.
Auth0 for Vue
- Install the Auth0 CLI.
- Run
auth0 login
to register your account, followed byauth0 apps create
. - Specify a name and description of your choosing.
- Select Single Page Web Application and use
http://localhost:8080
for the Callback URL. - Use
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 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 andhttp://localhost:8080
as a Logout URL. - Specify
http://localhost:8080
as an Allowed Origin and click Save Changes at the bottom.
Ionic
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 for Ionic
- Install the Okta CLI.
- Run
okta register
to 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.com
is 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/callback
-
com.okta.dev-133337:/callback
(wheredev-133337.okta.com
is your Okta domain) https://localhost
- Sign-out redirect URIs:
http://localhost:8100/logout
com.okta.dev-133337:/logout
- Trusted Origins:
http://localhost:8100
- Click Save
Auth0 for Ionic
- Install the Auth0 CLI.
- Run
auth0 login
to 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/callback
for the Callback URLs. - Use
dev.localhost.ionic:/logout,http://localhost:8100/logout
for the Logout URLs. - Run
auth0 apps open
and addhttp://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 anddev.localhost.ionic:/logout,http://localhost:8100/logout
for the Logout URLs. - Add
http://localhost:8100,https://localhost
to Allowed Origins (CORS). Scroll down and Save Changes.
iOS
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.
Android
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.
React Native
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 for React Native
- Install the Okta CLI.
- Run
okta register
to create an account, followed byokta apps create
. - Choose Native and accept the default Redirect URI of
com.okta.dev-133337:/callback
(wheredev-133337.okta.com
is your Okta domain). - Use
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:
- 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 andcom.okta.dev-133337:/callback
as a Sign-out redirect URI (wheredev-133337.okta.com
is your Okta domain).
Auth0 for React Native
-
Install the Auth0 CLI.
-
Run
auth0 login
to 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
iOS
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.
Android
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.
Express
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 for Express
- Install the Okta CLI.
- Run
okta register
to create an account, followed byokta apps create
. - Choose Web > Other and use
http://localhost:3000/callback
for 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.
Auth0 for Express
- Install the Auth0 CLI.
- Run
auth0 login
to register your account, followed byauth0 apps create
. - Specify a name and description of your choosing.
- Select Regular Web Application and use
http://localhost:3000/callback
for the Callback URL. - Use
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:
- 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 andhttp://localhost:3000
as a Logout URL. - Click Save Changes at the bottom.
Testing
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.
Publishing
To publish, simply do:
npm publish
That's it!
Contributing
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.
Tutorials
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
Links
This project uses the following open source libraries from Okta:
And these from Auth0:
For Ionic, it uses Ionic AppAuth.
Help
Please post any questions as issues or ask them on the Okta Developer Forums or Auth0 Community Forums.
License
Apache 2.0, see LICENSE.