From d04db67f459e610a848a7ebbc3e810a516be6c05 Mon Sep 17 00:00:00 2001 From: jcavazos Date: Mon, 27 Oct 2025 23:14:09 -0500 Subject: [PATCH] WIP: Converting asciidoc articles to markdown. --- ...-10-14-quick-javascript-authentication.md} | 98 +++++++++---------- 1 file changed, 47 insertions(+), 51 deletions(-) rename _source/_posts/{2022-10-14-quick-javascript-authentication.adoc => 2022-10-14-quick-javascript-authentication.md} (54%) diff --git a/_source/_posts/2022-10-14-quick-javascript-authentication.adoc b/_source/_posts/2022-10-14-quick-javascript-authentication.md similarity index 54% rename from _source/_posts/2022-10-14-quick-javascript-authentication.adoc rename to _source/_posts/2022-10-14-quick-javascript-authentication.md index 54243d38fd..006b661fce 100644 --- a/_source/_posts/2022-10-14-quick-javascript-authentication.adoc +++ b/_source/_posts/2022-10-14-quick-javascript-authentication.md @@ -12,9 +12,6 @@ image: blog/oktadev-schematics-auth0/quick-javascript-login.jpg type: conversion canonical: https://auth0.com/blog/quick-javascript-authentication/ --- -:page-liquid: -:toc: macro -:experimental: Hello, @@ -26,11 +23,11 @@ I was pleasantly surprised by the experience because the configuration often boi 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! -toc::[] +{% include toc.md %} -== What is OktaDev Schematics? +## What is OktaDev Schematics? -https://github.com/oktadev/schematics[OktaDev Schematics] is a tool I developed to help streamline the integration of OpenID Connect into JavaScript (or TypeScript) applications. +[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. @@ -40,35 +37,31 @@ My idea was simple: 2. Integrate OIDC authentication using templates 3. Add a unit test to prove nothing breaks -The project builds on https://angular.io/guide/schematics[Angular Schematics], so it's incredibly easy to use, particularly in Angular projects, but applies to other frameworks as well. +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. -[source,shell] ----- +```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 https://github.com/auth0/auth0-cli[Auth0 CLI], you'll need to create a Single-Page Application (SPA) app to get these values. +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. -[source,shell] ----- +```shell auth0 apps create ----- +``` -TIP: You can also create a SPA app using https:///manage.auth0.com[the Auth0 dashboard] if you prefer GUIs over CLIs. +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. // https://twitter.com/mraible/status/1566907778161049600 -++++ {% twitter 1566907778161049600 %} -++++ If you're using Angular or Ionic with Angular, you can create an app and then add OIDC authentication in just two commands! - Angular: `ng new` and `ng add @oktadev/schematics --auth0` - Ionic: `ionic start` and `ng add @oktadev/schematics --auth0` -My https://auth0.com/blog/add-oidc-to-angular-apps-quickly/[Add OpenID Connect to Angular Apps Quickly] tutorial explains what this command does and shows screenshots of the changes. You can even https://github.com/oktadev/auth0-angular-example/pull/1/files[view the changes it makes on GitHub]. +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. @@ -76,48 +69,52 @@ 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 -+ +```shell +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 +```shell +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 +```shell +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 https://github.com/oktadev/schematics/tree/main/src/add-auth[view the templates on GitHub]. If you have a GitHub account, you can also https://github.dev/oktadev/schematics[launch github.dev/oktadev/schematics] and navigate to `src/add-auth/{auth0,okta}`. +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}`. -image::{% asset_path 'blog/oktadev-schematics-auth0/github.dev.jpg' %}[alt=github.dev is pretty slick!,width=800,align=center] +![github.dev is pretty slick!](../_assets/img/blog/oktadev-schematics-auth0/github.dev.jpg) -== JavaScript Framework Support +## JavaScript Framework Support There's a wealth of popular frameworks currently supported by OktaDev Schematics: -- https://github.com/oktadev/schematics#angular[Angular] -- https://github.com/oktadev/schematics#react[React] -- https://github.com/oktadev/schematics#vue[Vue] -- https://github.com/oktadev/schematics#ionic[Ionic with Angular] -- https://github.com/oktadev/schematics#react-native[React Native] -- https://github.com/oktadev/schematics#express[Express] +- [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 https://github.com/oktadev/schematics#links[links section] if you want to learn more about Okta or Auth0's SDKs. +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 https://github.com/wi3land/ionic-appauth[Ionic AppAuth]. One cool thing about this library is it has https://github.com/wi3land/ionic-appauth/tree/master/demos/react[React] and https://github.com/wi3land/ionic-appauth/tree/master/demos/vue[Vue] examples available. I recently updated these to work with Capacitor 4. +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. // https://twitter.com/mraible/status/1566829762026291200 -++++ {% twitter 1566829762026291200 %} -++++ -== The Beauty of Continuous Integration +## The Beauty of Continuous Integration To avoid situations where a framework integration would fail in public, like the story I told before, I made sure the library is well tested, limiting the scope of the tests not only to the library code, but also to cover the workflow and generated code bases, e.g.: @@ -125,29 +122,28 @@ To avoid situations where a framework integration would fail in public, like the - Integrate Okta/Auth0 SDKs - Validate the integration to make sure nothing breaks -These commands are all encapsulated in a https://github.com/oktadev/schematics/blob/main/test-app.sh[`test-app.sh` script] I wrote. It's kinda ugly and can probably be improved, but it works pretty well for now. +These commands are all encapsulated in a [`test-app.sh` script](https://github.com/oktadev/schematics/blob/main/test-app.sh) I wrote. It's kinda ugly and can probably be improved, but it works pretty well for now. -If nothing else, this script shows you how to automate creating apps with framework CLIs for continuous integration. The project's https://github.com/oktadev/schematics/blob/main/.github/workflows/apps.yml[Apps workflow] shows how all these frameworks are tested in a matrix. +If nothing else, this script shows you how to automate creating apps with framework CLIs for continuous integration. The project's [Apps workflow](https://github.com/oktadev/schematics/blob/main/.github/workflows/apps.yml) shows how all these frameworks are tested in a matrix. You might notice that all the CLIs are installed without a version number: -[source,yaml] ----- +```yaml run: npm i -g @angular-devkit/schematics-cli @angular/cli @vue/cli @ionic/cli ----- +``` -This is done on purpose, so these templates are continuously tested against the latest release. There's a https://github.com/oktadev/schematics/blob/main/.github/workflows/nightly.yml[Nightly worflow] that ensures nothing breaks every evening. Dependabot is also https://github.com/oktadev/schematics/blob/main/.github/dependabot.yml[configured] to keep the project's dependencies and SDK versions up-to-date. +This is done on purpose, so these templates are continuously tested against the latest release. There's a [Nightly workflow](https://github.com/oktadev/schematics/blob/main/.github/workflows/nightly.yml) that ensures nothing breaks every evening. Dependabot is also [configured](https://github.com/oktadev/schematics/blob/main/.github/dependabot.yml) to keep the project's dependencies and SDK versions up to date. -== Learn more about Authentication in JavaScript +## Learn more about Authentication in JavaScript When framework or libraries introduce changes, sometimes things break. But now, thanks to automated tests, I often find problems as soon as new versions are released. Cheers to continuous integration! 😃 If you liked learning about schematics, you might enjoy these other posts I wrote. -* https://auth0.com/blog/add-oidc-to-angular-apps-quickly/[Add OpenID Connect to Angular Apps Quickly] -* link:/blog/2019/05/21/vue-schematics[Use Schematics with Vue and Add Authentication in 5 Minutes] -* link:/blog/2019/03/05/react-schematics[Use Schematics with React and Add OpenID Connect Authentication in 5 Minutes] -* link:/blog/2019/06/20/ionic-4-tutorial-user-authentication-and-registration[Tutorial: User Login and Registration in Ionic 4] -* link:/blog/2019/11/14/react-native-login[Create a React Native App with Login in 10 Minutes] +* [Add OpenID Connect to Angular Apps Quickly](https://auth0.com/blog/add-oidc-to-angular-apps-quickly/) +* [Use Schematics with Vue and Add Authentication in 5 Minutes](link:/blog/2019/05/21/vue-schematics) +* [Use Schematics with React and Add OpenID Connect Authentication in 5 Minutes](link:/blog/2019/03/05/react-schematics) +* [Tutorial: User Login and Registration in Ionic 4](link:/blog/2019/06/20/ionic-4-tutorial-user-authentication-and-registration) +* [Create a React Native App with Login in 10 Minutes](link:/blog/2019/11/14/react-native-login) -If you're on social media, follow Auth0: { https://twitter.com/auth0[Twitter], https://www.linkedin.com/company/auth0[LinkedIn], https://www.facebook.com/getauth0[Facebook] }. If you like learning via video, subscribe to https://youtube.com/oktadev[the OktaDev YouTube channel]! +If you're on social media, follow Auth0: [Twitter](https://twitter.com/auth0), [LinkedIn](https://www.linkedin.com/company/auth0), [Facebook](https://www.facebook.com/getauth0). If you like learning via video, subscribe to [the OktaDev YouTube channel](https://youtube.com/oktadev)!