X(Twitter) OAuth2.0 Connection

Preview

🇺🇸 Read in English | 🇰🇷 한국어 문서 보기

Project Overview

Why Implement Twitter oauth manually?

Implementing OAuth authentication in Next.js' app router environment is quietly standard in Web3 project. But there are no best practices with nextjs on google.

If you look at the commonly used demo of the next-auth library, there is a problem that Twitter OAuth is not working properly. Also, Twitter's official document does not provide a clear best practice for OAuth processing.

Accordingly, this project aims to explore how to effectively implement OAuth treatment in the Next.js app router environment and present best practices.

Introduction

This project is a Proof of Concept (PoC) implementation of Twitter OAuth 2.0 using PKCE (Proof Key for Code Exchange). The OAuth authentication process is handled in a popup window(using window.open()), and upon successful authentication, a message is sent to the origin for storing tokens in local storage.

Key Features

• OAuth 2.0 Authentication with PKCE Encryption
  • Apply PKCE method for enhanced security in OAuth 2.0
  • Secure by using code_verifier and code_challenge during authentication
• OAuth authentication and sending messages through pop-ups
  • Performing Twitter login in a pop-up window
  • When authentication is complete, use the postMessage API to send authentication information to the parent window (original)
  • Receive messages from the parent window and store them in localStorage

Install & Usage

1. Install dependencies

yarn install
# or
npm install

2. Set environment variables

Create the .env file. And fill out each variants

X_CLIENT_ID="YOUR-OAUTH2.0-CLIENT-KEY"
X_SECRET_KEY="YoUR-OAUTH2.0-SECRET-KEY";
NEXTAUTH_URL=http://localhost:3000/api/auth/x/callback

3. Run development server

yarn run dev
#or
npm run dev

How to use

1. Click the login button to open the popup window.
2. Complete the Twitter OAuth 2.0 login process.
3. Once authenticated, the popup sends the access token to the parent window.
4. The parent window stores the token in localStorage and uses it for API requests.

프로젝트 개요

왜 트위터는 직접 OAuth 인증을 직접 구현해야하는지에 대해서.

Next.js에서 일반적으로 많이 사용하는 인증 라이브러리로 next-auth가 있습니다. 기존 page router에 대해서는 풍부한 예시가 있습니다만, app router 이후로는 관리가 안되어있는 걸 확인해 보실 수 있습니다. 실제로 라이브 데모에서 트위터 인증을 시도하시면 전혀 동작하지 않는 걸 보실 수 있는데요. 트위터의 정책 변경으로 인해 Bot 계정이나 Web App 계정에 대해서 blocking 하는 정책으로 인해서 설정이 약간 달라져야합니다.

따라서 이 프로젝트를 통해 Next.js의 app router 환경에서 트위터의 OAuth 처리를 효과적으로 구현하는 법에 대한 Best Practice를 제시하는 것을 목표로 합니다.

소개

트위터의 OAuth2.0에서는 PKCE (Proof Key for Code Exchange) 라고 불리는 키교환 알고리즘을 통해 유효한 클라이언트를 검증합니다. 해당 프로젝트에서는 crypto-js를 사용하여 직접 키를 생성하고 암호화하여 비교하는 것을 목표로 하고 있습니다.

또한, Javascript 내장되어 있는 팝업 기능 API인 window.open()과 메시지 전달 기능을 사용하여 부모 창(origin)으로 전달된 access token을 localStorage에 저장하는 방법으로 처리합니다.

주요 기능

• PKCE암호화를 사용하는 OAuth 2.0 인증
  • OAuth2.0의 보안 강화 방식인 PKCE 방식을 채용
  • 인증 과정에서 code_verifier과 code_challenge를 사용하여 보안성을 확보
• 팝업을 통한 OAuth 인증과 메시지 전송
  • 팝업 창에서 Twitter 로그인을 수행.
  • 인증이 완료되면 `postMessage' API로 부모창(origin)으로 인증 정보를 전달
  • 부모 창에선 메시지를 수신 후 localStorage에 저장.

설치 및 실행

1. 패키지 설치

yarn install
# or
npm install

2. 환경 변수 설정

.env 파일을 만들고 아래 변수를 기입해 주세요.

X_CLIENT_ID="YOUR-OAUTH2.0-CLIENT-KEY"
X_SECRET_KEY="YoUR-OAUTH2.0-SECRET-KEY";
NEXTAUTH_URL=http://localhost:3000/api/auth/x/callback

3. Run development server

yarn run dev
#or
npm run dev

How to use

1. 로그인 버튼을 클릭하면 팝업 창이 열립니다.
2. Twitter OAuth 2.0 인증 페이지에서 로그인을 진행합니다.
3. 인증이 완료되면 팝업 창에서 부모 창으로 액세스 토큰을 전달합니다.
4. 부모 창에서 토큰을 localStorage에 저장하고, 이후 API 요청 시 활용할 수 있습니다.