🔐 인증 로직 🔐

[박상은]

🎥 영상 🎥

• 회원가입/로그인
  

• OAuth 로그인
  

📤 FE 📤

0️⃣ 구현 사항

• SeartchInput 공용으로 사용하기 위해 수정
• Input 컴포넌트 작성
• Button 컴포넌트 작성
• SignUp 페이지 구현
• SignIn 페이지 구현
• Local, Google, Kakao, Naver 로그인 구현
• 로그인 유무에 따른 페이지 접근 제한 구현
  

  blegg/frontend/src/components/AuthenticationCheck.tsx

  Lines 1 to 30 in fdacac8

   import { Navigate } from "react-router-dom"; 
    
   import { useGetMe } from "@src/query/useGetMe"; 
    
   interface Props { 
     isAuth: boolean | null; 
   } 
    
   /** 
    * 2023/06/19 - 인증 관련된 조건 확인 HOC - by 1-blue 
    * true: 로그인한 유저만 접근 가능 
    * false: 로그인하지 않은 유저만 접근 가능 
    * null: 누구나 접근 가능 
    * */ 
   const AuthenticationCheck: React.FC<React.PropsWithChildren<Props>> = ({ 
     children, 
     isAuth, 
   }) => { 
     const { me } = useGetMe(); 
    
     // 로그인하지 않고 접근 
     if (isAuth === true && !me) return <Navigate replace to="/signin" />; 
     // 로그인하고 접근 
     else if (isAuth === false && me) return <Navigate replace to="/" />; 
    
     // 접근 조건에 만족 
     return children; 
   }; 
    
   export default AuthenticationCheck; 

1️⃣ 구현한 컴포넌트

• SeartchInput
• Input
• Button

📥 BE 📥

0️⃣ 구현 사항

• User 모델 및 Provider enum 작성
  

  blegg/backend/prisma/schema.prisma

  Lines 11 to 28 in 84df38c

   enum Provider { 
     local 
     google 
     kakao 
     naver 
   } 
    
   model User { 
     idx Int @default(autoincrement()) @id 
     id String @db.VarChar(40) @unique 
     password String? @db.VarChar(100) 
     nickname String @db.VarChar(20) @unique 
     summonerName String? @db.VarChar(20) @unique 
     avatar String @db.VarChar(100) 
    
     provider Provider @default(local) 
     snsId String? @db.VarChar(100) 
   } 

• 인증 Module, Controller, Service, Reposigory, guards, dto, interface, strategy 작성
• Local 회원가입 구현
• Local 로그인 구현
• Google 로그인 구현
• Kakao 로그인 구현
• Naver 로그인 구현

📮 레퍼런스 📮

상세한 로직은 구글링을 통한 블로그들을 보고 작성함

• Google 개발자 사이트
• Kakao 개발자 사이트
• Naver 개발자 사이트