Angular Authentication

A Tale of Two Grants

Ado Kukic

Developer Evangelist

Auth0

@kukicado

OAuth 2.0

An open standard for access delegation, commonly used as a way for Internet users to grant websites or applications access to their information on other websites but without giving them the passwords.

An open standard for access delegation.

@kukicado

OpenID Connect

An authentication layer built on top of OAuth 2.0, allowing clients to verify the identity of an end-user based on the authentication performed by an authorization server.

@kukicado

SPA

Single Page Application

Implicit Grant Flow

@kukicado

Baseline

{ json }

@kukicado

Authentication

@kukicado

Authenticated

{ json }

@kukicado

Silent Authentication

{ json }

@kukicado

Silent Authentication

{ json }

iframe

@kukicado

Best Current Practice

Single Page Application

Authorization Code with PKCE Grant Flow

@kukicado

Baseline

{ json }

@kukicado

Authentication

{ code_challenge }

code={123}

@kukicado

Authentication

{ code={123} code_verifier }

@kukicado

Authenticated

{ json }

@kukicado

Silent Authentication

{ json }

@kukicado

Silent Authentication

{ json }

iframe

@kukicado

Summary

@kukicado

Authorization Code with PKCE is best current practice.

If you are ok with Implicit Flow and understand attack surface, no need to migrate

Never store access_token JWTs in the browser.

Resources

@kukicado

Angular Authentication Tutorial

http://bit.ly/ng-auth-quick

OAuth 2.0 Complete Guide

http://bit.ly/oauth-complete

OAuth 2.0 Scopes

http://bit.ly/oauth-scopes

Thank You!

@kukicado

Special Thanks to Codepen users:

@AngelaVelasquez @qtox @alexsafayan