Authentication and Authorization in React
AuthN vs AuthZ, the BFF pattern, cookie auth, OIDC/OAuth2, JWTs and RBAC in React.
Authentication is the process of verifying a user's identity. In real life, a hotel asks for a passport: the document contains claims (name, address, date of birth) and is issued by a trusted authority. In an application, the password plays the role of the passport.
Authorization determines what an authenticated user is allowed to do. At the hotel, the key card grants access to certain areas (your room, the pool) but not all. In an application, access to features is restricted based on the user's claims.
Sign in to read this course
A free account unlocks all 514 courses. 20 are readable without one.
What's inside
19 sections- 1 Table of Contents
- 2 Core Concepts: AuthN vs AuthZ
- 3 Why the Browser Cannot Keep Secrets
- 4 BFF: Backend for Frontend
- 5 Cookie Authentication
- 6 Same-Site Cookies and CSRF Protection
- 7 Deployment and Reverse Proxy
- 8 OpenID Connect and OAuth2
- 9 Authentication Flows
- 10 Anatomy of a JWT
- 11 Calls to an External API
- 12 BFF Styles
- 13 Authorization in React
- 14 Authorization Data: Approaches
- 15 RBAC with a Centralized Authorization API
- 16 Flow Diagrams
- 17 React Code Snippets
- 18 Reference Tables
- 19 Best Practices and Key Takeaways
More React & TypeScript courses
View all 15React Fundamentals
React from scratch — JSX, components, styling, hooks, props/state, side effects and forms.
Working with Components in React
Implement components, share state with Context, handle errors and improve component UI performance.
Working with Data in React
Core data patterns, Context for data and forms, Suspense, enterprise features and Server Actions.
Managing State in React 18
Local, remote, URL and web-storage state, derived state, forms, refs, useReducer and Context.
Using Hooks in React 19
Built-in hooks and custom hooks, performance with memoization and forms with useActionState.
Styling Apps in React 18
Compare React styling techniques — CSS-in-JS (styled-jsx) and CSS Modules with best practices.
Interested in this course?
Contact us to book it or get a custom training plan for your team.