Single Page Application Authentication
Advanced
Ado Kukic
Evangelism Lead
Auth0
@kukicado
Traditional Auth
{ username / password }
{ sid 123 }
Traditional Auth
{ sid 123 }
{ html }
Traditional Auth
Single Page App
Authentication
Considerations
Domain Topology
Backend for SPA
Delegation
AuthN / AuthZ
Considerations
Domain Topology
Backend for SPA
Delegation
AuthN / AuthZ
Separate Domains
No Backend
OAuth 2.0
Custom Claims
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.
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.
An authentication layer built on top of OAuth 2.0
OAuth 2.0 Roles
Resource Owner
The entity that can grant access to a protected resource. Typically this is the end-user.
Resource Server
The server hosting the protected resources. This is the API you want to access.
Client
The app requesting access to a protected resource on behalf of the Resource Owner.
Authorization Server
The server that authenticates the Resource Owner, and issues tokens.
Codes and Tokens
Authorization Code
An opaque string, meant to be exchanged with an Access Token at the token endpoint.
Access Token
An opaque string or JWT that denotes who has authorized which permissions (scopes) to which application.
Refresh Token
A special kind of token containing the information required to obtain a new Access Token or ID Token.
Id Token
A JWT that contains user profile information (name, email, etc.), represented in the form of claims.
OAuth 2.0 Scopes
Scopes only come into play in delegation scenarios, and limit what an app can do on behalf of a user.
OAuth 2.0 Flows
Authorization Code
Authorization Code with Proof Key for Code Exchange (PKCE)
Implicit
Client Credentials
Single Page Application
Implicit Grant Flow
Baseline
{ json }
Authentication
Authenticated
{ json }
{ json }
Silent Authentication
{ json }
{ json }
Silent Authentication
{ json }
{ json }
iframe
Single Page Application
Authorization Code with PKCE Grant Flow
Baseline
{ json }
Authentication
{ code_challenge }
code={123}
Authentication
{ code={123} code_verifier }
Authenticated
{ json }
{ json }
Summary
Modern authentication is complex
Two ways to approach SPA authentication
Auth Code with PKCE is the BCP
Your architecture will guide your needs
Resources
On The Nature of OAuth 2 Scopes
http://bit.ly/oauth-scopes
Angular Authentication Tutorial
http://bit.ly/ng-auth-quick
React Authentication Tutorial
http://bit.ly/react-auth-quick
Thank You!
@kukicado
Advanced Single Page Application Security Meetup
By Ado Kukic
