Have you heard of Angular Schematics? It’s pretty slick. Schematics is an API for manipulating the contents of an Angular CLI-generated application. It allows you to prompt for user input, create files, and update files. Not only that, but you can use it with non-Angular apps too!
When I first heard of it, I thought, “Schematics sound perfect for my Okta demos!” I find I have to edit a lot of files, create a few new ones, and it’s easy to get lost in the complexity.
Now it only takes one command to integrate Okta into an Angular app!
ng add @oktadev/schematics
I think it’s pretty cool and I’d for you to try it! You will need an Okta developer account to take OktaDev Schematics for a test drive.
If you don’t have an Okta developer account, click here to start building on Okta.
Create an OIDC App on Okta
Log in to your account, navigate to Applications > Add Application > Single-Page App, then click Next. Give your app a cool name (e.g., “Angular Rocks!”) and set the ports in the URIs to be 4200 (instead of 8080). Click Done. The next page will show you a Client ID that you’ll need. Your issuer URL should be something like
If you’re using a custom authorization server, use its id in place of
Create an Angular App with OIDC Authentication
Install the latest version of Angular CLI using the following command:
npm i -g @angular/cli
Then create a new Angular app with routing and a
.css extension for stylesheets.
ng new my-secure-app --routing --style css
Navigate into your new app and add OktaDev Schematics:
cd my-secure-app ng add @oktadev/schematics
You’ll be prompted for your OIDC app’s
After entering these values, you’ll have an Angular app that’s configured to authenticate with Okta! Run it:
Then navigate to http://localhost:4200 in your favorite browser, click on the login button at the bottom, and rejoice in your standards-based identity solution!
You can find the source code for this project at https://github.com/oktadeveloper/schematics. I hope to add support for our React and Vue SDKs in the coming months.