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 }
{ json }
@kukicado

Silent Authentication
{ json }
{ json }
@kukicado

Silent Authentication
{ json }
{ 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 }
{ json }
@kukicado

Silent Authentication
{ json }
{ json }
@kukicado

Silent Authentication
{ json }
{ 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
ngHouston
By Ado Kukic
ngHouston
- 731