Using OAuth 2.0 and OIDC in SPA frontends

An in-depth look at current best practices for securing OAuth 2.0

Many modern applications are built as Single Page Applications, using popular frameworks like Angular, React, and Vue. These frontend applications often need to rely on OpenID Connect to authenticate users and on OAuth 2.0 to access remote APIs. But how do you integrate OAuth 2.0 and OIDC securely in a frontend? Where do you store access tokens? Can you use refresh tokens?

Many developers struggle with these questions, and this course answers them. We dive deep into the current best practices for using OAuth 2.0 and OIDC in frontend applications. We discuss how SPAs use OAuth 2.0 to secure API access. We also explore recent changes in browser behavior, such as third-party cookie blocking, and their impact on OAuth 2.0 in SPAs.

Throughout the course, we dive deeper and deeper into the security properties of Single Page Applications. Towards the end, we discuss attack scenarios that cannot be stopped with a frontend alone. As a solution, we present the Backend-for-Frontend (BFF) pattern and analyze how it benefits the security of tokens.

At the end of this course, you will know all about token storage, silent authentication, third-party cookie blocking, and the backend-for-frontend pattern.

Stop struggling today!

Learn the correct way to use OAuth 2.0 and OpenID Connect in Single Page Applications

Course curriculum

  • 1

    Course welcome

    • Course introduction

    • Course overview

    • Learner’s guide

  • 2

    OAuth 2.0 and OIDC in SPAs

    • Chapter introduction

    • OAuth 2.0 and OpenID Connect in SPAs

    • The role of tokens

    • Implementing OAuth 2.0 and OIDC in SPAs

    • Chapter assessment

    • Specifications and references

  • 3

    Access tokens in SPAs

    • Chapter introduction

    • Using access tokens

    • Access token types

    • Inspecting access token types

    • Test your knowledge

    • The properties of bearer tokens

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 4

    The role of cookies in OAuth 2.0 and OIDC

    • Chapter introduction

    • Cookies in OAuth 2.0 flows

    • Silent authentication

    • Running a silent authentication flow

    • Test your knowledge

    • Frame-based OAuth 2.0 flows

    • Running a silent flow in practice

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 5

    The impact of third-party cookie blocking

    • Chapter introduction

    • Third-party cookie blocking

    • The impact of third-party cookie blocking

    • Third-party cookie blocking in practice

    • Test your knowledge

    • Using first-party cookies

    • Using refresh tokens in SPAs

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 6

    JavaScript security and OAuth 2.0

    • Chapter introduction

    • The threat of malicious JavaScript code

    • A primer on Cross-Site Scripting

    • Test your knowledge

    • The impact of XSS on OAuth 2.0

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 7

    Refresh tokens in SPAs

    • Chapter introduction

    • Introducing refresh token rotation

    • Practicalities of refresh token rotation

    • Trying out refresh token rotation

    • Test your knowledge

    • Security considerations of refresh tokens

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 8

    Token security in SPAs

    • Chapter introduction

    • Token theft scenarios

    • An advanced attack scenario

    • Test your knowledge

    • Securing tokens in the browser

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 9

    Securing SPAs with a Backend-for-Frontend

    • Chapter introduction

    • The concept of a Backend-for-Frontend

    • Browser-facing BFF implementation details

    • API-facing BFF implementation details

    • Test your knowledge

    • How a BFF increases security

    • The impact of XSS on a BFF

    • Deciding on a BFF

    • Overview of best practices

    • Chapter assessment

    • Specifications and references

    • Q & A

  • 10

    Summary and conclusion

    • Overview of best practices

    • Conclusion

    • Spread the word

    • What's next?

What you will get ...

This course is the second module in the Mastering OAuth 2.0 and OpenID Connect course bundle. Purchasing the bundle gives you immediate access to the lectures, demos, assignments, assessments, and more. At the end of the course, you receive a course completion certificate.

If you have further questions, don't hesitate to reach out (courses@pragmaticwebsecurity.com).

Testimonials

Student feedback on the Mastering OAuth 2.0 and OpenID Connect course bundle

Jochen Hammann

Technical lead at Servicetrace

Mastering OAuth 2.0 and OpenID Connect was one of the best courses I attended. Philippe is a great instructor. He has the gift of explaining complex topics in a very understandable and structured way. The presentations were perfectly prepared. I can recommend this course to anyone who is professionally involved with this topic.

I am looking forward to the next course from Philippe. Great work. Thank you very much.

Bruno Winck

Founder at Kneaver Corp

I came across this course by chance last week and jumped on the opportunity to join. I feel very lucky I did. Philippe knows his stuff and explains it well.

It's a complex domain, and it takes time to gather the documentation, process it, validate various resources, and try different options. This intensive course offers a shortcut.

Within a few hours, we reached the master level. Even more advanced questions got answered in the Q&A. The content is also cutting edge, only a few days or weeks behind the last discussions of the working group, or the latest changes in browsers.

I now have the confidence to make design decisions, make implementations, and anticipate coming changes. Soon, I will even start using the advanced delegation scheme discussed at the end, which seemed far-fetched at the time. After hearing about it, it all just makes sense!

I would have never heard about it if it wasn't for Philippe's masterclass.

Ready? Let's go!

Purchase the Mastering OAuth 2.0 and OpenID Connect course bundle now to get access to the latest best practices for securing OAuth 2.0 and OpenID Connect!