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