peterfernandez_360

As an Architect, Consultant, and Engineer, I have more than 30 years of experience designing and developing secure and robust software solutions. When not helping teams deal with the complexities of Customer Identity, you can usually find me working behind the scenes, acting in or directing a show at my local theatre.

Principal Developer Advocate

Peter Fernandez

A step-by-step guide to leveraging OAuth 2.0 when accessing protected APIs via an iOS app built with Swift and integrated with Auth0.

Calling a Protected API from an iOS Swift App

A step-by-step guide to leveraging OAuth 2.0 Refresh Tokens in an iOS app built with Swift and integrated with Auth0.

Using a Refresh Token in an iOS Swift App

joey devilla headshot 900px

I’m a Senior Developer Advocate at Auth0, and I like to work on various technologies. I’ve developed software for all sorts of platforms, from CD-ROM and the PalmPilot to my current area of focus, mobile phones, IoT devices, and AI. When I’m not looking for strange new platforms to write software for, I’m playing a strange old instrument — the accordion!

Senior Developer Advocate

Joey deVilla

Use Auth0’s Management API and account metadata to collect user information a little bit at a time instead of all at once.

Add Progressive Profiling to Auth0 Authentication in Android Apps Built with Jetpack Compose

auziros:jeana-tahnk

Jeana has been in the tech industry for 15+ years, both as a communications professional and writer. As Director of Global Communications at Auth0, she works with her internal team and external agencies to amplify the company's visibility worldwide and establish its leadership in the identity industry. When she is not working, she can most likely be found on a field watching one of her three kids playing sports, or cleaning up after her one-year-old retriever who chews everything.

Senior Director, Global Communications

Jeana Tahnk

New survey reveals behaviors and usage patterns of application builders; authentication required in 83% of applications built



