OAuth 2.0 and JWT Authorization in JavaScript: A Complete Guide for Beginners

Introduction to OAuth 2.0 and JWT: What Are They and Why Do You Need Them?

Modern web applications rarely function without an authorization system. Whether it's logging in via Google, accessing an API, or protecting routes in your Node.js application — you will need OAuth 2.0 and JWT (JSON Web Tokens). These technologies have become the de facto standard for secure data exchange between client and server.

In this article, we will break down how OAuth 2.0 and JWT work and build a simple authorization system in JavaScript (Node.js). The material is designed for beginner developers, so we will move from theory to practice with detailed code examples.

Part 1: What is OAuth 2.0 and How Does It Work?

OAuth 2.0 is an authorization protocol that allows applications to obtain limited access to user resources without sharing a password. Imagine you want to log into a website using your Google account. OAuth 2.0 is exactly what handles this process.

Main Roles in OAuth 2.0

\n
• Resource Owner — the user who owns the data.
\n
• Client — your application (e.g., a Node.js server).
\n
• Authorization Server — the server that issues tokens (e.g., Google, GitHub).
\n
• Resource Server — the server that stores user data.
\n

Typical OAuth 2.0 Flow (Authorization Code Grant)

\n
1. The user clicks "Sign in with Google".
\n
2. The application redirects them to the Google authorization server.
\n
3. The user grants consent.
\n
4. Google returns an authorization code to the application server.
\n
5. The server exchanges this code for an access token.
\n
6. The server uses the access token to access the user's data.
\n

In practice, for simple applications, JWT is often used as the access token format.

Part 2: JWT — Structure and How It Works

JWT (JSON Web Token) is a compact and self-contained way to transmit information between parties as a JSON object. The token is signed, so it can be verified without querying a database.

JWT Structure

A JWT consists of three parts, separated by dots (.):

header.payload.signature

\n
• Header — contains the token type and signing algorithm (e.g., HS256).
\n
• Payload — the data (claims), such as user ID, role, expiration time.
\n
• Signature — a signature created using a secret key.
\n

Example of a Decoded JWT

{\n  "alg": "HS256",\n  "typ": "JWT"\n}\n.\n{\n  "sub": "1234567890",\n  "name": "John Doe",\n  "iat": 1516239022,\n  "exp": 1516242622\n}\n.\n[signature]

Important: the payload is not encrypted, only signed. Never store confidential data (passwords) in a JWT!

Part 3: Implementing JWT Authorization in Node.js

Now let's move to practice. We will create a simple REST API using Express.js with JWT authorization. For this, we will need the jsonwebtoken and bcryptjs libraries.

Step 1: Installing Dependencies

npm init -y\nnpm install express jsonwebtoken bcryptjs dotenv\nnpm install --save-dev nodemon

Step 2: Basic Server Setup

// server.js\nrequire('dotenv').config();\nconst express = require('express');\nconst jwt = require('jsonwebtoken');\nconst bcrypt = require('bcryptjs');\n\nconst app = express();\napp.use(express.json());\n\nconst users = []; // In a real project — a database\n\nconst PORT = process.env.PORT || 3000;\nconst JWT_SECRET = process.env.JWT_SECRET || 'mysecretkey123';\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});

                
                

                    

                        Blogs                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
mysql_fetch_array() Error: Parameter 1 Must Be a Resource — Solution
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Logging in Go Applications: Best Practices in Practice
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Determining the HTTP Request Type in PHP: GET, POST, PUT, DELETE — A Complete Breakdown
                                
                            
                                            
                

                
                

                    

                        Book Recommendations                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
Refactoring TypeScript Code: Improving Projects with Proven Methods
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Refactoring Java Code: A Practical Guide
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Pro Spring Boot 2
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Rust by Example
                                
                            
                                            
                
            
    

  
Read also
  

                
                  
                 Design Patterns in Kotlin: From A to Z with Code Examples
      
                
                  
                 Deploying Kotlin on Kubernetes: A Basic Guide
      
                
                  
                 Working with WebAssembly and C++: Advanced Optimization and Integration Techniques
      
                
                  
                 Working with JSON in PHP: Parsing and Serialization for Beginners
      
                
                  
                 Rust Code Review: 5 Comments Every Senior Will Make