shiven_ramji

Shiv is an experienced product executive and builder obsessed with creating beautiful products. He is the President of Auth0 at Okta, managing a $1B ARR business and overseeing the company’s product, data, security, and technology strategy and execution. Before Auth0 and Okta, Shiv was the SVP of Product at DigitalOcean, leading DigitalOcean’s products, pricing, and partnerships. Additionally, Shiv has held product leadership positions at global brands, including Amazon, NBCUniversal, LiveIntent, and The Nielsen Company. Shiv was the recipient of the 2023 Top Global CPO Award by the Products That Count community.

Beyond his current corporate focus, Shiv is deeply committed to fostering entrepreneurship and innovation, particularly in Africa. He is an active angel investor and startup advisor and also serves on the boards of [**Products That Count**](https://productsthatcount.com/) and [**Aiven.io**](http://Aiven.io).


President, Auth0

Shiven Ramji

We’ve leveled up our Free, Essential, and Professional plans.

Auth0’s vision is to free any consumer or SaaS application user to safely use any technology. This means giving developers the products that make building, deploying, and scaling applications easy. In the last few years, we’ve added more capabilities that allow developers to battle malicious attacks and attackers. 

Today, we’re excited to announce the expansion of the [Auth0 free tier and pricing plans](https://auth0.com/pricing). This makes it even easier for developers to defend against increasingly sophisticated attacks on their customers’ identities and build the next generation of applications securely and reliably.

**TL;DR:**

* Our free plan now includes:

    * 25,000 MAUs so you can scale.
    * Unlimited[^1] Okta Connections & Unlimited[^1] Social Connections so users can easily access your app. 
    * A [custom domain](https://auth0.com/docs/customize/custom-domains) so you can fully brand your authentication.
    * [And more](#Here-s-All-the-Changes-on-Our-New-Free-Plan)...
<br><br>
* Our paid plans now include:

    * 10 [Organizations](https://auth0.com/docs/manage-users/organizations) on B2C Plans and Unlimited[^1] on B2B Plans so you can better manage your customers and partners.
    * Increased MFA offerings so you can mitigate the growing threat of AI-based attacks.
    * The ability to get up to 15 Enterprise Connections in B2B Pro via add-ons, so you get more seamless integration across apps.
    * [And more](#We-ve-Also-Got-You-Covered-as-You-Grow-Your-Applications-and-Customers)...

## Here’s All the Changes on Our New Free Plan

On the new Free Plan, we’ve increased the number of MAUs from 7,500 to 25,000. In addition, you now have unlimited[^1] social and Okta connections. You are also now able to add Organizations and Passwordless authentication to your apps, alongside configuring your own domain. With these updates, you can now scale your app to a larger audience with higher MAUs, enhance your brand identity with your own custom domain, and implement even more social features for your users, all while enabling your users' data to remain secure.

![Here’s All the Changes on Our New Free Plan](https://images.ctfassets.net/23aumh6u8s0i/1OpEw7tXFInO8kmgfqLwFh/16d9c3d29fbfb0278072c57c95f10bb5/01_free_plan.jpg)

## We’ve Also Got You Covered as You Grow Your Applications and Customers

Our new Essentials and Professional Plans have also expanded to help you scale and embed security in your app. Organizations are now included in every plan. Unlimited[^1] Okta connections are now included in all B2C and B2B plans. B2B Pro plans include 5 Enterprise Connections, plus you can add up to a total of 15. Both B2B and B2C Essential plans include custom signup/login. We’ve also increased MFA offerings: both Essentials plans now include Pro MFA, and our Pro plans now include [Enterprise MFA](https://auth0.com/docs/secure/multi-factor-authentication). These updates enable you to have robust security, easily integrate applications with the Okta Workforce Identity Cloud, and better manage your users.

Below are the changes to our paid plans:

![B2C Essential](https://images.ctfassets.net/23aumh6u8s0i/15nIH8v8tJu0fxAi9oa6Du/50151607f231ff7d9392cc5e11488bc2/02_b2c_essentials.jpg)

![B2C Essential](https://images.ctfassets.net/23aumh6u8s0i/4fG78P0kTpiiOiZQRdJ1KN/6871f5467f2845c5bfa85ee4208a997e/03_b2c_essentials_2.jpg)

## Bringing It All Back to You

We hope that these changes make it easier to build, deploy, and scale your app at your pace with the tools you need. If you’re an early-stage company, check your eligibility for our [Auth0 for Startups program](https://auth0.com/startups). We are also proud to offer [preferential pricing for nonprofits](https://auth0.com/nonprofits)—making the leading Identity service even more accessible.

Happy building.

Auth0 now; thank yourself later.

## FAQ:

* **When will the new self-service plans be available?**    
    * All plan updates listed here are available as of September 24th, 2024! Start your free trial [here](https://auth0.com/signup) today.

* **Where can I learn more about this?**    
    * Please visit our [pricing page](https://auth0.com/pricing) to learn more about our plan offerings. Our updated Terms of Service can be found [here](https://www.okta.com/auth0-pss-self-service/).

* **As an existing customer, how do I get access to the new features?**    
    * If you're on a free plan, your entitlements will be automatically applied. If you're on an Enterprise contract, please reach out to your Auth0 account team and they will walk you through your changes.

* **What if I have multiple tenants on separate plans?**    
    * Tenants will need to be grouped via [Auth0 Teams](https://auth0.com/docs/get-started/tenant-settings/auth0-teams#access-the-teams-dashboard).

* **What kind of support is available with these plans?**<br>
Don't worry, we've got your back in the same places you've come to expect.
    * Free plan: please reach out for support on the [Auth0 Community](https://community.auth0.com/).
    * Paid plans: please submit a ticket via the [Auth0 Support Center](https://support.auth0.com/).

* **Why do I need to add my credit card details when adding a custom domain on the free plan?**
    * While a credit card is not required to use the free plan, you will have to add one in order to add a custom domain, purely for validation purposes to prove you are human. If you do enter your credit card information to add a custom domain, rest assured you will never be charged.

* **I’m an existing customer, but not on a B2C or B2B plan. How can I take advantage of the new plans?**
    * You will need to change to a new plan under subscriptions settings in your dashboard, whether you choose to move to the Free Plan or one of our Paid Plans.  

[^1]: _subject to system limitations_

Level Up: Auth0 Plans Just Got an Upgrade

AbhishekHingnikar

I'm a Product Architect at Auth0 currently focussed on Auth0 for AI Agents, and MCP. I have a decade of experience at Auth0 and Okta helping developers build secure and delightful user experiences for mission critical services. I'm passionate about open standards, and enjoy writing about security.

Product Architect

Abhishek Hingnikar

Learn about Apple's new One Tap Account Upgrades presented at WWDC 2020



For the average person, it’s a monumental task to constantly monitor if any of their accounts have been affected by a breach. Because [password reuse](https://securityboulevard.com/2020/04/8-scary-statistics-about-the-password-reuse-problem/) is an unfortunately extremely common practice, it becomes even more challenging to monitor all of the accounts that may be using the same credentials as the one involved in a breach.

On top of this, some passwords may not have been involved in a breach, but are still weak and should be updated. Some people have hundreds of accounts across all of their applications, so how can they possibly keep track of all of these credentials and make sure they aren’t vulnerable to an attack?

Apple aims to solve this problem with One Tap Account Upgrades.

At [WWDC 2020](https://developer.apple.com/wwdc20/), Apple announced some huge upgrades to how iOS manages passwords. These upgrades aim to alleviate some of the challenges faced by password management. In this article, we’ll look at Apple’s recent announcements on password upgrades, why they matter, and how they work behind the scenes.

## What’s with Apple and Passwords?

Apple users often rely on Keychain and iCloud Keychain, Apple’s built-in credentials management system, to store and manage their passwords. Keychain is integrated deep within all of their operating systems and powers features such as WiFi hotspot credential sharing, beyond just being a password manager.

This year, Apple added several capabilities to Keychain related to breached or weak password detection and mitigation. Keychain now monitors for weak, re-used, or breached passwords, notifies the user regarding a breach, and offers mitigation options right away.

<div class="row">
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/55jOFPkV1LnvLEWpp9PLmD/582968258c37e5d1dea08b2b0c62f860/keychain-homescreen-iOS-14" alt="Apple Keychain homescreen" style="padding:20px 0;"/>  
  </div>
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/7qJW5Rx3iAn46QmfCHmm6n/f87c675e5da4326b613f6f3a163acc78/keychain-suggestions-screen" alt="Apple Keychain password suggestion screen" style="padding:20px 0;"/>
  </div>
</div>
<div class="row">
  <div class="col-sm-offset-3 col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/61eqEuOhA40P8QaeWnY8fF/afc3ff16294e1aa1383315fbf45ac68f/keychain-mitigation-options" alt="Apple Keychain easily guessed reused password" style="padding:20px 0;"/>
  </div>
</div>

The ability to check if your credentials or information were found in a breach is a great step towards mitigating the threats caused by a breach. Users have been able to check if they were affected by a breach using 3rd party password managers like 1Password or by checking websites like [haveibeenpwned.com](https://haveibeenpwned.com). Breached password detection is also offered by some service providers, such as [Auth0’s breached password detection](https://auth0.com/breached-passwords). With Apple’s recent announcement, this security feature has now been introduced to more than one billion iOS devices. 

When it comes to handling a breach, notifying the user is only half of the problem. The other half is mitigating the threat. When a breached credential is detected, a user has to mitigate the threat by resetting the password manually, which can involve several steps. Apple intends to offer a one-tap mitigation to remove this burden on the user. 

## Easy Mitigation of Breached Credentials

One of the easiest ways to encourage a user to do something is to offer them a call to action (CTA) right away. Many password reset experiences are long and time-consuming, and some even require you to enter the answer to a secret security question that you set up ages ago!

Apple solves this problem by offering a CTA right in the report, inviting the user to mitigate the threat immediately. If a breached or weak password is detected, Keychain offers you a simple button that will replace the weak password with a new one or offer you to upgrade to Sign in with Apple. The image below demonstrates what happens when Keychain detects a weak password. 

<div class="row">
  <div class="col-sm-offset-3 col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/5cTx5qLP0kqWYqvGciEYMy/8550e1b88ebfb7b25f057c1581c8350a/password-upgrade-option" alt="Apple Keychain easily guessed weak password" style="padding:20px 0;"/>
  </div>
</div>

For this to work, there are two requirements:

- The app must be installed on iOS 
- The app must offer an Account Upgrades Extension that offers the Upgrade to Strong Password capability

In addition to this, Apple introduced another call to action for apps that support Sign in with Apple. If your app supports it, Keychain will now offer a quick and easy way to upgrade the user’s account to Sign in with Apple with just the click of a button. Now, the user doesn’t have to worry about managing another username and password for that application!

It's exciting to see these password security upgrades. My personal wishlist for these features would include an experience similar to [App Clips](https://developer.apple.com/app-clips/), but for account upgrades. App Clips are Apple’s ephemeral apps, which means you do not need to install the full application to use them. App Clips offer a great balance between opening a web page and installing an app. If you want to learn more about App Clips, keep an eye out for our upcoming blog post on App Clips.

For now, let’s look at how Account Upgrades work and some of the options Apple is offering to enhance password security:

- Upgrade to Strong Password
- Upgrade to Sign in with Apple
- In-App Upgrades

## How do Account Upgrades work? 

Apple uses something called an App Extension to power the button that upgrades a weak password to Sign in with Apple. 
If you are unfamiliar with iOS nitty-gritty, an App Extension can be thought of as a service, intent, or an action handler. These are single-purpose micro-apps with specific entry and exit points. They are iOS triggered events that let a developer return a custom action in response. This is similar in concept to Auth0’s Hooks and Rules, but in this case, all of this is on the iOS client.

Some App Extension examples include Account Upgrade, SSO Capabilities, and more. Let’s take a closer look at the Account Upgrade Extension introduced in WWDC 2020.

**The Account Upgrade Extension has four tasks:**

- Present the UI to accommodate extra steps when changing the password.
- Upgrade the user’s password. 
- Present the UI to accommodate extra steps when changing the password. 
- Upgrade the user’s account to use Sign in with Apple.
- To implement Account Upgrade Extension, you simply add a new target and select “Account Upgrade Extension”.
- XCode then generates a template extension file, which includes each task as a single function handler. You are then expected to provide the business logic to perform the tasks. XCode will also generate an `Info.plist` file for the extension that informs iOS about the individual capabilities for account upgrades offered by this extension.

Next, let’s look at how the Upgrade to Strong Password feature works.

## Upgrade to Strong Password 

Programmatically, the Upgrade to Strong Password flow is similar to how the Account Upgrade to Sign in with Apple described in the previous section works.

On a high level, the Upgrade to Strong Password flow works as follows:

- User taps on the "Upgrade to Strong Password" button
- iOS will generate a strong password 
- Optionally, you can define the specific criteria for this password
- iOS then activates your extension and calls `changePasswordWithoutUserInteraction` with the existing set of credentials and the new set of generated credentials. 
- At this point, your application needs to perform additional steps, such as calling an API, to actually finish this operation. Some next steps may include:
  - Check if the credentials don’t exist with `.credentialIdentityNotFound`
  - If second-factor authentication is required, you can respond with `.userInteractionRequired`
  - In any other error scenario, you can respond with `.failed`
  - Lastly, if everything goes correctly, you should invoke the `completeChangePasswordRequest` with the new set of credentials. This tells iOS that the process has successfully completed, at which point iOS will update its copy.
- If your application responds with `.userInteractionRequired`, iOS will call `prepareInterfaceToChangePassword` to actually update the password.

The screenshots below show the Upgrade to Strong Password process in action. The “Easily guessed password warning” is displayed in the application. The user clicks “Change to Strong Password”, then the password is updated.

<div class="row">
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/5cTx5qLP0kqWYqvGciEYMy/8550e1b88ebfb7b25f057c1581c8350a/password-upgrade-option" alt="Apple Keychain change to strong password upgrade" style="padding:20px 0;"/>  
  </div>
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/7tbnmBMMube9CZcJ4KDstZ/78e58802767c32d832636129ed905cdc/password-upgrade-confirmation-prompt" alt="Apple Keychain password upgrade confirmation" style="padding:20px 0;"/>
  </div>
</div>
<div class="row">
  <div class="col-sm-offset-3 col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/3u0QxLw46MmkYvMablSZSp/5e5b30638f1c5e2b9549389199621a0d/password-upgrade-final-screen" alt="Apple Keychain account using strong password screen" style="padding:20px 0;"/>
  </div>
</div>

Here is an example of what the Upgrade to Strong Password would look like in your application code:

```swift
override func changePasswordWithoutUserInteraction(for serviceIdentifier: ASCredentialServiceIdentifier, existingCredential: ASPasswordCredential, newPassword: String, userInfo: [AnyHashable : Any]? = nil) {
  changePassword(existingCredentials, newPassword, userInfo) { result in
    switch (result) {
      case .error(let errorCode):
        self.extensionContext.cancelRequest(withError: NSError(domain: ASExtensionErrorDomain, code: errorCode))
      case .success(_):
        let newCredential = ASPasswordCredential(
          user: existingCredential.user, 
          password: newPassword
        )
        self.extensionContext.completeChangePasswordRequest(
          updatedCredential: newCredential
        )
    }
  }
}
```

Let’s break it down a bit.

- `changePassword` performs the actual operations for changing the user’s password.
- If the result fails, it responds by canceling the request and showing the error to the user.
- If the API change was successful, it will notify iOS regarding the state of the change.

Next, let’s look at how Upgrade to Sign in with Apple works.

## Upgrade to Sign in with Apple

The Upgrade to Sign in with Apple flow is almost exactly the same. However, instead of a new set of credentials, iOS provides the original set of credentials and offers a way to perform Sign in With Apple interactions without having to start the application.

This interaction is slightly different from the usual Sign in with Apple flow when signing up or logging the user in. It explicitly informs the user about the action being taken and that their information from the past account will be linked to the new identity.

The flow is as follows:

- The user taps on Upgrade to Sign in with Apple.
- iOS will invoke convertAccountToSignInWithAppleWithoutUserInteraction with the set of existing credentials.
- Like the password reset, you can respond with the appropriate error, and iOS will offer to perform second-factor authentication or inform the user.
- Once this flow is complete, it’s important to note that Keychain will remove the password from its store. From this point, the user is supposed to use Sign in With Apple.

<div class="row">
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/2fsp4SpqEmZyKVRusBZCtH/1c0eba802069d5be8fff6091723e7fe0/siwa-upgrade-option" alt="Apple Keychain easily guessed password" style="padding:20px 0;"/>  
  </div>
  <div class="col-sm-6">
    <img src="https://images.ctfassets.net/23aumh6u8s0i/pcTJO06Uz5EI1qmzm7UZD/0f158138f66b396ee3db7e5b2e312348/siwa-upgrade-action" alt="Apple Keychain SIWA upgrade" style="padding:20px 0;"/>
  </div>
</div>

Let's walk through some of the code that could be used to accomplish this:

```swift
override func convertAccountToSignInWithAppleWithoutUserInteraction(for serviceIdentifier: ASCredentialServiceIdentifier, existingCredential: ASPasswordCredential, userInfo: [AnyHashable : Any]? = nil) {
  let challenge = validateExistingAccountAndPrepareForUpgrade(existingCredentials, userInfo)
  self.extensionContext.getSignInWithAppleUpgradeAuthorization(
    state: challenge.state, 
    nonce: challenge.nonce
    ) { (authorization, error) in
      if error != nil {
        // Handle error
        self.extensionContext.cancelRequest(withError: NSError(domain: ASExtensionErrorDomain, code: ASExtensionError.failed.rawValue))

        return
      }

      // handle the authorization 
      upgradeAccount(challenge, authorization) { error in
        if error != nil {
          // Handle error
          self.extensionContext.cancelRequest(withError: NSError(domain: ASExtensionErrorDomain, code: ASExtensionError.failed.rawValue))

          return
        }

        self.extensionContext.completeUpgradeToSignInWithApple(userInfo: nil)
      }
    }
  }
}
```

Let’s break it down a bit.

- `validateExistingAccountAndPrepareForUpgrade` performs the actual operations for changing the user’s password.
- If the result fails, it responds by canceling the request and showing the error to the user.
- If the API change was successful, it will request Sign in with Apple authorization using `getSignInWithAppleUpgradeAuthorization` on `extensionContext`.
- If this is successful, it will then try to upgrade the accounts.

## In-App Upgrades
 
Since the underlying API is an extension, Apple also allows you to leverage the extension you have built from within your application. When doing so, you do not access the password, as your application should have already logged the user in.

You can do this as follows:

```swift
class ASInAppSIWALinkHelper: NSObject, ASAccountAuthenticationModificationControllerDelegate {
  var controller: ASAccountAuthenticationModificationController =  ASAccountAuthenticationModificationController()
  
  func accountAuthenticationModificationController(_ controller: ASAccountAuthenticationModificationController, didFail request: ASAccountAuthenticationModificationRequest, error: Error) {
    print("Error \(error) \(request.description)")
  }
  func accountAuthenticationModificationController(_ controller: ASAccountAuthenticationModificationController, didSuccessfullyComplete request: ASAccountAuthenticationModificationRequest, userInfo: [AnyHashable : Any]? = nil) {
    print("Success \(String(describing: userInfo))")
  }
  
  func siwaUpgrade() {
    print("Attempt")
    let userInfo = ["someid": "foobar"]
    let siwaUpgrade = ASAccountAuthenticationModificationReplacePasswordWithSignInWithAppleRequest(
        user: userIdenitifer,
        serviceIdentifier: ASCredentialServiceIdentifier(
            identifier: "yourdomain.com",
            type: .domain
        ),
        userInfo: userInfo
    )
    controller.delegate = self
    controller.perform(siwaUpgrade)
  }
}
```

Note that you are only sending the user’s identifier to the extension here. The app should retrieve the existing credentials from Keychain (or any storage mechanism) and use that token instead. The code for the upgrade will stay the same for the rest. This means that you can re-use most of your logic for In-App Upgrades as well as Keychain-initiated upgrades.

## Security Concerns

As of writing this, the API for these features is currently in beta. iOS 14 is due to release in September, so we may see some changes in the APIs by then. In their current state, there are some concerns regarding these APIs.

One concern is that the Upgrade Password request does not allow the use of more modern password resetting flows, such as sending a [one-time password reset link](https://auth0.com/docs/mfa/guides/configure-otp) through email or some other verifiable factor.  Additionally, in case of a breached credential, an attacker would be able to use the same API to potentially take over the account. While [second-factor password](https://auth0.com/docs/mfa) does offer protection here, you should implement some sort of second-factor before allowing either interaction.

## Conclusion

Apple has released several welcome changes to the Keychain that all iOS users can benefit from. This improves security for everyone on iOS. However, there are still some concerns to be resolved and design decisions to accommodate these solutions.

How would you use these extensions and enhancements in your application? What does your password reset experience look like? Do you wish to offer account upgrades in your app? Let us know in the comments below!

<include src="asides/AboutAuth0" />

**Sources**

- [Apple Developer Documentation](https://developer.apple.com/documentation/authenticationservices/asaccountauthenticationmodificationviewcontroller) for `ASAccountAuthenticationModificationViewController`
- [WWDC 2020 One-tap account security upgrades presentation](https://developer.apple.com/videos/play/wwdc2020/10666/)


Apple One Tap Account Upgrades from WWDC 2020

john-papa

John Papa is a dedicated father and husband, a professional Web Developer, and avid OSS and community advocate. He currently is a Developer Advocate for Microsoft and has formerly worked for Disney on several web and mobile applications that you may have used. His passions are coding and teaching modern web technologies and enjoying everything Disney with his family. John is a co-host of the Real Talk JavaScript podcast, author of the Angular Style Guide, and many popular Pluralsight courses. You can reach John on Twitter at @john_papa.

Principal Developer Advocate Lead

John Papa

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson

Learn about the top seven features and upgrades we get with Angular 9


[Angular](https://angular.io/) [v9](https://github.com/angular/angular/releases/tag/9.0.0) is here! Along with it, we now get [Ivy](https://angular.io/guide/ivy), the default compiler that can reduce bundle size, improve debugging, and much more. It’s been almost three years since Angular released an update this large (ironic, since this update makes the code smaller!), and we can see it’s been worth the wait. 

![GitHub view of Angular v9](https://images.ctfassets.net/23aumh6u8s0i/5Vh6v8fQvKbKVPFL3QLRDi/81c0312083b87fd1ea130064e310a2c8/github-v9)

In this article, we are going to go over how to update from v8 to v9 and the **most Magnificent Seven things that Angular v9 has given us**. There are many things we can look forward to in this update, let’s talk about some of our favorites!

<include src="TweetQuote" quoteText="Angular v9 is here! Along with it, we now get Ivy!"/>

## Angular 9 is Ready for its Closeup

This upgrade has been through extensive testing. With more developers and projects using it, the bugs have been reported, and [over 300 have been fixed](https://github.com/angular/angular/issues?q=is%3Aissue+is%3Aclosed+label%3A%22comp%3A+ivy%22). Angular is used internally at Google for projects like [Google Domains](https://domains.google/) and [Firebase](https://firebase.google.com/). These projects will use new versions of Angular to test and validate before it goes beyond beta and RC. This upgrade is ready!

<include src="ebook-ads/Oauth2OidcGuide" />

Version 9 is more about changes to the framework, not the code that we wrote. This makes it easy for developers. To upgrade to v9, we won’t have to dive into individual files or components and update any code ourselves. The new Ivy renderer works with all our current code!

<include src="TweetQuote" quoteText="Angular v9 is more about changes to the framework, not the code that we wrote."/>

## How to Update from v8 to v9

We can find step-by-step instructions for updating from v8 to v9 on the [official update.angular.io](https://update.angular.io/). Let’s go over exactly what needs to happen to upgrade from Angular v8 to Angular v9.

> **Note:** Before starting the upgrade process, be sure to commit all changes to git. This will also be helpful to see how the upgrade modified certain files.

First, ensure we are using [Node v10.13 or later](https://nodejs.org/en/download/). It’s recommended to use the [Node 12.15.0 LTS](https://nodejs.org/en/) version since it will be supported!

Once we confirm our Node version, we will want to run the following command in our project’s directory:

```bash
ng update @angular/core@8 @angular/cli@8
```

This command will update our `@angular/core` and `@angular/cli` in our `package.json` for our project.

Once we run that, we will want to run:

```bash
ng update @angular/core @angular/cli
```

![Terminal - Updating to Angular 9 confirmation](https://images.ctfassets.net/23aumh6u8s0i/4DgcPvzI1DaT34ZVabV08M/044521f10274b02c4427e9737eb46aa1/terminal-updated-v9)

During the update process, we should see numerous messages telling us exactly what the CLI is updating. It will also tell us which files were modified. At a minimum, we should see the following files modified:

![VS Code view of files that were modified. tsconfig.app.json, angular.json, package-lock.json, package.json](https://images.ctfassets.net/23aumh6u8s0i/1u6tVi0ssjjkDaCFsmy7AP/2a99131ba3b1c095940be54dfc735865/files-modified)

We may see other files that get modified depending on where the project sits. For example, if the project has the older lazy load syntax or if the project is missing the `@injectable()` in a service file, those would also get updated.

Once complete, head to our `package.json`, and we will see that we are up-to-date with the latest Angular v9!

![View of package.json showing v9 updates](https://images.ctfassets.net/23aumh6u8s0i/2ju5ykqhOv1jioBXin99TJ/f1e495969baad55ddb8927b6e404a264/package-json-v9)

We have now updated from Angular v8 to Angular v9! Let’s explore more of the features.

## The Magnificent Seven

In this article, we are going to list the most “Magnificent Seven” features in Angular v9, all to the theme of movie titles. You get bonus points for spotting all the movie and television show references and listing them in the comments! 

## 1 - Honey I Shrunk Our App

It wasn’t accidental that the Angular team focused on helping our apps become smaller and making our apps faster than they were in previous versions of Angular. Our users expect the app experience to be fast. The Ivy compiler focuses on targeting our code with laser-beam accuracy to find and remove unneeded code.  

The Ivy compiler looks for parts of Angular that are not being used. It uses tree-shaking (a way of detecting unused code, also known as dead code removal), and it generates less code for each Angular component.

As the chart below shows, apps of all sizes can benefit from the Ivy compiler.

![Graph showing how Ivy improves app size](https://images.ctfassets.net/23aumh6u8s0i/56YEnzsya5yfLIBchND4Kz/51391832e85cf1fbd3b5302ff18b2f9b/ivy-size-improvements-2)
([Image credit](https://blog.angular.io/))

Once we update to Angular 9, we can run `ng build --prod` and notice how our file sizes shrink. 

## 2 - Ivy Knows What You Did Last Summer, in that Template

That’s right. Last summer, we wrote some pretty tragic code that we mostly forgot about. But Angular 9 hasn’t forgotten. We made poor choices in our templates and those errors are now detected by Angular 9. Fortunately, Angular is friendly enough to share those template errors with us in a clear and helpful way.

When we reference a component in a template, Angular expects that the component exists in the app. Imagine that we have this template:

``` html  

<div>
  <app-fake></app-fake>
  Hello {{hero.name}}
</div>

```

If no component exists that matches the `app-fake` selector, this is a problem. However, in Angular 9, when we run `ng build`, we get a very detailed error explaining that it knows exactly what we did wrong. 

![ng build error](https://images.ctfassets.net/23aumh6u8s0i/2PxhjJkLrkr942rXS2qCpM/38768b3bef6d50c8d43fd3b6b5699012/ng-build-error-2)

The error message very clearly tells us that it cannot find the component, shows us which component it is referring to, and it shows us exactly where this reference appears in the code! 

## 3 - Winter is Coming, and so is Our Angular Build

Ivy is so fast that we’ll have fewer opportunities to step away while waiting for our builds to complete. Prior to Angular 9, some of our app build times have felt like it would be a race to see what would come first: Winter or the completion of our Angular build.

Well, Ivy knows things about our apps and it always pays its debts. Ivy speeds up our build times significantly. Faster build times mean less stepping away from the computer while we build our apps. 

## 4 - Back to the Future, with AOT!

Remember that time before Angular 9 when we found out we had an [AOT](https://angular.io/guide/aot-compiler) error that surfaced only in Continuous Integration (CI) or, heaven forbid, in production? Hello McFly! That’s about when we want to go back in time and correct our mistakes by running `ng build --prod`. 

Why did this happen? Because prior to Angular 9, the AOT compilation step only ran when we executed using the production flag `ng build --prod`. It seems that AOT compilation would have made the dev builds too slow to be a good experience, so the Angular team opted (thankfully) to only put AOT compilation in the production builds. While this was fine as long as we remembered to run it before pushing or merging (or whatever your CI process is), it certainly had its flaws.

What we wish is that in the future, we can see the AOT errors in all builds. Well, that future is here!

The good news is that Angular 9 brings AOT to the dev build, too! The Ivy compiler makes our builds much faster. So fast that it makes it reasonable to pull AOT into the dev builds (and of course, `ng serve`) without causing significant delays in build times. 

The bottom line is that AOT is now dev and prod. Who cares? We do! AOT errors that never appeared in a dev build used to surprise us when we ran with a prod build. Now that dev and prod use AOT, we’ll find these errors early and we’ll see good error messages explaining how to fix them.

## 5 - The Phantom Template Variable Menace 

There once was a time when we could create phantom variables in our templates - variables that had never been referenced in the template’s associated component. Creating these phantom variables can menace our applications. All of this changes in Angular 9 as we now get a compiler error when we create a template variable that has not been defined in a component.

Let’s take a look at what this means. Imagine we have a template and we set a `villain` variable when a user clicks on a `<div>`. Now, we may have intended for them to set the `hero` model, which exists in the templates’ component. But we might have made a copy and paste error. Or maybe we really wanted to create a `villain` model, in which case we should have defined the model in the component file.

``` html  

<div (click)="villain = { id: 1, name: 'john' }">

```

When we build with Angular 9, this error will be displayed. Notice it tells us that the villain doesn’t exist in the component. It even shows us exactly where to find this code. 

![Error handling in Components](https://images.ctfassets.net/23aumh6u8s0i/7mXFNSasHpo4UbSt5BOXox/9e3ee6d379e6a035e2d346793a3a84b6/component-errors-2)

So what can we do about this? Well, if the intention was to set a hero, now we know we have to change it. If we really need to set the `villain` model in the template, just create the `villain` model in the component. Before Angular 9, this may have gone unnoticed, but now Ivy detects and alerts us about all template-only variables.

## 6 - Brave: An ng update Story

At times running `ng update` with Angular 8 (or previous) is amazingly easy and helpful. And other times, it felt like we were poking a sleeping bear. It’s almost like the magical wisps inside of the Angular CLI were playing games with us. 

Angular 9 now has a vastly improved `ng update` experience. It is more accurate, more consistent, and more transparent. Here are three key reasons why the Angular CLI is now more reliable than ever:

1. It now uses the latest version of the CLI to perform all updates.
2. Now displays a detailed diary depicting exactly what it is doing during the update.
3. Refactors our code where it detects a need to be compatible with the latest version.

Since a detailed diary of the update progress is displayed, we always know what code is being refactored. Plus, we can also check our git changes for any refactored code. Here are three examples of the scenarios that the Angular CLI will refactor for us:

* Update lazy loading syntax to use dynamic imports.
* Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for our view and content queries.
* Update our services without @Injectable to use `@Injectable`.

This is really convenient, so we do not have to know every new change in Angular 9 (and beyond). The Angular CLI knows these changes, reports to use what changes it is looking for, and then refactors when it finds any places in our code that need those changes.

## 7 - The Legendary Journey of Entry Components

A long time ago, in a time of myth and legend, only one person knew when we needed to define `entryComponents` in our NgModules. Ok, that’s not entirely accurate as many of us have used `entryComponents`. But do we always remember what they do and when they are needed?  Or was that knowledge lost in our mind? With no more hope of resurfacing than that of a lost soul in the Minotaur’s maze.

Lest we forget, this was needed when we used a component (perhaps in code), but it never appeared in a template. Prior to Angular 9, specifying the component in the `entryComponents` array was the recommended way to tell Angular, “Hey, we have a component here!”.

```typescript
@NgModule({
  // ...
  entryComponents: [ModalComponent]
})
export class AppModule {}
```

Here is a scenario where we might have a component that is not referenced in a template. Imagine that we create a `ModalComponent` which shows a modal dialog to the user, letting them select “yes” or “no”. When using Angular Material, we could use the `MatDialog.open()` function and pass it the `ModalComponent` to display to the user. This could be the only place in the app that the component is referenced. Prior to Angular 9, this must be set in the `entryComponents` array in a NgModule. Otherwise, Angular would not know what `ModalComponent` is.

Wow, this is something we probably don’t do that often. However, when we do need this feature, we often spend some time searching Google for how to solve it. 

The good news here is that in Angular 9 there have been changes to the compiler and runtime that make it so we no longer need to specify this in the `entryComponents` array. Angular will find the component on its own. 

The bad news, if we can call it bad news, is that Angular will not remove the component from the `entryComponents` array for us. So we should search our code after updating and manually remove them. Then test … always test. Just in case.

## Upgraded Tooling

One of the best things about Angular is the amazing and helpful ecosystem. When we upgrade to version 9 we really want to make sure we’re using the latest tools that go with Angular. Here are two tools we recommend installing or upgrading:

1. [VS Code](https://code.visualstudio.com/?wt.mc_id=angular9-blog-jopapa) editor
2. [Angular Essentials Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&wt.mc_id=angular9-blog-jopapa) for Visual VS Code

The Angular Essentials extension includes a set of useful extensions to enhance the development experience with Angular. The one that stands out most is the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=angular9-blog-jopapa), which adds a lot of features to VS Code, so it knows how to help us write our Angular code. Others include useful Angular snippets, ESLint, and debugging extensions.

<include src="asides/Angular" />

## That’s All Folks!

It looks like we have a lot to look forward to with Angular v9. We have faster build times, a more accurate `ng update`, and Ivy is making smaller bundle sizes, just to name a few! The Angular team has been working countless hours on this version and we can now reap the benefits!

Which is your favorite of those **Magnificent Seven**? Which one will help your project the most? Let us know in the comments below!

---


Angular 9: What’s New?

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Learn about upgrading an application from AngularJS to the new Angular. As well as how to upgrade AngularJS authentication strategies to Angular.

Upgrade Your AngularJS Authentication Service

jenny-obrien

I'm a former business journalist who's fascinated by the intersection of tech and business strategy — in particular how the right solution can transform an idea into reality. I specialize in ROI, data privacy, and identity.

Business Content Manager

Jenny O'Brien

Auth0's Universal Identity Management platform will securely authenticate voters as they log in MiVoz’s decentralized platform



Trusting elections is tough when more than [two-thirds of Uruguayans surveyed](http://en.mercopress.com/2017/12/31/corruption-in-uruguayan-government-very-much-extended-says-opinion-poll) believe that their politicians are corrupt, nonprofit [MiVoz](https://mivoz.uy/) sees an answer in injecting innovative technology into the election process.

“The political part of our society is really old — 200 years. We were thinking that the main reason democracy exists is so that people can really feel that they are living in the society that they want”, says [Leonardo Giovanetti, Technical Leader for MiVoz and the Digital Party](https://www.linkedin.com/in/leogiovanetti/).

Social media has programmed people to trust information found via their social networks for both good and bad outcomes. What if that interaction, trust, and energy could be harnessed in a way that allowed each voter to have a say in each political decision, instead of waiting years to weigh in during the election of a representative?

MiVoz is hoping to prove that direct democracy doesn’t have to be unwieldy or even time-consuming. By creating an effective and secure digital platform, taking part in democracy could become a more seamless part of modern lives.

## Mending Trust with Digital Values like Transparency

But changes to long-established institutions and processes can take time.

For the initial phase, MiVoz is targeting Uruguay’s National Elections of 2019 and the following year’s departmental elections. They only need to sign up 30,000 people to secure a representative who will vote in accordance with how citizens vote on MiVoz’s online platform.

“We're intending to promote the usage of an online platform to bring up participation levels and to bring transparency to decision-making on financial reports, which is something that political parties here in Uruguay have lost,” says Giovanetti

As a nonprofit, MiVoz needed the most efficient and low-cost method of securely authenticating voters. But the big issue was trust. Based on past experience with political parties, citizens in Uruguay were reluctant to place their trust in yet another political party.

“We really want to let people know that they can use the tool that we're providing because it's really safe because one vote needs to correspond to one person. Auth0 was really a blessing from my perspective because it's really the best way to go,” says Giovanetti.

While MiVoz is still exploring fully digital means of uploading and validating voter credentials, currently, government-issued identification will be used to validate each voter in person via various locations throughout Uruguay. After that initial effort, Auth0 will securely authenticate voters as they sign in to access MiVoz’s platform.

## Encouraging Participation through Collaboration and Delegation

The initial rollout is focused on the 2019 elections, but later plans include the ability for voters to weigh in on each decision their representative faces — including the possibility of delegating votes on topics like energy or education to close friends. “No one knows everything about every single topic,” says Giovanetti. “We're trying to provide the right tools for people to really represent themselves, sometimes through a trustee who can make a better decision than ourselves because of their background.”

Originally, MiVoz tried DemocracyOS for collecting votes, but after exploring their voting process, they shifted to Sovereign’s decentralized platform. In addition to encouraging collaboration and discussion through tools like Discourse, MiVoz plans to store credentials using blockchain accessed via an Auth0 plug-in.

“We're really passionate about making democracy for this millennium. We’re looking to involve people instead of having them vote and forget about it, but still complain on Facebook or Twitter. Our idea is to put up a platform that could really bring people together for new causes for democracy in their society.”


"upgrade"