**BELLEVUE, Wash. – May 19, 2020 –** The [Auth0](https://auth0.com/) Identity Platform, a product unit within Okta, today released a [**2020 State of Application Assembly**](https://auth0.com/resources/whitepapers/state-app-assembly-2020) survey, revealing that a majority of development teams are turning to best-in-class SaaS services and the adaptability of APIs for building unique features and functionalities into the many apps they are responsible for each year.

Surveying 426 global technical professionals across a variety of roles (developers, engineers, CTOs, directors of engineering, software architects) and company sizes, Auth0 determined that 51% of respondents are responsible for building two to five apps per year, and more than a quarter (28%) build 6-10+ apps per year, with three-quarters of these apps being used for external audiences. There are currently more than 4.1 million apps available on leading app stores ([Statista](https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/)), indicating the staggering amount of development these builders are responsible for. 

The survey explored application builder behavior around several services and key findings included: 

* For applications that required payment, 74% of respondents outsourced, with Stripe being the dominant tool of choice.
* For applications that required messaging, 71% outsourced this solution, with Twilio being the highly preferred tool.
* The third service explored was authentication, cited as a requirement in 83% of applications built. However, the numbers for outsourcing authentication were lower than the other two services, with respondents outsourcing 58% of the time. 

With a substantial percentage of companies still building authentication tools in-house – and because authentication is present in the majority of apps – there’s a large potential opportunity for application building teams to streamline their processes and improve efficiency by using a third-party IDaaS tool. 

The accelerated timelines that come with app launches are driving teams away from in-house development and towards microservices – app ‘building blocks’ – that provide features and functionality that would be nearly impossible to build and maintain themselves. Relying on third-party services that are adaptable to their specific needs, significantly frees the team’s resources to focus on core innovation and speed-to-market. 

“These results confirm a trend of application development teams increasingly relying on first- and third-party APIs and external SaaS services when assembling apps, to simultaneously decrease time-to-market and increase completeness and security,” said Martin Gontovnikas, SVP of Marketing and Growth at Auth0. “Whether it’s payments, messaging, or authentication, this survey shows that teams are turning more to a ‘must-have SaaS stack’ to expedite development and enable them to focus on their core product.” 

The move to outsource services that are proven and fully adaptable gives application teams a competitive edge in innovation and implementation. By 2022, 90% of all apps will feature microservices architectures that improve the ability to design, debug, update, and leverage third-party code. Combined with agile/DevOps approaches and methodologies, enterprises can dramatically accelerate their ability to push out digital innovation – at 50-100x (or more) the frequency of traditional approaches ([IDC](https://www.idc.com/getdoc.jsp?containerId=prUS44417618)).

Please visit the [State of Application Assembly](https://auth0.com/resources/whitepapers/state-app-assembly-2020) for further details and to view all survey results.


<include src="asides/AboutAuth0" />

### Media Contacts
Jeana Tahnk<br>
Auth0 Global Communications<br>
[press@auth0.com](mailto:press@auth0.com)

Hannah Carroll<br>
Matter for Auth0<br>
[auth0@matternow.com](mailto:auth0@matternow.com)


Majority of Application Development Teams Rely More On SaaS Services vs. Building In-House

FlexJobs and Built In Seattle recognize Auth0 for industry-leading perks, benefits, and remote-friendly culture



**BELLEVUE, Wash. – January 21, 2020 –** The [Auth0](https://auth0.com/) Identity Platform, a product unit within Okta, today announced it has been included on [FlexJobs’ annual list of ‘Top 100 Companies to Watch for Remote Jobs in 2020'](https://www.flexjobs.com/blog/post/100-top-companies-with-remote-jobs-2020/) and [Built In Seattle’s list of ‘Best Places to Work in 2020'](https://www.builtinseattle.com/companies/best-places-to-work-seattle-2020), both of which recognize Auth0 for its flexible, remote-friendly culture, and commitment to providing its employees with the best benefits and perks. 

Based on an analysis of more than 54,000 companies and their remote job posting histories in the FlexJobs database in 2019, Auth0 – along with companies like Amazon, Aetna, JPMorgan Chase, Dell, and Salesforce – had the highest number of remote job openings on the FlexJobs site last year. The number of people telecommuting in the U.S. has dramatically increased by [159 percent](https://www.flexjobs.com/blog/post/flexjobs-gwa-report-remote-growth/) since 2005, with remote work bringing very real benefits to both employers and workers, such as greater work-life balance, wider talent pool, higher productivity, stronger retention rates, and much more.

Auth0 was also recognized for its top employee perks and benefits on Built In Seattle’s list of Best Places to Work in 2020. Built In's ‘Best Places to Work’ list rates companies based on their employer benefits and employee submitted compensation data. 

“We pride ourselves on being a company that enables our team members to do their best work – regardless of location – at a global scale,” said Eugenio Pace, CEO, and co-founder of Auth0. “Our inclusion on the FlexJobs and Built In Seattle lists is a reflection of our dedication to providing the best culture and work-life balance for our team that spans more than 33 countries, and we’re honored for the recognition.”

Auth0 is dedicated to creating a work environment that centers around collaboration, communication, and culture. Inclusion in these listings is continued validation of this dedication and follows other ‘best places to work’ recognition, including [Inc. Magazine’s Best Workplaces 2019](https://auth0.com/blog/auth0-recognized-as-one-of-inc-magazines-best-workplaces-2019/) and Battery Ventures’ [50 Highest Rated Private Cloud Computing Companies To Work For](https://auth0.com/blog/auth0-named-one-of-50-highest-rated-private-cloud-computing-companies-to-work-for/). 

Auth0 provides a competitive total rewards package including (but not limited to): 401(k) matching, flexible paid vacation time, career development opportunities and training, competitive parental leave, diversity and inclusion initiatives, top of the line gear, an annual company-wide offsite, and other flexible and generous practices. For current job opportunities, please visit [https://auth0.com/career](https://auth0.com/careers). 

## About FlexJobs
[FlexJobs](https://www.flexjobs.com/) is a premium online job service for professionals seeking flexible work, specializing in full-time and part-time remote jobs, employee and freelance jobs, and on-site jobs with flexible, part-time, and alternative schedules. Since its start in 2007, FlexJobs has helped more than 4 million people in their job searches and has created the largest vetted database of legitimate flexible job opportunities in over 50 career categories. Besides, FlexJobs provides robust career support, including curated expert resources and career coaching services, to partner with job seekers in all phases of their journey. A trusted source in the media, FlexJobs has been cited in top national outlets such as CNN, Wall Street Journal, New York Times, CNBC, Forbes, and many others. FlexJobs' Founder & CEO Sara Sutton has also launched two additional partner sites, [Remote.co](http://remote.co/) and [1 Million for Work Flexibility](http://www.workflexibility.org/), to help provide education and awareness about the viability and benefits of flexible work. Sutton is the creator of [The TRaD* Works Forum (Telecommuting, Remote, & Distributed)](https://trad.works/), dedicated to helping companies leverage the benefits of telecommuting, remote and distributed teams.

## About Built In
Working in tech is a way of life. Built In helps people live it with purpose. Across the most vibrant tech hubs in the US, Built In helps tech professionals stay on top of tech news and trends, expand their networks and carve out futures at companies they believe in. Built In attracts a niche audience of 1 million tech professionals every month and, in 2019, the company hit a milestone, serving 1,100 companies annually. Built In recently launched BuiltIn.com, a national hub for tech trend coverage and resources to help professionals grow in their careers.

<include src="asides/AboutAuth0" />

### Media Contacts
Kaycie East<br>
Auth0 Communications<br>
[press@auth0.com](mailto:press@auth0.com) 
 
Alexandria Plew<br>
Matter for Auth0<br>
[auth0@matternow.com](mailto:auth0@matternow.com)


Auth0 Honored for Excellent Workplace Culture in Two Industry ‘Best of’ Lists

a28d70be6ae2b9389db9ad815cab510e

Guest Author

Wojciech Kwiatek

Angular is built on the top of RxJS. Learn how you can make use of RxJS in your Angular apps for a clearer and more maintainable codebase.

<div class="alert alert-danger alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>This post is out of date.</strong> Angular 5+ replaced `Http` with `HttpClient` and RxJS 6 introduced many changes to operators. Check out the [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) and [RxJS 6: What's new and what has changed?](https://auth0.com/blog/whats-new-in-rxjs-6/) for more recent content.
</div>

---

**TL;DR** Angular, [previously known as Angular 2](http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html), incorporates RxJS and uses it internally. We can make use of some RxJS goodies and introduce FRP to write more robust code in our apps.

---

If you're new to RxJS, I recommend reading [Understanding Reactive Programming and RxJS](https://auth0.com/blog/understanding-reactive-programming-and-rxjs/) before proceeding.

RxJS is all about streams, operators to modify them, and observables.

## Functional Reactive Programming (FRP)
FRP has recently become a buzzword. To give you a deeper understanding on that topic, there is an awesome post from Andre Stalz -- [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754). What is the key takeaway from the this comprehensive post? Reactive programming is actually programming with asynchronous data streams. But where does the word *functional* come into play? Functional is about how we can modify these streams to create new sets of data. A stream can be used as an input to another stream. We have a bunch of operators in RxJS to do things like this. So, can we do some of FRP with RxJS? The short answer is: yes! And we'll do so with Angular.

## RxJS in Angular
To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an Angular dependency so it's ready to use out of the box.

### Passing observables to the view
We are about to start with some observables created ad hoc. Let's create an observable from the JavaScript array:

```ts
const items = Observable.of([1, 2, 3])
```

Now, we can use the created observable as a component's property and pass it into the view. Angular introduced a new filter, which will be a perfect fit here. It's called `async`. Its purpose is to unwrap promises and observables. In the case of an observable it'll pass the last value of the observable:


```ts
import { Component } from '@angular/core'
import { Observable } from 'rxjs/Rx'

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  public items = Observable.of([1, 2, 3])
}
```

We should see a list of elements in the browser.

This is our *hello world* example to see how async works and how we can use it.

### Http
Angular relies on RxJS for some of its internal features. One of the most well-known services is *Http*. In Angular 1.x, *Http* was a promise-based service. In Angular 2+, it's based on observables. This means that we can also make use of the `async` pipe here. Let's try to create a real-world example with a service. We want to fetch a list of repos authored by Auth0 on GitHub:

```ts
import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Observable } from 'rxjs/Rx'
import 'rxjs/add/operator/map'

@Injectable()
export class RepoService {
  constructor(private _http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this._http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
  }
}
```

Here, we have the service, which exposes the `getReposForUser` method to make an http call. Note the return type of the method -- it's an `Observable<any>`. Now, we can add it into the module and use it in the component:

```ts
import { RepoService } from './repo.service.js'

@Component({
  selector: 'my-app',
  template: `

  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    console.log(this.repos)
  }
}
```

Something important has just happened. You can take a look into the *Network* tab of your developer tools in the browser. No call was made. Let's add the `for` loop with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let repo of repos | async">
        {{ repo.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
  }
}
```

Now the call for repositories is fired, and we can see that the list of repos has been fetched correctly. Why is that?

## Hot and Cold Observables
The `http.get` observable above is **cold**: that means each subscriber sees the same events from the beginning. It's independent of any other subscriber. It also means that if there's no subscriber, no value is emitted! See this one in action:

```ts
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    this.repos.subscribe()
    this.repos.subscribe()
  }
}
```

Now you'll be able to see three calls. You can now see one more thing -- `async` makes a subscription under the hood.

On the other hand, we have **hot** observables. The difference is, no matter how many subscribers there are, the observable starts just once. And we can make our observable hot, instead of cold, by using the `share` operator:

```ts
// ...
import 'rxjs/add/operator/share'

@Injectable()
export class RepoService {
  constructor(private http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this.http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
      .share()
  }
}
```

Now you should see just one call. If you want to go deeper with the topic, here is a [Hot vs Cold Observables](http://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339) article by Ben Lesh.

## Programming the reactive way in Angular

### Handling events
We've covered how you've probably used RxJS observables for *Http* in Angular, even if you weren't aware of it. However, there are many more things you can do with streams, even if Angular doesn't require you to do so. Now we move on to the *on click* events. The traditional, imperative way of handling click events in Angular is as follows:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="handleButtonClick(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  handleButtonClick(value: number) {
    console.log(value)
  }
}
```

We can create a stream of click events using RxJS `Subject`. *Subject* is both an observer and an observable at the same time. It means it can emit value (using `.next()`), and you can subscribe to it (using `subscribe`).

Here, you can see the same case achieved with functional approach using RxJS:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

It's not much different than the previous one, though. Let's try to add some more logic there. Like making sum of clicks and printing some text instead of just number.

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<string> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
    .map((value: number): string => `Sum of clicks: ${value}`)

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

The key point is that *we define how the clicks stream will behave.* We say that we don't really need clicks but only the sum of them with some prepended text. And this sum will be our stream, not the pure click events. And we subscribe to the stream of summed values. In other words, *the key of functional programming is to make the code declarative, not imperative.*

### Communication between components
Let's briefly address communication between Angular components using an RxJS approach. It's actually about dumb components in the RxJS approach of an Angular world. Last time I described the [change detection of Angular](https://auth0.com/blog/understanding-angular-2-change-detection/) and what we can do with it to fine-tune the app. We'll add the component with `clicks$` stream as the input.

```ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'

@Component({
  selector: 'my-score',
  template: 'Summary: {{ score }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScoreComponent {
  @Input() public score: number
}
```

Note that the component has `ChangeDetectionStrategy.OnPush` turned on, so this means that we assume that the new reference will come as the input. The component accepts a numeric parameter, but there is no reference to streams. We can handle this with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
    <my-score [score]="counter$ | async"></my-score>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
}
```

### Forms
Another place when you can use the power of RxJS is forms. We can use all of the knowledge that we have gained up to this point and see how we can create a reactive login form.

First, let's start with adding `ReactiveFormsModule` from `@angular/forms` to the module. Then we can make use of the reactive forms introduced in Angular. Here's how it can look:

```ts
import { FormBuilder, FormGroup } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })
  }
}
```

We now have a few additional blocks:
- `formControlName` -- added to match names from templates to the appropriate fields in the controller
- `formBuilder.group` -- creates the form
- `[formGroup]` -- connects the template and the controller

We can now use the `valueChanges` observable:

```ts
// ...
    this.loginForm.valueChanges.subscribe(console.log.bind(console))
// ...
```

Now, each changed field will emit an event and will be logged to the console. This offers many possibilities since we can take advantage of any operator that RxJS provides. In this example, let's focus on submitting the form in a reactive way. We can put `(submit)` on the form:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
    
  `
})
// ...
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

// ...
```

We now have a stream of submit events and a stream of values. All that remains is to combine these streams. The resulting stream will emit the current state of the fields when the form is submitted. The desired behavior can be achieved by using the [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) operator of RxJS. The combined stream is as follows:

```ts
// ...
    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
// ...
```

We now have combined streams, and the logic is consolidated. It can be written in a single line. Just to recap, here is the final code for the form component:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })

    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
  }
}
```

<include src="asides/Angular" />

## Conclusion
Angular has a lot more features than meets the eye. RxJS is, in my personal opinion, one of the best of them. It can rocket the app to the next level in term of maintainability and clarity. The future is more declarative, less imperative code.

RxJS can appear intimidating at first, but once you’re familiar with its functionality and operators, it supplies many benefits (such as defining logic at the declaration time). All of this is to say, the code is easier to understand compared to imperative code. RxJS requires a different mode of thinking, but it is very worthwhile to learn and use.

"built in"