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

Register now

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 ([email protected]).

What students had to say ...

5 star rating

Excellent

Paolo Demarchi

great job from the teacher, everything crystal clear, with good active part, concrete scenarios, cannot imagine how to do this better

great job from the teacher, everything crystal clear, with good active part, concrete scenarios, cannot imagine how to do this better

Read Less
5 star rating

Fantastic

Cyrille ROLLAND

After the perfect Introduction course this one should be taken by each developer (back or front). Now I'm hurry to take the "Securing APIs" course

After the perfect Introduction course this one should be taken by each developer (back or front). Now I'm hurry to take the "Securing APIs" course

Read Less
5 star rating

Epic

Karen Grigoryan

Well structured.

Well structured.

Read Less

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!

Get started now