--- title: "Implementing Third-Party OAuth Login with NestJS" description: "Implement a complete OAuth 2.0 Authorization Code Flow service with NestJS, Prisma, JWT, and Swagger, and demonstrate the integration process with a Next.js e-commerce front-end." canonical_url: "https://blog.markkulab.net/en/post/practice-oauth-with-nestjs" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2024-10-14 01:01:35 +0800" category: "Backend" tags: ["nestjs", "oauth", "jwt", "prisma", "nodejs", "backend", "authentication"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Implementing Third-Party OAuth Login with NestJS ## Introduction After doing a simple OAuth exercise, I also learned the NestJS (Node) backend framework and Prisma (ORM) along the way. ## Purpose Open Authorization (OAuth) is an open standard for authorization, widely used for social logins. It allows third-party websites to access resources on a resource server without obtaining the user's credentials. ## Flow Chart ![Flow chart](https://blog.markkulab.net/content/markku/posts/practice-oauth-with-nestjs/images/flow-chart.png) ## Flow Description 1. When the user clicks the login button on the main website, the `redirect_uri` is passed to the OAuth login page via the URL. 2. After the user enters their username and password to log in, the system generates a `code`, stores it in the database, and then redirects the page back to the e-commerce site's callback page, passing the `code` via the URL. 3. On the callback page, the frontend can extract the `code` from the URL and send it to the backend. The backend then uses this `code` to exchange it for an `access token` via the OAuth API. 4. The page receives the `access token`. This token can then be used to access the resource server and retrieve relevant information. When the token expires, it can be refreshed. ## Technology Stack Used * Frontend (E-commerce site) - (Next.JS, Eslint, Prettier, React, Redux toolkit) - [Code](https://github.com/markku636/oauth.nextjs) * Backend (OAuth service) - (NestJS, MySQL, Prisma, Swagger, class-validator for data validation, and Guards for JWT API authentication) - [Code](https://github.com/markku636/oauth.nest.api) * Database: MySQL ## Demo * [EC site](https://oauth-nextjs.letgo.com.tw) * [Auth service api](https://oauth-nestjs-api.letgo.com.tw) * [Swagger Url](https://oauth-nestjs-api.letgo.com.tw/docs) - admin / 123 * [Demo Video](https://www.loom.com/share/fdac0b89ace64bc3b3ad5a85098d0499) Deployment Environment * Deployed to a NAS using PowerShell * GCP reverse proxy + personal NAS server Testing * Jest * Rest Client ## Thoughts This was my first time building a website with NestJS, and I found the development experience to be very pleasant. The modular design of NestJS reminded me of Angular's dependency injection, and it also felt a bit like the layered architecture of .NET MVC. Paired with Prisma, database operations became very intuitive. For lightweight websites, NestJS not only enables rapid development but also makes it easy to achieve modularity and separation of concerns, leading to a more efficient development process. ## Additional Notes: ### 1. A summary of the different OAuth grant types * Authorization Code Grant - In this flow, an authorization code is used to exchange for an access token. The application never directly handles the user's credentials. * Client Credentials Grant - In this grant type, if Service A wants to access Service B's API, Service A uses its own client credentials (issued by Service B) to obtain an access token. * Implicit Grant - Typically used with JavaScript, but it is being phased out due to security concerns. * Resource Owner Password Credentials Grant - This grant type directly requests the user's credentials from the client. It is less secure and not commonly used anymore. ### 2. The difference between OAuth and SSO * SSO: The purpose of Single Sign-On (SSO) is to simplify the login process across multiple applications. It allows a user to log in once and then seamlessly use the same identity across different applications. SSO primarily focuses on **authentication**, which is confirming who the user is. * OAuth: OAuth, on the other hand, is an authorization protocol. It allows a third-party application to access protected resources on behalf of a user. The main purpose of OAuth is **authorization**, enabling an application to securely access certain user resources without needing direct access to the user's credentials (like their password). ### 3. A newer topic: OpenID Connect (OIDC) * OpenID Connect: OIDC is an identity layer built on top of OAuth 2.0. It is specifically designed for authentication and supports SSO. OIDC is a hybrid of SSO and OAuth, addressing both authentication and authorization needs. ### 4. What is authentication vs. authorization? * Authentication - Who are you? Verifying if the identity of the source is valid. * Authorization - What can the target user do? Or what can they access? ## References * [Reference 1](https://docs.guandata.com/article/1/566167986377850880.html) * [Reference 2](https://apifox.com/help/best-practices/how-to-test-oauth-2.0/) * [Reference 3](https://www.youtube.com/watch?v=2rd_Ru7Bwkg&t=386s) * [Official Documentation](https://oauth.net/2/) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/practice-oauth-with-nestjs) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.