Skip to content

Latest commit

 

History

History
74 lines (53 loc) · 2.75 KB

README.md

File metadata and controls

74 lines (53 loc) · 2.75 KB
Raw

nextjs with kakao login

Stack

  • Language:
  • Authentication: , KAKAO Login
  • Deploy and Database: Vercel Postgres
  • Frontend and Server:
  • Validation:
  • ORM: Drizzle Badge

Description

카카오 로그인을 이용한 간단한 로그인 기능을 구현하는 예제입니다.

This is a Next.js project bootstrapped with create-next-app.

Diagram

  • 카카오 로그인(https://kauth.kakao.com/oauth/authorize)으로 이동 전: previous page url, state 값 저장
  • 로그인 성공 경로(/signin/success)에서 state 값 파싱 후 저장 해둔 값과 일치하면 previous page url을 꺼내서 리디렉션
sequenceDiagram
    participant Client as User Client
    participant Server as Service Server
    participant KaKao as KaKao Server
    Client->>Client: generate state and save state·previous page url
    Note over Client,KaKao: KaKao Login
    Client->>KaKao: Click kakao login button(move to https://kauth.kakao.com/oauth/authorize)
    KaKao-->>Client: Show authentication, authorization screen
    Client->>KaKao: User completes consent
    KaKao-->>Server: Redirect to RedirectURI(/oauth/kakao/callback)
    Server->>KaKao: Request Token
    KaKao-->>Server: Token
    Note over Client,KaKao: Verify and enroll members
    Server->>KaKao: Fetch user info from https://kapi.kakao.com/v2/user/me
    KaKao-->>Server: User info
    alt If a new user
        Server->>Server: Register a user
    end
    Note over Client,KaKao: Service login
    Server->>Client: Create a service session and redirect to login success page
    alt state is vaild
    Client->>Client: Create a service session and redirect to [previous page]
    else state is invaild
    Client->>Client: Invalidate a service session and redirect to [service root page]
    end
Loading

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.