[ Intro ] 로그인 관련 기능

[Happhee]

🔥 Related Issues

• close #7

🎡 작업 내용

• [x] 카카오 develop 연결
• [ ] axios, recoil 초기 세팅
• [x] 구글 로그인 연결
• [x] 네이버 로그인 연결

✅ PR Point

• pages/api/auth/[...nextauth].ts kakao, naver, google 로그인을 지원해주는 providers 생성 ❗️❗️❗️

  import NextAuth from 'next-auth';
  import GoogleProvider from 'next-auth/providers/google';
  import NaverProvider from 'next-auth/providers/naver';
  import KakaoProvider from 'next-auth/providers/kakao';
  export default NextAuth({
  providers: [
  KakaoProvider({
    clientId: `${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
    clientSecret: `${process.env.NEXT_PUBLIC_KAKAO_SECRECT}`,
  }),
  NaverProvider({
    clientId: `${process.env.NEXT_PUBLIC_NAVER_ID}`,
    clientSecret: `${process.env.NEXT_PUBLIC_NAVER_SECRET}`,
  }),
  GoogleProvider({
    clientId: `${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}`,
    clientSecret: `${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET}`,
  }),
  ],
  });

• pages/_app.tsx 로그인한 유저의 정보를 받아올수 있도록 session 을 설정하기

  
  import { SessionProvider } from 'next-auth/react';

- login.tsx
onClick 함수로 signIn(소셜네임)을 넘겨주면 소셜 로그인이 진행된다
```typescript
import {
  ImgKakaoLogo,
  ImgGoogleLogo,
  ImgNaverLogo,
} from '../public/assets/images';
import Image from 'next/image';
import styled from '@emotion/styled';
import { signIn, signOut, useSession } from 'next-auth/react';

export default function login() {
  const { data, status } = useSession();
  console.log(data?.user);
  return (
    <StLoginWrapper>
      <Image
        src={ImgNaverLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('naver')}
      />
      <Image
        src={ImgKakaoLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('kakao')}
      />

      <Image
        src={ImgGoogleLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('google')}
      />
    </StLoginWrapper>
  );
}
const StLoginWrapper = styled.section`
  display: flex;
  justify-content: center;
  align-items: center;
`;

😡 Trouble Shooting

업찌롱 >.<

👀 스크린샷 / GIF / 링크

👇 카카오 로그인

👇 구글 로그인

👇 네이버 로그인