Quick JavaScript Authentication with OktaDev Schematics
Tags: javascript, programming, security
Published: 2022-11-01 13:14:23

> Original post written by [Matt Raible](https://auth0.com/blog/authors/matt-raible/) for Auth0 blog.

### Learn how to use OktaDev Schematics to add authentication to your JavaScript projects.

### <br>

Hello,

My name is Matt Raible, and I am a developer advocate at Okta. In early 2019, I created OktaDev Schematics to simplify my life when doing Angular demos. But let me step back a bit first. I've worked at Okta for over five years; before that, I was an independent consultant for 20 years, mainly doing Java and web development for clients.

I've learned a lot about OpenID Connect (OIDC) and Okta's JavaScript SDKs over the years and only recently tried to use Auth0's JavaScript SDKs. Over the last couple of weeks, I learned how to use them and integrated many into OktaDev Schematics.

I was pleasantly surprised by the experience because the configuration often boils down to two main values: `domain` and `clientId`. You do have to add callback URLs too, but these are often the same as your app's homepage, so you don't need to add routes in your application. And then, it just works! There's no need to worry about issuers or other OIDC concepts.

This is a strong departure from how we've done things in Okta's SDKs, where we expect people to know about OpenID Connect. We often try to educate developers about OAuth and OIDC, but since these topics are complex, they can be challenging to understand. I like the approach of just needing two values, and everything just works!

## What Is OktaDev Schematics?

[OktaDev Schematics](https://github.com/oktadev/schematics) is a tool I developed to help streamline the integration of OpenID Connect into JavaScript (or TypeScript) applications.

In my first few years at Okta, I'd demo how to use our Angular SDK at conferences, and I'd inevitably miss a step, causing the demo to fail. A failing demo is frustrating, so I created OktaDev Schematics to fix it.

My idea was simple:

1. Create an app using the framework's CLI
2. Integrate OIDC authentication using templates
3. Add a unit test to prove nothing breaks

The project builds on [Angular Schematics](https://angular.io/guide/schematics), so it's incredibly easy to use, particularly in Angular projects, but applies to other frameworks as well.

```shell
ng add @oktadev/schematics
```

This command will prompt you for an issuer and client ID, and then OktaDev Schematics will configure your app to use them. If you're using the [Auth0 CLI](https://github.com/auth0/auth0-cli), you'll need to create a Single-Page Application (SPA) app to get these values.

```shell
auth0 apps create
```

> 💡 TIP: You can also create a SPA app using [the Auth0 dashboard](https:///manage.auth0.com) if you prefer GUIs over CLIs.

In the latest release, I've made it so that adding an `--auth0` flag will set up your project to use Auth0 instead of Okta.

{% twitter 1566907778161049600 %}



- Angular: `ng new` and `ng add @oktadev/schematics --auth0`
- Ionic: `ionic start` and `ng add @oktadev/schematics --auth0`

My [Add OpenID Connect to Angular Apps Quickly](https://auth0.com/blog/add-oidc-to-angular-apps-quickly/) tutorial explains what this command does and shows screenshots of the changes. You can even [view the changes it makes on GitHub](https://github.com/oktadev/auth0-angular-example/pull/1/files).

The tool is smart enough to detect the framework you're using and if you're using TypeScript or JavaScript.

If you want to create a React or Vue app, you'll need to perform a few steps:

1. Create your React app with Create React App:

```
  npx create-react-app secure-app
```

> 💡 TIP: Add `--template typescript` if you want TypeScript support.

For Vue, use `npx @vue/cli create secure-app`.

2. Install the Schematics CLI globally:

```
  npm i -g @angular-devkit/schematics-cli
```

3. In the `secure-app` project, install OktaDev Schematics and run the `add-auth` schematic:

```
  npm i -D @oktadev/schematics
  schematics @oktadev/schematics:add-auth
```

As you can guess, the integration is pretty bare-bones. It configures the SDK and adds a login/logout button. I believe this is in line with the apps each CLI generates. They're pretty bare-bones too!

If you'd like to see how the templates differ between Okta and Auth0, you can [view the templates on GitHub](https://github.com/oktadev/schematics/tree/main/src/add-auth). If you have a GitHub account, you can also [launch github.dev/oktadev/schematics](https://github.dev/oktadev/schematics) and navigate to `src/add-auth/{auth0,okta}`.

![GitHub Dev](https://images.ctfassets.net/23aumh6u8s0i/2SSadjoqS7T5Tl0o2T3vIK/af64cc15a0e25c2f7e7ab29dea466431/github.dev.jpeg)

## JavaScript Framework Support

There's a wealth of popular frameworks currently supported by OktaDev Schematics:

- [Angular](https://github.com/oktadev/schematics#angular)
- [React](https://github.com/oktadev/schematics#react)
- [Vue](https://github.com/oktadev/schematics#vue)
- [Ionic with Angular](https://github.com/oktadev/schematics#ionic)
- [React Native](https://github.com/oktadev/schematics#react-native)
- [Express](https://github.com/oktadev/schematics#express)

See the project's [links section](https://github.com/oktadev/schematics#links) if you want to learn more about Okta or Auth0's SDKs.

The support for Ionic currently only includes Angular. However, Ionic does support React and Vue too. To make OIDC authentication work, I leveraged [Ionic AppAuth](https://github.com/wi3land/ionic-appauth). One cool thing about this library is it has [React](https://github.com/wi3land/ionic-appauth/tree/master/demos/react) and [Vue](https://github.com/wi3land/ionic-appauth/tree/master/demos/vue) examples available. I recently updated these to work with Capacitor 4.

{% twitter 1566829762026291200 %}

[Read more...](https://auth0.com/blog/quick-javascript-authentication/?utm_source=devto&utm_medium=sc&utm_campaign=devto)